/* Раскладка: шапка (салоны и дни), график мастеров, справа панель записи (на телефоне выезжает), снизу выбор мастеров */
:root{
  --bg:#EEF1F4; --surface:#FFFFFF; --surface2:#E8ECF0; --line:#DAE0E6; --line2:#EDF0F3;
  --fg:#1B2430; --muted:#5C6877; --accent:#1F6F78; --accent-fg:#FFFFFF; --accent-soft:#DCEEF0;
  --danger:#C2453F; --hatch1:#E7EBEF; --hatch2:#D8DEE5; --shadow:rgba(27,36,48,.28);
  --m0-bg:#CFE8EA; --m0-ac:#1F6F78;
  --m1-bg:#F3DDE0; --m1-ac:#B04A5A;
  --m2-bg:#DDE3F5; --m2-ac:#4560B5;
  --m3-bg:#F6E7C6; --m3-ac:#A9741A;
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hh:64px; --tw:44px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12181F; --surface:#1A222B; --surface2:#25303B; --line:#2D3844; --line2:#222B35;
    --fg:#E7EBF0; --muted:#9AA6B4; --accent:#5CC0CB; --accent-fg:#0E2A2E; --accent-soft:#1F3A3F;
    --danger:#EF7B74; --hatch1:#212A34; --hatch2:#2B3743; --shadow:rgba(0,0,0,.6);
    --m0-bg:#1D3A3E; --m0-ac:#5CC0CB;
    --m1-bg:#3F252B; --m1-ac:#E58A9A;
    --m2-bg:#262D49; --m2-ac:#8FA6F0;
    --m3-bg:#3F3318; --m3-ac:#E2B25A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#12181F; --surface:#1A222B; --surface2:#25303B; --line:#2D3844; --line2:#222B35;
  --fg:#E7EBF0; --muted:#9AA6B4; --accent:#5CC0CB; --accent-fg:#0E2A2E; --accent-soft:#1F3A3F;
  --danger:#EF7B74; --hatch1:#212A34; --hatch2:#2B3743; --shadow:rgba(0,0,0,.6);
  --m0-bg:#1D3A3E; --m0-ac:#5CC0CB;
  --m1-bg:#3F252B; --m1-ac:#E58A9A;
  --m2-bg:#262D49; --m2-ac:#8FA6F0;
  --m3-bg:#3F3318; --m3-ac:#E2B25A;
  color-scheme:dark;
}
@media (min-width:900px){ :root{ --hh:76px; --tw:52px; } }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:14px; line-height:1.35;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:12px;
}
button,input{font-family:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.m0{--mc-bg:var(--m0-bg);--mc-ac:var(--m0-ac)}
.m1{--mc-bg:var(--m1-bg);--mc-ac:var(--m1-ac)}
.m2{--mc-bg:var(--m2-bg);--mc-ac:var(--m2-ac)}
.m3{--mc-bg:var(--m3-bg);--mc-ac:var(--m3-ac)}
.m4{--mc-bg:var(--m4-bg);--mc-ac:var(--m4-ac)}

.app{height:100%; display:flex; flex-direction:column; gap:10px; min-height:0}

/* Шапка */
.hdr{display:flex; flex-direction:column; gap:10px}
.seg{display:flex; background:var(--surface2); border-radius:999px; padding:3px; gap:2px}
.seg button{flex:1; min-height:42px; border:0; border-radius:999px; background:transparent; color:var(--fg); font-size:14px; font-weight:600; padding:0 14px; cursor:pointer}
.seg button[aria-selected="true"]{background:var(--accent); color:var(--accent-fg)}
.dates{display:flex; flex-direction:column; gap:6px}
.dates-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.month{font-weight:600; font-size:15px}
.nav{display:flex; gap:6px}
.nav button{min-width:44px; min-height:36px; border:0; border-radius:10px; background:var(--surface2); color:var(--fg); font-size:16px; font-weight:600; cursor:pointer; padding:0 12px}
.nav button.today{background:var(--accent); color:var(--accent-fg); font-size:13.5px}
.week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.day{min-height:56px; border:0; border-radius:14px; background:transparent; color:var(--fg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; padding:0}
.day .w{font-size:12px; color:var(--muted)}
.day .n{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums}
.day.we .w{color:var(--danger)}
.day.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.day.sel{background:var(--accent); color:var(--accent-fg); box-shadow:none}
.day.sel .w{color:var(--accent-fg); opacity:.85}
@media (min-width:900px){
  .hdr{flex-direction:row; align-items:center; justify-content:space-between; gap:20px}
  .seg{width:380px; flex:none}
  .dates{width:480px; flex:none}
  .day{min-height:48px}
}

/* График и панель */
.main{flex:1; min-height:0; display:flex; gap:14px}
.calwrap{flex:1; min-width:0; display:flex; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.cal{flex:1; min-width:0; overflow:auto; overscroll-behavior:contain; position:relative}
.head,.body{display:grid; grid-template-columns:var(--tw) repeat(var(--n),minmax(0,1fr))}
.head{position:sticky; top:0; z-index:4; background:var(--surface); border-bottom:1px solid var(--line)}
.mh{display:flex; align-items:center; gap:8px; padding:8px; min-width:0; border-left:1px solid var(--line); font-weight:600}
.mh .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.av{width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--mc-bg); color:var(--mc-ac); border:2px solid var(--mc-ac)}
.body{position:relative; height:calc(var(--hh)*var(--hrs,10))}
.times{position:relative}
.times span{position:absolute; right:6px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; transform:translateY(3px)}
.col{position:relative; border-left:1px solid var(--line); cursor:pointer;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(var(--line2) 1px,transparent 1px);
  background-size:100% var(--hh),100% calc(var(--hh)/2)}
.blk{position:absolute; left:3px; right:3px; z-index:1; display:block; overflow:hidden; text-align:left; cursor:pointer;
  border:0; border-left:4px solid var(--mc-ac); border-radius:8px; background:var(--mc-bg); color:var(--fg);
  padding:3px 8px; font-size:13px; line-height:1.3}
.blk.on{outline:2.5px solid var(--accent); outline-offset:-1px}
.blk .bl{display:block; min-width:0}
.blk .bn{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk .bs{display:block; opacity:.78; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk.c{display:flex; align-items:center; padding-block:0; font-size:12.5px}
.blk.c .bl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk.c .bn,.blk.c .bs{display:inline}
.blk.c .bs::before{content:" · "}
.blocked{position:absolute; left:3px; right:3px; z-index:0; pointer-events:none; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px;
  border-radius:8px; color:var(--muted); font-size:12.5px;
  background:repeating-linear-gradient(135deg,var(--hatch1) 0 8px,var(--hatch2) 8px 12px)}
.selslot{position:absolute; left:3px; right:3px; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:center; padding:2px 4px;
  border:2.5px dashed var(--accent); border-radius:8px; background:var(--surface); color:var(--accent); font-size:13px; font-weight:700; text-align:center}
.now{position:absolute; left:calc(var(--tw) - 5px); right:0; height:2px; z-index:3; pointer-events:none; background:var(--danger)}
.now::before{content:""; position:absolute; left:0; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--danger)}

.panel{overflow-y:auto; background:var(--surface); color:var(--fg)}
.panel h2{margin:0; font-size:20px; font-weight:700}
.panel h3{margin:0 0 8px; font-size:14px; font-weight:600}
.ph{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.x{min-width:44px; min-height:40px; border:0; border-radius:12px; background:var(--surface2); color:var(--fg); font-size:16px; cursor:pointer}
.chip{display:inline-block; max-width:100%; padding:7px 14px; border-radius:999px; background:var(--mc-bg); color:var(--fg); font-weight:600; font-size:13.5px; border:1.5px solid var(--mc-ac); margin-bottom:16px}
.sec{margin-bottom:18px}
.hint{margin:0 0 8px; color:var(--muted); font-size:13px}
.field{display:block; width:100%; min-height:48px; padding:0 14px; border:2px solid var(--accent); border-radius:12px; background:var(--surface); color:var(--fg); font-size:16px}
.list{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.cli{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:52px; padding:8px 14px; border:0; border-radius:12px; background:var(--surface2); color:var(--fg); font-size:15px; text-align:left; cursor:pointer}
.cli .ph2{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; white-space:nowrap}
.cli .cn{min-width:0; font-weight:600}
.cli.picked{background:var(--accent-soft); cursor:default}
.cli.picked .sub{display:block; color:var(--muted); font-size:12.5px; font-weight:400; margin-top:1px}
.btn{min-height:46px; padding:0 16px; border-radius:12px; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent); font-size:14.5px; font-weight:600; cursor:pointer}
.btn.fill{background:var(--accent); color:var(--accent-fg)}
.btn.danger{border-color:var(--danger); color:var(--danger)}
.btn.danger.fill{background:var(--danger); color:#fff}
.btn.dashed{border-style:dashed; width:100%}
.row{display:flex; gap:8px; flex-wrap:wrap}
.row .btn{flex:1}
.err{margin:6px 0 0; color:var(--danger); font-size:13px}
.form{display:flex; flex-direction:column; gap:8px}
.form label{font-size:13px; color:var(--muted)}
.svcs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.svc{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-height:66px; padding:10px 14px; border:1.5px solid var(--accent); border-radius:14px; background:var(--surface); color:var(--fg); text-align:left; cursor:pointer}
.svc b{font-weight:700; font-size:14.5px}
.svc small{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
.svc:active{background:var(--accent); color:var(--accent-fg)}
.svc:active small{color:inherit}
@media (hover:hover){ .svc:hover{background:var(--accent-soft)} .cli:not(.picked):hover{background:var(--accent-soft)} }
.svc[aria-disabled="true"]{opacity:.45; border-style:dashed; cursor:not-allowed}
.dl{margin:0 0 18px; display:grid; grid-template-columns:auto 1fr; gap:8px 14px}
.dl dt{color:var(--muted)}
.dl dd{margin:0; font-weight:600; min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums}
.empty{padding:6px 2px; color:var(--muted)}
.empty .et{margin:0 0 6px; font-size:18px; font-weight:700; color:var(--fg)}
.empty p{margin:0 0 10px; max-width:34ch}

/* Нижняя панель мастеров */
.ftr{display:flex; flex-direction:column; gap:6px}
.ftr-note{font-size:12px; color:var(--muted)}
.mbar{display:flex; gap:6px}
.mbtn{flex:1; min-width:0; min-height:44px; padding:0 6px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); font-size:13.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mbtn.on{background:var(--mc-bg); border-color:var(--mc-ac); color:var(--fg); font-weight:700}

.backdrop{position:fixed; inset:0; z-index:20; background:rgba(10,14,20,.5); opacity:0; pointer-events:none; transition:opacity .2s}
.backdrop.on{opacity:1; pointer-events:auto}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom,0px)); z-index:40; display:flex; align-items:center; gap:14px;
  max-width:calc(100% - 32px); padding:12px 16px; border-radius:14px; background:var(--fg); color:var(--bg); font-size:14px; box-shadow:0 6px 24px var(--shadow)}
.toast button{border:0; background:transparent; color:inherit; font-weight:700; text-decoration:underline; font-size:14px; cursor:pointer; min-height:32px; padding:0 4px}

/* Телефон: панель выезжает справа */
@media (max-width:899px){
  .main{position:relative}
  .panel{position:fixed; top:0; right:0; bottom:0; z-index:21; width:min(92vw,420px);
    padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    padding-left:16px; padding-right:calc(16px + env(safe-area-inset-right,0px));
    border-radius:22px 0 0 22px; box-shadow:-8px 0 28px var(--shadow);
    transform:translateX(105%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s}
  .panel.open{transform:none; visibility:visible; transition:transform .22s ease, visibility 0s}
}
@media (min-width:900px){
  .panel{flex:none; width:380px; padding:18px; border:1px solid var(--line); border-radius:16px}
  .backdrop{display:none}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.svc b{overflow-wrap:anywhere}
.svc.grp{background:var(--accent-soft)}
.svc.grp small{color:var(--fg); opacity:.75}
.cart{display:flex; flex-direction:column; gap:6px; margin-bottom:12px; padding:10px; border:1.5px solid var(--line); border-radius:14px; background:var(--surface)}
.crow{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:600}
.crow small{color:var(--muted); font-weight:400}
.crow .btn{min-height:40px; min-width:40px; padding:0}
.cart .go{min-height:48px}
.crumb{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.crumb .btn{min-height:40px; padding:0 14px; flex:none}
.crumb span{min-width:0; color:var(--muted); font-size:13px; overflow-wrap:anywhere}
.field.soft{border-color:var(--line); border-width:1.5px; font-size:15px}
.field.soft:focus{border-color:var(--accent)}
.blk .cm{position:absolute; top:2px; right:6px; font-size:12px; opacity:.7}
@media (prefers-reduced-motion:reduce){
  .panel,.panel.open,.backdrop{transition:none}
}

.anyov{position:absolute; left:3px; right:3px; z-index:0; pointer-events:none; border-radius:8px; display:flex; align-items:flex-end; justify-content:flex-end; padding:3px 8px;
  background:repeating-linear-gradient(135deg,rgba(90,90,90,.16) 0 6px,rgba(90,90,90,.04) 6px 12px); border:1px dashed rgba(90,90,90,.35); font-size:11.5px; color:var(--muted)}
.anyov.full{background:repeating-linear-gradient(135deg,rgba(60,60,60,.34) 0 6px,rgba(60,60,60,.12) 6px 12px); border-style:solid; color:var(--fg)}
.anychip{position:absolute; left:6px; right:6px; z-index:2; height:24px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; border:1.5px dashed var(--accent); border-radius:8px; background:var(--surface); color:var(--fg); font-size:12px; padding:0 8px; cursor:pointer}
.anychip.on{outline:2.5px solid var(--accent); outline-offset:-1px}
.mAny{--mc-bg:#E4E4E4; --mc-ac:#555}
.chip.mAny{background:repeating-linear-gradient(135deg,#dcdcdc 0 6px,#ececec 6px 12px)}
.anytog{width:100%; min-height:44px; margin:-4px 0 12px; border-style:dashed}
.anytog[aria-pressed="true"]{background:var(--surface2)}

.mbar{overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.mbar::-webkit-scrollbar{display:none}
.mbtn{flex:1 0 auto !important; padding:0 16px !important; text-overflow:clip !important}
#toast[hidden]{display:none !important}
.brandbar{flex:none; display:flex; align-items:center; gap:14px; padding:8px 16px; border-radius:14px}
.brandbar .logo{width:44px; height:44px; flex:none}
.brandbar .t{min-width:0; line-height:1.05}
.brandbar .t b{display:block; font-family:"Montserrat","Golos Text",sans-serif; font-weight:800; font-size:clamp(15px,4.6vw,22px); letter-spacing:.02em; text-transform:uppercase; white-space:nowrap}
.brandbar .t small{display:block; margin-top:3px; font-family:"Golos Text",sans-serif; font-size:12.5px; opacity:.9; white-space:nowrap}
.brandbar .pills{margin-left:auto; display:flex; gap:8px}
.brandbar .pill{display:flex; align-items:baseline; gap:6px; padding:6px 12px; border-radius:12px; background:#fff; color:#1D1F22; white-space:nowrap}
.brandbar .pill b{font-family:"Montserrat",sans-serif; font-weight:800; font-size:20px}
.brandbar .pill span{font-size:11px; font-weight:600; line-height:1.05; text-align:left}
@media (max-width:899px){ .brandbar .pills{display:none} .brandbar{padding:6px 12px} .brandbar .logo{width:36px;height:36px} }

:root:root:root{ --bg:#EBEBEB; --surface:#FFFFFF; --surface2:#DEDEDE; --line:#D2D2D2; --line2:#ECECEC; --fg:#000000; --muted:#5A5A5A;
  --accent:#CB494E; --accent-fg:#fff; --accent-soft:#F8E4E5; --danger:#B3261E; --hatch1:#EEE; --hatch2:#DDD;
  --m0-bg:#DCEFF1; --m0-ac:#2A7F88; --m1-bg:#E9E3F6; --m1-ac:#6B4FB0; --m2-bg:#DFE7F7; --m2-ac:#3F63B8; --m3-bg:#F8EDCF; --m3-ac:#9C6C12; --m4-bg:#E0F1E0; --m4-ac:#3C8A47; color-scheme:light }
.brandbar{background:transparent; color:#000; padding:2px 4px}
.brandbar .logo{color:#CB494E}
.brandbar .t b{color:#000}
.seg{background:#DEDEDE}
.seg button[aria-selected="true"]{background:#000; color:#fff}
.day.sel{background:#000; color:#fff}
.day.today{box-shadow:inset 0 0 0 1.5px #000}
.nav button.today{background:#000}
.panel .btn.fill,.svc{border-color:#000}
.panel .btn.fill{background:#CB494E; border-color:#CB494E}
.svc.grp{background:#EBEBEB}


.body{grid-template-columns:var(--tw) minmax(calc(var(--L)*112px),1fr) !important}
.times{position:sticky; left:0; z-index:3; background:var(--surface)}
.lane{position:absolute; top:0; bottom:0; border-left:1px solid var(--line)}
.lane:first-child{border-left:0}
.blk.any{background:#DADADA; border-left-color:#4A4A4A}
.blk .bm{display:block; font-size:11.5px; font-weight:600; color:var(--mc-ac)}
.who{display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 16px}
.wbtn{min-height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--mc-ac); background:var(--surface); color:var(--fg); font-size:13.5px; cursor:pointer}
.wbtn.on{background:var(--mc-bg); font-weight:700; outline:2px solid var(--mc-ac); outline-offset:1px}
.sh{flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; padding:0 14px; border-radius:14px; border:1.5px solid var(--mc-ac); background:var(--mc-bg); color:var(--fg)}
.sh b{font-size:13.5px}
.sh small{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.sh.off{background:var(--surface); border-color:var(--line); color:var(--muted)}

:root{ --hh:96px }
@media (min-width:900px){ :root{ --hh:146px } }
.app{gap:6px}
body{padding-block:6px}
.brandbar{padding:0 4px; gap:10px; min-height:0}
.brandbar .logo{width:30px; height:30px}
.brandbar .t b{font-size:15px}
.brandbar .t small{display:none}
.hdr{gap:6px !important}
.salonlbl{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; border:0; border-radius:999px; background:#000; color:#fff; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap}
.salonlbl i{font-style:normal; opacity:.6; font-size:13px}
.dates{flex-direction:row !important; align-items:center; gap:10px !important}
.dates-top{gap:8px}
.month{font-size:13px; white-space:nowrap}
.nav button{min-width:36px; min-height:30px; font-size:14px; padding:0 8px}
.nav button.today{font-size:12px}
.week{flex:1; gap:2px}
.day{min-height:36px !important; border-radius:10px}
.day .w{font-size:10px}
.day .n{font-size:14px}
@media (min-width:900px){
  .hdr{flex-direction:row !important; align-items:center}
  .dates{flex:1 !important; width:auto !important; justify-content:flex-end}
  .week{flex:0 1 380px}
}
@media (max-width:899px){
  :root{ --hh:138px }
  .hdr{display:grid !important; grid-template-columns:auto 1fr; align-items:center}
  .dates{display:contents !important}
  .dates-top{justify-content:flex-end}
  .month{display:none}
  .week{grid-column:1/-1; flex:none}
  .brandbar .mo{margin-left:auto; font-size:13px; font-weight:600}
}
@media (min-width:900px){ .brandbar .mo{display:none} }
.blk .bt{display:block; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.blk .bs{opacity:.9}
.blk{padding:4px 8px}

.col{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(#DCDCDC 1px,transparent 1px),linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) !important;
  background-size:100% var(--hh),100% calc(var(--hh)/2),100% calc(var(--hh)/4) !important}
.times span.q{font-size:10px; opacity:.65}
.times span.q:nth-of-type(4n+3){opacity:.8}

/* Вход и служебное */
.login{min-height:100%; display:grid; place-items:center; padding:20px 0}
.login[hidden],.app[hidden]{display:none !important}
.login form{width:100%; max-width:380px; background:var(--surface); border-radius:20px; padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.login .lg{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.login .lg svg{width:40px; height:40px; color:#CB494E}
.login .lg b{font-family:"Montserrat","Golos Text",sans-serif; font-weight:800; font-size:18px; letter-spacing:.02em; text-transform:uppercase}
.login label{font-size:13px; color:var(--muted); margin-top:4px}
.login input{min-height:48px; border-radius:12px; border:1.5px solid var(--line); padding:0 14px; font-size:16px; background:#fff; color:var(--fg)}
.login button{min-height:50px; margin-top:12px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-weight:700; font-size:16px; cursor:pointer}
.login button[disabled]{opacity:.6}
.login .err{margin:4px 0 0; color:var(--danger); font-size:14px}
.ftr-note .me{margin-left:6px}
.ftr-note .out{border:0; background:transparent; text-decoration:underline; text-underline-offset:3px; color:var(--muted); font-size:inherit; cursor:pointer; padding:4px 2px}
.blk.rb{box-shadow:inset 0 0 0 2px var(--danger)}
.blk .rbm{position:absolute; top:2px; right:4px; background:var(--danger); color:#fff; border-radius:8px; font-size:10.5px; font-weight:700; line-height:16px; padding:0 6px}
.rbnote{margin:0 0 12px; padding:10px 12px; border-radius:12px; background:#FBEAE8; color:var(--danger); font-weight:600}
.loadmsg{padding:40px 16px; text-align:center; color:var(--muted)}

/* Вкладки и экраны «График», «Перезвонить» */
.app [hidden]{display:none !important}
.tabs{flex:none}
.tabs .cnt{display:inline-block; min-width:18px; padding:0 5px; margin-left:6px; border-radius:9px; background:var(--accent); color:#fff; font-size:11.5px; line-height:18px}
.ftr.slim .mbar{display:none}
#sv,#cb{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px}
.sb{min-height:44px; padding:0 18px; border-radius:14px; border:1.5px solid #000; background:var(--surface); color:var(--fg); font-weight:600; font-size:14.5px; cursor:pointer}
.sb.fill{background:var(--accent); border-color:var(--accent); color:#fff}
.sb.dark{background:#000; color:#fff}
.sb.danger{border-color:var(--danger); color:var(--danger)}
.sb.ghost{border-color:transparent; background:transparent; text-decoration:underline; text-underline-offset:3px}
.sb.sm{min-height:40px; padding:0 14px; font-size:13.5px}
.sb[disabled]{opacity:.45; cursor:default}
.sv-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.sv-sp{flex:1}
.sv-nav{display:flex; align-items:center; gap:4px}
.sv-nav button{min-width:40px; min-height:40px; border:0; border-radius:12px; background:var(--surface); font-size:18px; cursor:pointer}
.sv-range{min-width:150px; text-align:center; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.sv-wrap{background:var(--surface); border-radius:16px; overflow-x:auto; flex:none}
.sv-grid{display:grid; grid-template-columns:112px repeat(7,minmax(50px,1fr)); min-width:470px}
.sv-grid>*{border-bottom:1px solid var(--line2)}
.sv-corner{background:var(--surface)}
.sv-hd{padding:8px 2px; text-align:center; font-size:12px; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:2px}
.sv-hd b{font-size:15px; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:14px; font-variant-numeric:tabular-nums}
.sv-hd.today b{background:#000; color:#fff}
.sv-hd.we span{color:var(--danger)}
.sv-who{position:sticky; left:0; z-index:2; background:var(--surface); display:flex; flex-direction:column; justify-content:center; gap:1px; padding:6px 8px 6px 10px; border:0; border-bottom:1px solid var(--line2); border-right:1px solid var(--line2); text-align:left; cursor:pointer; min-height:64px; color:var(--fg)}
.sv-who b{display:flex; align-items:center; gap:6px; font-size:14px; white-space:nowrap}
.sv-who b:before{content:""; width:9px; height:9px; border-radius:50%; background:var(--mc-ac); flex:none}
.sv-who small{color:var(--muted); font-size:12px; padding-left:15px}
.sv-who:disabled{cursor:default}
.sv-c{position:relative; padding:4px 3px; display:flex}
.sv-cell{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:54px; border-radius:10px; border:0; background:transparent; cursor:pointer; font-variant-numeric:tabular-nums; position:relative; padding:0; color:var(--fg)}
.sv-cell.work{background:var(--mc-bg); box-shadow:inset 0 0 0 1.5px var(--mc-ac)}
.sv-cell .t{font-weight:700; font-size:13.5px; white-space:nowrap}
.sv-cell .t2{font-size:11px; color:var(--muted)}
.sv-cell.off{color:#9A9A9A}
.sv-cell.empty{box-shadow:inset 0 0 0 1.5px var(--line); background:repeating-linear-gradient(135deg,#fff 0 6px,#F4F4F4 6px 12px); color:#9A9A9A}
.sv-cell:disabled{cursor:default}
.sv-cell .ov{position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:#000}
.sv-cell .to{position:absolute; left:4px; right:4px; bottom:3px; height:11px; border-radius:3px; background:repeating-linear-gradient(135deg,#7A7A7A 0 3px,#B5B5B5 3px 6px); color:#fff; font-size:9px; line-height:11px; text-align:center; overflow:hidden; white-space:nowrap}
.sv-cell .fl{position:absolute; top:-3px; left:-1px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center}
.sv-sum{padding:8px 2px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; border-bottom:0; background:#F6F6F6}
.sv-sum.low{color:var(--danger)}
.sv-sum.lbl{position:sticky; left:0; z-index:2; text-align:left; padding-left:10px; font-weight:600; font-size:12.5px; color:var(--muted); border-right:1px solid var(--line2)}
.sv-legend{display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:12.5px}
.sv-legend span{display:inline-flex; align-items:center; gap:6px}
.sv-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; background:#000}
.sv-legend i.h{width:16px; border-radius:3px; background:repeating-linear-gradient(135deg,#7A7A7A 0 3px,#B5B5B5 3px 6px)}
.sv-legend i.f{background:var(--danger)}
.sv-hint{margin:0; padding:10px 14px; border-radius:12px; background:var(--surface); color:var(--muted)}
.sv-add{display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:var(--muted); font-size:13.5px}
.sv-add select{min-height:40px; border-radius:10px; border:1.5px solid var(--line); padding:0 10px; background:#fff; font-size:15px}
.sx-bg{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50; display:flex; align-items:flex-end; justify-content:center}
.sx{width:100%; max-width:520px; max-height:90%; overflow-y:auto; background:var(--surface); border-radius:22px 22px 0 0; padding:18px max(18px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){ .sx-bg{align-items:center} .sx{border-radius:22px} }
.sx h2{margin:0; font-size:20px}
.sx h3{margin:18px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.sx-sub{margin:2px 0 12px; color:var(--muted)}
.sx-state{display:inline-block; padding:5px 12px; border-radius:999px; background:var(--bg); font-size:13px; font-weight:600; margin-bottom:12px}
.sx-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.sx-row>*{flex:1 1 130px; min-width:0}
.sx-fld{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted)}
.sx-fld select,.sx-fld input{min-height:46px; border-radius:12px; border:1.5px solid var(--line); background:#fff; padding:0 12px; color:var(--fg); font-size:16px}
.sx-acts{display:flex; gap:8px; flex-wrap:wrap}
.sx-acts .sb{flex:1 1 140px}
.sx-seg{display:flex; background:var(--surface2); border-radius:999px; padding:3px; gap:2px; margin-bottom:14px}
.sx-seg button{flex:1; min-height:40px; border:0; border-radius:999px; background:transparent; font-weight:600; cursor:pointer; color:var(--fg)}
.sx-seg button[aria-selected="true"]{background:#000; color:#fff}
.sx-days{display:flex; gap:6px; margin-bottom:12px}
.sx-days button{flex:1; min-height:46px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-weight:600; cursor:pointer; color:var(--fg)}
.sx-days button[aria-pressed="true"]{background:#000; color:#fff; border-color:#000}
.sx-step{display:flex; align-items:center; gap:10px}
.sx-step b{min-width:26px; text-align:center; font-size:18px}
.sx-step button{width:44px; height:44px; border-radius:12px; border:1.5px solid #000; background:#fff; font-size:20px; cursor:pointer}
.sx-to{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:var(--bg); margin-bottom:6px}
.sx-to span{flex:1}
.sx-to button{border:0; background:transparent; font-size:20px; width:36px; height:36px; cursor:pointer}
.sx-warn{background:#FBEAE8; border-radius:14px; padding:12px 14px; margin:12px 0}
.sx-warn ul{margin:6px 0 0; padding-left:18px}
.sx-chk{display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer}
.sx-chk input{width:22px; height:22px; accent-color:#000}
.sx-info{padding:10px 14px; border-radius:12px; background:var(--bg); margin:8px 0 14px}
.cb-h{margin:4px 0 0; font-size:20px}
.cb-day{margin:10px 0 0; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.cb-empty{margin:0; padding:24px 14px; text-align:center; color:var(--muted); background:var(--surface); border-radius:16px}
.cb-card{display:flex; flex-wrap:wrap; align-items:center; gap:10px; background:var(--surface); border-radius:16px; padding:12px 14px; border-left:4px solid var(--danger)}
.cb-main{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px}
.cb-tel{color:var(--fg); font-weight:600; font-size:16px}
.cb-sub{color:var(--muted); font-size:13px}
.cb-acts{display:flex; gap:8px; flex:0 0 auto}
.tabs{width:100%; max-width:560px}
.tabs button{white-space:nowrap}

/* Загрузка клиентов */
.imp-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--line, #e3e3e3)}
.imp-row small{display:block; color:var(--muted); font-size:12px; font-weight:400}
.imp-row b{white-space:nowrap}
.imp-note{margin:10px 0 0; font-size:13px; color:var(--muted)}
.imp-err{margin:10px 0 0; color:var(--danger); font-weight:600}
.imp-list{max-height:180px; overflow-y:auto; font-size:13px; border:1px solid var(--line, #e3e3e3); border-radius:12px; padding:6px 10px}
.imp-list div{padding:5px 0; border-bottom:1px solid var(--line, #eee)}
.imp-list small{display:block; color:var(--muted)}
#impf{width:100%}

/* Сотрудники */
.usr-list{border:1px solid var(--line, #e3e3e3); border-radius:14px; padding:2px 10px}
.usr-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 0; border-bottom:1px solid var(--line, #eee)}
.usr-row:last-child{border-bottom:0}
.usr-row>span{flex:1 1 140px; min-width:0}
.usr-row small{display:block; color:var(--muted); font-size:12px}
.usr-row.off{opacity:.55}
.usr-row .sb{min-height:38px; padding:0 12px; font-size:13px}

/* Глаз на поле пароля */
.pwbox{position:relative; display:flex}
.pwbox input{flex:1; padding-right:52px}
.login .pwbox .eye{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; min-height:44px; height:44px; margin:0; padding:0; background:transparent; color:var(--muted); border-radius:12px; display:grid; place-items:center}
.eye .slash{display:none}
.eye[aria-pressed="true"] .slash{display:block}