/* === extracted from index.html on 20260502-232119 === */
/* === Маркер: AUDIT_REFACTOR_EXTRACT_CSS === */
/* ─── Block #1 (был на строке ~16, 103954 chars) ─── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#F2F4FA;--wh:#fff;--b1:#E4E8F4;--b2:#CDD3EA;
--t1:#1B1E30;--t2:#4B5280;--t3:#9099BB;
--v:#5A5FFF;--hac:#2563EB;--v2:#7C3AED;
--grn:#11C98A;--amb:#F59F1C;--gry:#9BAFCC;--red:#F43F5E;
--sh:0 2px 12px rgba(0,0,0,.08);--sh2:0 8px 32px rgba(0,0,0,.14);--sh3:0 20px 60px rgba(0,0,0,.18);
}
html,body{height:100%;overflow:hidden}body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--t1);height:100vh;display:flex;flex-direction:column;overflow:hidden}
/* AUTH */
.auth-ov{position:fixed;inset:0;z-index:1400;background:rgba(20,22,45,.45);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
.auth-ov.on{display:flex;animation:fi .2s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
.auth-card{position:relative;background:#ffffff;border:1.5px solid #E8EAF2;border-radius:22px;padding:32px;width:420px;max-width:94vw;box-shadow:0 24px 60px rgba(15,12,41,.18);animation:ci .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes ci{from{transform:scale(.92) translateY(10px);opacity:0}to{transform:none;opacity:1}}
.auth-x{position:absolute;top:13px;right:13px;width:29px;height:29px;border-radius:50%;background:#F2F4FA;border:none;color:#6B7280;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.auth-x:hover{background:#E5E7EB;color:#1F2937}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:9px;margin:-32px -32px 22px -32px;padding:20px 32px;background:#fff;border-radius:22px 22px 0 0;}
.auth-lsq{display:none}
.auth-lnm{font-family:'Manrope',sans-serif;font-size:19px;font-weight:800;color:#1F2937;letter-spacing:-.5px}
.auth-tabs{display:flex;background:#F2F4FA;border-radius:10px;padding:3px;margin-bottom:19px;gap:3px;border:1px solid #E8EAF2}
.auth-tab{flex:1;padding:8px;text-align:center;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:#6B7280;transition:all .18s}
.auth-tab.on{background:#ffffff;color:#1F2937;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.auth-form{display:none}.auth-form.on{display:block}
.otp-digit{width:42px;height:52px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:22px;font-weight:800;text-align:center;outline:none;transition:all .15s;font-family:'Manrope',sans-serif}
.otp-digit:focus{border-color:#7C8FFF;background:rgba(124,143,255,.15);box-shadow:0 0 0 3px rgba(124,143,255,.2)}
.otp-digit.filled{border-color:#7C8FFF;background:rgba(124,143,255,.12)}
.otp-digit.error{border-color:#F43F5E;background:rgba(244,63,94,.1);animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.al{font-size:10px;font-weight:700;color:rgba(255,255,255,.44);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;display:block}
.ai{width:100%;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 12px;color:#1a1a1a;font-size:13px;font-family:'Inter',sans-serif;margin-bottom:11px;transition:all .18s}
.ai::placeholder{color:rgba(255,255,255,.28)}.ai:focus{outline:none;border-color:rgba(90,95,255,.7);background:rgba(255,255,255,.12)}
.ai option{background:#1e1b4b}
.role-row{display:flex;gap:7px;margin-bottom:12px}
.role-btn{flex:1;padding:10px;border-radius:10px;border:2px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:rgba(255,255,255,.58);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .18s}
.role-btn.on{border-color:var(--v);background:rgba(90,95,255,.22);color:#fff}
.auth-btn{width:100%;padding:12px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;margin-top:2px;box-shadow:0 4px 18px rgba(90,95,255,.4)}
.auth-btn:hover{transform:translateY(-1px);box-shadow:0 6px 26px rgba(90,95,255,.52)}
.auth-sw{text-align:center;margin-top:12px;font-size:12px;color:#6B7280}
.auth-sw a{color:var(--v);cursor:pointer;text-decoration:underline;font-weight:600}
.auth-err{background:#FFF0F2;border:1px solid #FFCDD5;color:#D0192B;padding:8px 11px;border-radius:8px;font-size:12px;margin-bottom:11px;display:none}
.auth-err.on{display:block}
.auth-demo{margin-top:12px;padding:10px 11px;background:#F8F9FC;border:1px solid #E8EAF2;border-radius:9px;font-size:11px;color:#6B7280;line-height:1.75}
.auth-demo b{color:#1F2937}
/* TOPBAR */
.top{height:85px;background:var(--wh);border-bottom:1.5px solid var(--b1);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.05);position:sticky;top:0;z-index:1000;overflow:visible}
.logo{display:flex;align-items:center;gap:7px;font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:var(--t1);cursor:pointer;text-decoration:none;height:100%}
.logo img{height:calc(85px * 0.9);width:auto;object-fit:contain;display:block;flex-shrink:0}
.logo-sq{display:flex;align-items:center}
.chips{display:flex;gap:7px;margin-left:4px}
.chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:15px;font-weight:600}
.chip.g{background:#E6FBF3;color:#0A9B6A;border:1.5px solid #B0EDD9}
.chip.a{background:#FFF8EA;color:#C07A00;border:1.5px solid #FFD98A}
.cdot{width:7px;height:7px;border-radius:50%;animation:pd 1.8s infinite}
.chip.g .cdot{background:var(--grn)}.chip.a .cdot{background:var(--amb)}
@keyframes pd{0%,100%{opacity:1}50%{opacity:.3}}
.tnav{display:flex;gap:4px;margin-left:auto}
.tn{min-width:52px;height:52px;border-radius:11px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t3);font-family:'Inter',sans-serif;transition:color .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 8px;line-height:1}
.tn .tn-ic{font-size:22px;display:flex;align-items:center;justify-content:center;line-height:0}
.tn .tn-lb{font-size:10.5px;font-weight:700}
.tn:hover{background:transparent;color:var(--hac)}
.tn.on{background:transparent;color:var(--hac);box-shadow:none}
.login-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:11px;font-size:17px;font-weight:700;cursor:pointer;border:1.5px solid var(--b1);background:var(--wh);color:var(--t1);font-family:'Inter',sans-serif;transition:all .18s;margin-left:9px}
.login-btn:hover{background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;border-color:transparent}
.reg-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:11px;font-size:17px;font-weight:700;cursor:pointer;border:none;background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;font-family:'Inter',sans-serif;box-shadow:0 2px 10px rgba(90,95,255,.3);transition:all .18s;margin-left:4px}
.reg-btn:hover{transform:translateY(-1px)}
.user-btn{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:26px;background:var(--bg);border:1.5px solid var(--b1);cursor:pointer;transition:all .18s;margin-left:9px;position:relative}
.user-btn:hover{border-color:var(--v)}
.user-ava{width:68px;height:68px;border-radius:50%;object-fit:cover;display:block;background:var(--bg);color:transparent;border:2px solid var(--b1);flex-shrink:0}
/* ФИО в шапке переносим по строкам — иначе длинное имя растягивает кнопку профиля на пол-экрана */
.user-nm{font-size:17px;font-weight:700;color:var(--t1);max-width:210px;white-space:normal;line-height:1.22;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.user-rl{font-size:13px;color:var(--t3)}
/* LAYOUT */
.app-main{display:flex;flex:1;overflow:hidden;height:calc(100dvh - 85px);min-height:300px;max-height:calc(100dvh - 85px)}
/* MAP */
.map-wrap{flex:1;position:relative;overflow:hidden;min-width:200px;min-height:300px;touch-action:none}
#map{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:#e8ecf0;overflow:hidden;z-index:0}
.leaflet-container{background:#e8ecf0!important}
#ord-map .leaflet-container{cursor:url('data:image/svg+xml;utf8,') 4 28, crosshair !important}
#ord-map .leaflet-grab{cursor:url('data:image/svg+xml;utf8,') 4 28, crosshair !important}
.leaflet-control-attribution{background:rgba(255,255,255,.8)!important;font-size:9px!important}
.leaflet-div-icon{background:none!important;border:none!important}
.ctip{background:#fff!important;border:1.5px solid var(--b1)!important;border-radius:10px!important;font-family:'Inter',sans-serif!important;font-size:12px!important;padding:9px 13px!important;box-shadow:0 8px 32px rgba(0,0,0,.14)!important;white-space:normal!important;pointer-events:none}
/* ── Ценообразование ── */
.price-tab{padding:14px 16px}
.price-section{background:var(--wh);border:1.5px solid var(--b1);border-radius:13px;padding:14px;margin-bottom:10px}
.price-section-t{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.price-row label{font-size:12px;color:var(--t2);flex:1}
.price-row input,.price-row select{width:110px;padding:5px 9px;border:1.5px solid var(--b1);border-radius:8px;font-size:13px;font-weight:700;color:var(--t1);background:var(--bg);text-align:right}
.price-row input:focus,.price-row select:focus{border-color:var(--v);outline:none;background:#fff}
.price-extra-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--b1)}
.price-extra-row:last-child{border-bottom:none}
.price-extra-ic{width:28px;height:28px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.price-extra-nm{font-size:12px;color:var(--t1);flex:1}
.price-extra-val{width:90px;padding:4px 8px;border:1.5px solid var(--b1);border-radius:7px;font-size:12px;font-weight:700;color:var(--t1);background:var(--bg);text-align:right}
.params-badge{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);background:var(--v);color:#fff;font-size:8px;font-weight:800;padding:2px 6px;border-radius:7px;white-space:nowrap;z-index:7;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);pointer-events:none}
.price-calc-preview{background:linear-gradient(135deg,#EEF0FF,#F5F4FF);border:1.5px solid #C5C8FF;border-radius:12px;padding:14px;margin-top:10px}
.map-btns{position:absolute;left:11px;top:11px;z-index:30;display:flex;flex-direction:column;gap:5px}
.mb{width:46px;height:46px;border-radius:12px;background:var(--wh);border:1.5px solid var(--b1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:21px;box-shadow:var(--sh);transition:all .15s}
.mb:hover{background:var(--v);color:#fff;border-color:var(--v)}
.mb.on{background:var(--grn);color:#fff;border-color:var(--grn)}
/* Бургер-меню тулбара карты — скрыт на широких экранах, показывается ≤768px */
.mb-burger{display:none;font-weight:800;font-family:inherit;color:var(--v);font-size:16px;letter-spacing:0}
.mb-burger.on{background:var(--v);color:#fff;border-color:var(--v)}
.mb-collapsible{display:flex;flex-direction:column;gap:5px}
.map-leg{position:absolute;right:11px;bottom:calc(80px + env(safe-area-inset-bottom, 0px));z-index:30;background:var(--wh);border:1.5px solid var(--b1);border-radius:11px;padding:11px 13px;box-shadow:var(--sh)}
.ml-tit{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px}
.ml-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);margin-bottom:4px}
.ml-row:last-child{margin-bottom:0}
.ml-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* SIDEBAR */
.side{width:-moz-fit-content;width:fit-content;min-width:420px;max-width:470px;flex-shrink:0;background:var(--wh);border-left:1.5px solid var(--b1);display:flex;flex-direction:column;overflow:hidden;position:relative;height:100%;max-height:100%}
.sh{padding:13px 13px 0;flex-shrink:0;overflow:visible}
.sh-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sh-title{font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;color:var(--t1)}
.sh-badge{background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;padding:3px 11px;border-radius:20px;font-size:14px;font-weight:800;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.srch{position:relative;margin-bottom:8px}
.srch-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:12px;pointer-events:none}
.srch-in{width:100%;background:var(--bg);border:1.5px solid var(--b1);border-radius:9px;padding:7px 9px 7px 29px;color:var(--t1);font-size:12px;font-family:'Inter',sans-serif;transition:all .15s}
.srch-in:focus{outline:none;border-color:var(--v);background:#fff;box-shadow:0 0 0 3px rgba(90,95,255,.1)}
.srch-in::placeholder{color:var(--t3)}
.frow{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:9px;border-bottom:1.5px solid var(--b1);overflow-x:visible}
.frow::-webkit-scrollbar{display:none}
.fb{padding:5px 9px;border-radius:20px;font-size:13.6px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t2);font-family:'Inter',sans-serif;transition:color .15s}
.fb svg,.fb img{display:none}
.fb:hover{color:#2563EB}
.fb.on{background:transparent;color:#2563EB;font-weight:800}
.cnt{display:none}
.lst{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lst::-webkit-scrollbar{width:3px}
.lst::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
/* CARDS */
.card{padding:11px 13px;border-bottom:1.5px solid var(--b1);cursor:pointer;transition:background .12s}
@keyframes cdin{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
.card:hover{background:var(--bg)}
/* Выбранный уборщик больше не подсвечивается синей полосой слева и заливкой:
карточка и так открывается сразу, а метка выделения только рябила в ленте. */
.card.sel{background:transparent;border-left:none}
.card-top{display:flex;align-items:center;gap:9px}
.ava-w{position:relative;flex-shrink:0;margin-top:16px}
.timer-ring{display:none} /* кольцо обратного отсчёта убрано — остаётся только счётчик .timer-label */
.timer-ring circle{transition:stroke-dashoffset 1s linear;transform-origin:center;transform:rotate(-90deg)}
.timer-label{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--amb);color:#fff;font-size:8px;font-weight:700;padding:1px 4px;border-radius:6px;white-space:nowrap;z-index:4;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.busy-setter{background:var(--wh);border:1.5px solid var(--b1);border-radius:11px;padding:11px 12px;margin-bottom:8px}
.busy-setter-t{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.busy-presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
.bpreset{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--b1);background:var(--bg);color:var(--t2);transition:all .15s;font-family:'Inter',sans-serif}
.bpreset:hover{border-color:var(--amb);color:var(--amb)}
.bpreset.on{background:var(--amb);color:#fff;border-color:var(--amb)}
.busy-custom{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.busy-slider{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--b1);outline:none}
.busy-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--amb);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.busy-countdown{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,rgba(245,159,28,.08),rgba(244,63,94,.08));border:1.5px solid rgba(245,159,28,.25);border-radius:9px;padding:9px 12px}
.busy-cd-time{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:var(--amb);letter-spacing:-.5px}
.busy-cd-label{font-size:10px;color:var(--t3);margin-top:1px}
.busy-timer-block{background:linear-gradient(135deg,rgba(245,159,28,.08),rgba(244,63,94,.06));border:1.5px solid rgba(245,159,28,.3);border-radius:11px;padding:12px;margin-bottom:8px}
.busy-timer-block.active{background:linear-gradient(135deg,rgba(245,159,28,.13),rgba(244,63,94,.1));border-color:var(--amb)}
.btb-title{font-size:14.3px;font-weight:700;color:var(--t1);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.btb-presets{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.btb-preset{padding:4px 9px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--b2);background:var(--wh);color:var(--t2);transition:all .15s}
.btb-preset:hover{border-color:var(--amb);color:var(--amb)}
.btb-preset.on{background:var(--amb);color:#fff;border-color:var(--amb)}
.btb-custom{display:flex;gap:5px;align-items:center;margin-bottom:8px}
.btb-inp{width:60px;background:var(--bg);border:1.5px solid var(--b1);border-radius:8px;padding:5px 8px;font-size:12px;font-family:'Inter',sans-serif;color:var(--t1);text-align:center}
.btb-inp:focus{outline:none;border-color:var(--amb)}
.btb-progress{margin-top:6px}
.btb-bar-wrap{height:6px;background:var(--b1);border-radius:3px;overflow:hidden;margin-top:4px}
.btb-bar{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--amb),#F43F5E);transition:width 1s linear}
.ava{width:44px;height:44px;border-radius:11px;display:block;object-fit:cover;background:var(--bg);border:3px solid transparent;transition:border-color .2s,box-shadow .2s}
.ava.free{border-color:#11C98A;box-shadow:0 0 0 2px rgba(17,201,138,.2)}
.ava.busy{border-color:#F43F5E;box-shadow:0 0 0 2px rgba(244,63,94,.2)}
.ava.offline{border-color:#9BAFCC;box-shadow:0 0 0 2px rgba(155,175,204,.15)}
.ava-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2px solid var(--wh);background:var(--grn)}
.ava-dot.busy{background:var(--amb)}.ava-dot.offline{background:var(--gry)}
.vpin{position:absolute;top:-3px;left:-3px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#1DA1F2,#0D6EFD);border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.vpin svg{width:7px;height:7px}
.card-inf{flex:1;min-width:0}
.card-nm{font-weight:700;font-size:15px;color:var(--t1);white-space:nowrap;display:flex;align-items:center;gap:4px}
.card-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:4px}
.card-badges>span{margin-left:0!important}
.card-sp{font-size:13px;color:var(--t3);margin-top:3px}
.spill{padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700;text-transform:uppercase;flex-shrink:0}
.spill.free{background:#E6FBF3;color:#0A9B6A;border:1.5px solid #B0EDD9}
/* в списке уборщиков плашку «Своб.» не показываем: статус уже читается зелёной обводкой аватара и точкой */
.lst .spill.free{display:none}
.spill.busy{background:#FFF0F2;color:#D0192B;border:1.5px solid #FFCDD5}
.spill.offline{background:#F5F7FB;color:var(--t3);border:1.5px solid var(--b1)}
.card-meta{display:flex;align-items:center;gap:8px;margin-top:7px;padding-top:7px;border-top:1px solid var(--b1)}
.card-stars{font-size:14px;font-weight:700;color:#D97706}
.card-st{font-size:12px;color:var(--t3)}
.card-st b{color:var(--t2);font-weight:600}
.vbadge{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:7px;font-size:8px;font-weight:700;background:linear-gradient(135deg,#1DA1F2,#0D6EFD);color:#fff}
.vbadge svg{width:7px;height:7px}
.vbadge-lg{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;background:linear-gradient(135deg,#1DA1F2,#0D6EFD);color:#fff;box-shadow:0 2px 8px rgba(29,161,242,.3)}
.vbadge-lg svg{width:10px;height:10px}
/* DETAIL */
.det{position:fixed;top:85px;right:0;bottom:0;width:420px;min-height:0;z-index:950;background:var(--wh);display:block;overflow-y:auto;overflow-x:hidden;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,.12);border-left:1.5px solid var(--b1);-webkit-overflow-scrolling:touch}
.det.open{transform:translateX(0)}
.det-hero{position:relative;flex-shrink:0}
.det-cv{width:100%;height:70px;display:block}
.det-br{position:absolute;top:8px;left:13px;right:13px;display:flex;align-items:center;gap:6px;z-index:2}
/* Без backdrop-filter: размытие фона пересчитывается на каждый кадр прокрутки,
и карточка на телефоне двигалась рывками. Кнопка маленькая и тёмная —
разницы на глаз нет, если чуть уплотнить фон. */
.det-back{width:30px;height:30px;border-radius:50%;background:rgba(20,23,46,.68);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:16px;line-height:1;box-shadow:0 2px 10px rgba(20,23,46,.25);z-index:5}
.det-back:hover{background:rgba(20,23,46,.75)}
.det-bname{font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.det-ba{padding:0 13px 11px}
.det-aw{position:relative;margin-top:-33px;display:inline-block}
.det-ava{width:68px;height:68px;border-radius:16px;border:3px solid #fff;box-shadow:var(--sh);display:block;object-fit:cover;background:var(--bg)}
.det-sd{position:absolute;bottom:1px;right:1px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:var(--grn)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.04)}}
.det-sd.busy{background:var(--amb)}.det-sd.offline{background:var(--gry)}
.det-info{padding:0 13px 11px}
.det-name{font-family:'Manrope',sans-serif;font-size:18px;font-weight:800;color:var(--t1);letter-spacing:-.3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.det-spec{font-size:13px;color:var(--t3);margin:2px 0 6px}
.det-rating{display:flex;align-items:center;gap:6px;background:var(--bg);border:1.5px solid var(--b1);border-radius:9px;padding:7px 11px;margin-top:9px}
.det-rn{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:var(--t1)}
.det-rsep{width:1px;height:22px;background:var(--b2);margin:0 2px}
.det-rs{font-size:15px;color:#D97706}
.det-rc{font-size:12px;color:var(--t3);margin-top:1px}
.dt-tabs{display:flex;border-bottom:1.5px solid var(--b1);position:sticky;top:0;z-index:5;background:#FAFBFF}
.dt{flex:1;padding:9px 4px;text-align:center;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;color:var(--t3);border-bottom:2.5px solid transparent;transition:all .15s}
.dt.on{color:var(--v);border-bottom-color:var(--v);background:var(--wh)}
.det-body{padding:13px;background:var(--bg)}
.det-foot{position:sticky;bottom:0;z-index:5;background:var(--wh);border-top:1.5px solid var(--b1);padding:10px 13px;display:none}
.det-foot.on{display:block}
.det-body::-webkit-scrollbar{width:3px}
.det-body::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.sec{margin-bottom:14px}
.sec-t{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.sec-t::after{content:'';flex:1;height:1px;background:var(--b1)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.stat{background:var(--wh);border:1.5px solid var(--b1);border-radius:10px;padding:10px 11px}
.sv{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px}
.stat:nth-child(1) .sv{color:var(--v)}.stat:nth-child(2) .sv{color:#D97706}
.stat:nth-child(3) .sv{color:var(--grn)}.stat:nth-child(4) .sv{color:var(--v2);font-size:12px}
.sl{font-size:12px;color:var(--t3);margin-top:1px}
.crow{display:flex;align-items:center;gap:8px;background:var(--wh);border:1.5px solid var(--b1);border-radius:9px;padding:8px 11px;margin-bottom:6px;font-size:13px;color:var(--t1)}
.ci{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.arow{display:flex;gap:5px;margin-top:3px}
.vb{background:linear-gradient(135deg,rgba(29,161,242,.07),rgba(13,110,253,.07));border:1.5px solid rgba(29,161,242,.2);border-radius:10px;padding:10px 12px;margin-bottom:13px;display:flex;align-items:flex-start;gap:9px}
.vbicon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#1DA1F2,#0D6EFD);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.vbt strong{display:block;font-size:11px;font-weight:700;color:#0D6EFD;margin-bottom:2px}
.vbt p{font-size:10px;color:var(--t2);line-height:1.5}
.rev{background:var(--wh);border:1.5px solid var(--b1);border-radius:11px;padding:10px 11px;margin-bottom:6px;animation:cdin .22s ease both}
.rev-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.rev-ava{width:26px;height:26px;border-radius:7px;display:block;flex-shrink:0;object-fit:cover}
.rev-nm{font-size:13px;font-weight:700;color:var(--t1)}
.rev-st{font-size:12px;color:#D97706}
.rev-dt{font-size:11px;color:var(--t3);margin-left:auto}
.rev-tx{font-size:13px;color:var(--t2);line-height:1.5}
.rat-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.rat-n{font-size:11px;color:#D97706;font-weight:700;width:18px}
.rat-trk{flex:1;height:5px;border-radius:3px;background:var(--b1);overflow:hidden}
.rat-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#F59F1C,#F43F5E);transition:width .5s}
.rat-cnt{font-size:10px;color:var(--t3);width:16px;text-align:right}
/* VIDEO / WebRTC */
.cam-wrap{border-radius:12px;overflow:hidden;margin-bottom:9px;border:1.5px solid var(--b1)}
.cam-screen{width:100%;aspect-ratio:16/9;background:#0B1018;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.cam-off{display:flex;flex-direction:column;align-items:center;gap:7px}
.cam-off-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:20px}
.cam-off p{font-size:12px;font-weight:600;color:rgba(255,255,255,.42)}
.cam-off small{font-size:10px;color:rgba(255,255,255,.22)}
.cam-live{position:absolute;inset:0}
.cam-bg{position:absolute;inset:0;background:linear-gradient(155deg,#061008,#0C1F10,#060D08)}
.cam-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.6) 100%)}
.cam-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,240,192,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,192,.02) 1px,transparent 1px);background-size:24px 24px}
.cam-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,240,192,.7),transparent);animation:scan 2.5s linear infinite}
@keyframes scan{0%{top:0}100%{top:100%}}
.cam-o{position:absolute;border:1.5px solid rgba(0,240,192,.35);border-radius:3px}
.co1{width:58px;height:58px;animation:cmo1 4s ease-in-out infinite}
.co2{width:80px;height:32px;animation:cmo2 5.5s ease-in-out infinite;top:42%;left:28%}
.co3{width:34px;height:34px;border-radius:50%;border-color:rgba(90,95,255,.4);animation:cmo1 3.5s ease-in-out reverse infinite;top:60%;left:60%}
@keyframes cmo1{0%{left:17%;top:27%}50%{left:51%;top:51%}100%{left:17%;top:27%}}
@keyframes cmo2{0%{transform:none}50%{transform:translateX(30px)}100%{transform:none}}
.cam-hud{position:absolute;inset:0;padding:7px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.hud-t{display:flex;align-items:center;gap:5px}
.hud-b{display:flex;justify-content:space-between;align-items:flex-end}
.rec-pill{display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.65);border:1px solid rgba(244,63,94,.44);padding:3px 7px;border-radius:4px;font-size:9px;font-weight:800;color:#F43F5E;letter-spacing:.8px}
.rec-dot{width:5px;height:5px;border-radius:50%;background:#F43F5E;animation:blink .8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.1}}
.id-pill{background:rgba(0,0,0,.65);border:1px solid rgba(90,95,255,.4);padding:3px 7px;border-radius:4px;font-size:9px;font-weight:600;color:#8087FF}
.hud-co{font-size:9px;color:rgba(0,240,192,.6);font-family:monospace}
.hud-cl{font-size:9px;color:rgba(255,255,255,.32);font-family:monospace}
.cam-ctrl{padding:8px 11px;border-top:1.5px solid var(--b1);display:flex;align-items:center;gap:6px;background:#FAFBFF;flex-wrap:wrap}
.cam-ql{margin-left:auto;font-size:10px;color:var(--t3);display:flex;align-items:center;gap:4px}
.cam-qd{width:5px;height:5px;border-radius:50%;background:var(--grn);animation:pd 2s infinite}
.cam-inf{background:linear-gradient(135deg,rgba(90,95,255,.06),rgba(0,184,217,.06));border:1.5px solid rgba(90,95,255,.13);border-radius:9px;padding:10px 12px;font-size:11px;line-height:1.6;color:var(--t2)}
.cam-inf strong{display:block;margin-bottom:2px;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--v)}
.sinfo{background:var(--wh);border:1.5px solid var(--b1);border-radius:11px;padding:11px;margin-bottom:9px}
.sinfo-t{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.slive{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:9px;font-size:9px;font-weight:700;background:#E6FBF3;color:#0A9B6A}
.sld{width:5px;height:5px;border-radius:50%;background:var(--grn);animation:pd 1.5s infinite}
.ssg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:8px}
.ss{text-align:center;background:var(--bg);border-radius:7px;padding:7px 3px}
.ssv{font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;color:var(--v)}
.ssl{font-size:9px;color:var(--t3);margin-top:1px}
/* WebRTC video element */
video.webrtc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
.webrtc-status{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.6);color:#11C98A;font-size:9px;font-weight:700;padding:3px 7px;border-radius:9px;z-index:2;display:none}
.webrtc-status.on{display:block}
/* BUTTONS */
.btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;border:none;transition:all .18s;flex:1}
.btn-v{background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;box-shadow:0 3px 12px rgba(90,95,255,.28)}
.btn-v:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(90,95,255,.38)}
.btn-c{background:linear-gradient(135deg,#00B8D9,var(--v));color:#fff}
.btn-c:hover{transform:translateY(-1px)}
.btn-o{background:var(--wh);border:1.5px solid var(--b2);color:var(--t2)}
.btn-o:hover{background:var(--bg)}
.btn-g{background:linear-gradient(135deg,var(--grn),#00B8D9);color:#fff}
.btn-r{background:linear-gradient(135deg,var(--red),#F59F1C);color:#fff}
.btn-sm{padding:6px 11px;font-size:11px;border-radius:7px;flex:initial}
/* CABINET */
.cab-ov{position:fixed;inset:0;z-index:1100;background:rgba(15,12,41,.55);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center}
.cab-ov.on{display:flex}
.cabinet{width:50vw;min-width:min(520px,96vw);max-width:860px;height:90vh;max-height:90vh;background:var(--wh);border-radius:20px;display:block;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;animation:slr .24s cubic-bezier(.34,1.1,.64,1);box-shadow:0 24px 72px rgba(0,0,0,.35);-webkit-overflow-scrolling:touch}
@keyframes slr{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cab-head{padding:16px;border-bottom:1.5px solid var(--b1);flex-shrink:0;position:relative}
.cab-x{position:absolute;top:13px;right:13px;width:28px;height:28px;border-radius:7px;background:var(--bg);border:1.5px solid var(--b1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--t2);z-index:6}
.cab-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
.cab-ava-row{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.cab-photo-wrap{position:relative;flex-shrink:0;cursor:pointer}
.cab-photo{width:58px;height:58px;border-radius:15px;object-fit:cover;border:2px solid var(--b1);display:block;background:var(--bg)}
.cab-photo-btn{position:absolute;bottom:-3px;right:-3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--v2));border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:9px}
.cab-photo-inp{display:none}
.cab-nm{font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;color:var(--t1);letter-spacing:-.3px}
.cab-role{font-size:10px;color:var(--t3);margin-top:2px;display:flex;align-items:center;gap:4px}
.crb{padding:2px 6px;border-radius:7px;font-size:9px;font-weight:700;text-transform:uppercase}
.crb.client{background:#EEF2FF;color:var(--v)}.crb.cleaner{background:#E6FBF3;color:#0A9B6A}.crb.admin{background:#FFF3CD;color:#C07A00}
.cab-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.cab-stats-balance{background:linear-gradient(135deg,#E6FBF3,#F0FDF8);border:1.5px solid #B0EDD9;border-radius:12px;padding:12px 16px;margin-top:5px;display:flex;align-items:center;justify-content:space-between;gap:10px}.cab-stats-balance-info{display:flex;align-items:baseline;gap:5px}.cab-stats-balance-amt{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:#0A9B6A}.cab-stats-balance-lbl{font-size:11px;color:var(--t3);font-weight:600}.cab-stats-balance-btn{flex-shrink:0;padding:8px 16px;border-radius:9px;border:none;background:#0A9B6A;color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s;white-space:nowrap}.cab-stats-balance-btn:hover{opacity:.85}
.cstat{background:var(--bg);border-radius:8px;padding:7px;text-align:center}
.cstat-v{font-family:'Manrope',sans-serif;font-size:15px;font-weight:800;color:var(--v)}
.cstat-l{font-size:9px;color:var(--t3);margin-top:1px}
.cab-body{padding:13px 13px 8px;overscroll-behavior:contain}
.cab-body::-webkit-scrollbar{width:3px}
.cab-body::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.cab-foot{position:sticky;bottom:0;z-index:5;padding:12px 16px;border-top:1.5px solid var(--b1);background:var(--wh)}
.cab-sec{margin-bottom:14px}
.cab-sec-t{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:5px}
.cab-tabs{display:flex;gap:4px;padding:10px 14px 0;border-bottom:1.5px solid var(--b1);margin-bottom:0;position:sticky;top:0;z-index:5;background:var(--wh)}
#cabTabsSlot{flex-shrink:0}
.cab-tab{flex:1;padding:8px 4px;text-align:center;font-size:11px;font-weight:700;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all .15s;position:relative;user-select:none}
.cab-tab:hover{color:var(--t2)}
.cab-tab.on{color:var(--v);border-bottom-color:var(--v)}
.cab-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;background:var(--red);color:#fff;font-size:13px;font-weight:800;border-radius:9px;padding:1px 6px;margin-left:4px;vertical-align:middle}/* цифра была 8px и терялась рядом с подписью вкладки — приведена к размеру бейджа надёжности (13px/18px) */
.cab-tab-panel{display:none}.cab-tab-panel.on{display:block}
/* HERO-шапка кабинета уборщика (Доверительный синий) */
.cab-head.hero{background:linear-gradient(135deg,#2563EB,#1E40AF);border-bottom:none;padding:20px 18px}
.cab-head.hero .cab-x{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);color:#fff}
.cab-head.hero .cab-x:hover{background:#fff;color:#2563EB;border-color:#fff}
.cab-head.hero .cab-nm{color:#fff;font-size:23px}
.cab-head.hero .cab-role{color:rgba(255,255,255,.85);font-size:12px;margin-top:5px}
.cab-head.hero .crb.cleaner{background:rgba(255,255,255,.2);color:#fff;font-size:11px;padding:3px 10px}
.cab-head.hero #cabEmail{color:rgba(255,255,255,.82);font-size:12px}
.cab-head.hero .cab-photo{width:80px;height:80px;border-radius:18px;border-color:rgba(255,255,255,.4)}
.cab-head.hero .cab-photo-btn{background:#fff;color:#2563EB;width:24px;height:24px;font-size:11px}
.cab-head.hero .cab-ava-row{margin-bottom:0;gap:14px}
.cab-metrics{display:grid;grid-template-columns:repeat(3,1fr);background:var(--wh);border-bottom:1.5px solid var(--b1)}
.cab-metric{padding:18px 8px;text-align:center;position:relative}
.cab-metric+.cab-metric::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--b1)}
.cab-metric-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto 9px}
.cab-metric-ic svg{width:25px;height:25px}
.cab-metric-v{font-family:'Manrope',sans-serif;font-size:24px;font-weight:800;color:var(--t1);line-height:1}
.cab-metric-v small{font-size:13px;font-weight:600;color:var(--t3)}
.cab-metric-l{font-size:12.5px;color:var(--t3);margin-top:5px}
.cab-metric-bar{height:6px;border-radius:6px;background:#DBEAFE;margin:9px 12px 0;overflow:hidden}
.cab-metric-bar i{display:block;height:100%;background:#2563EB;border-radius:6px}
/* Статусы уборщика в hero-шапке */
.cab-crown{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FCD34D,#F59E0B);border:2px solid rgba(255,255,255,.55);color:#7C2D12;box-shadow:0 2px 6px rgba(245,159,11,.45)}
.cab-crown svg{width:16px;height:16px}
.cab-nm-row{display:flex;align-items:center;gap:7px}
.cab-ver-inline{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;border-radius:50%;background:#2563EB;color:#fff}
.cab-ver-inline svg{width:15px;height:15px}
.cab-rep-inline{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--hac-ink,#1D4ED8);background:var(--hac-soft,#E8EFFE);border-radius:8px;padding:3px 8px;margin-left:8px}/* значок роли «ремонтник»: та же мягкая синяя плашка, что в списке и карточке */
.cab-rep-inline svg{width:14px;height:14px}
.cab-head.hero .cab-rep-inline{color:#CFE0FF;background:rgba(109,155,255,.22)}/* на фотографии мягкий синий тонет — берём его полупрозрачным со светлым текстом */
#cleanerTabs .cab-tab{font-size:13px}
/* Десктоп: крупнее иконки и шрифты по всему кабинету */
@media(min-width:600px){
.cabinet .cab-tab{font-size:14px;padding:11px 6px}
.cabinet .cab-tab span:not([id]):not([class]){font-size:20px!important}
.cabinet .cab-sec-t{font-size:11px}
.cabinet .cab-item{font-size:14px}
.cabinet .cab-item-ic{width:40px;height:40px;font-size:19px}
.cabinet .cstat-v{font-size:20px}
.cabinet .cstat-l{font-size:11px}
.cabinet .cab-foot .btn,.cabinet .cab-body .btn{font-size:14px}
.cab-head.hero .cab-nm{font-size:25px}
.cab-metric-ic{width:50px;height:50px}
.cab-metric-ic svg{width:27px;height:27px}
.cab-metric-v{font-size:26px}
.cab-metric-l{font-size:13px}
}
/* ===== DESKTOP-КАБИНЕТ УБОРЩИКА: двухколоночный layout ===== */
@media(min-width:760px){
.cabinet.deskcab{
width:min(1000px,95vw);height:88vh;max-height:88vh;
display:grid;
grid-template-columns:312px 1fr;
grid-template-rows:auto auto 1fr auto;
grid-template-areas:"head body" "metrics body" "tabs body" "foot body";
overflow:hidden;
}
.cabinet.deskcab .cab-head{grid-area:head}
.cabinet.deskcab .cab-metrics{grid-area:metrics;background:#F8FAFC}
.cabinet.deskcab #cabTabsSlot{grid-area:tabs;overflow-y:auto;scrollbar-gutter:stable;padding:14px 12px;background:#F8FAFC}
.cabinet.deskcab .cab-foot{grid-area:foot;position:static;background:#F8FAFC;border-top:1.5px solid var(--b1);padding:14px 12px}
.cabinet.deskcab .cab-body{grid-area:body;overflow-y:auto;scrollbar-gutter:stable;border-left:1.5px solid var(--b1);max-height:none;padding:22px 26px}
/* hero в сайдбаре — вертикально по центру */
.cabinet.deskcab .cab-head.hero{padding:26px 20px 22px}
.cabinet.deskcab .cab-head.hero .cab-ava-row{flex-direction:column;text-align:center;gap:13px}
.cabinet.deskcab .cab-head.hero .cab-photo{width:90px;height:90px;border-radius:22px}
.cabinet.deskcab .cab-head.hero .cab-ava-row>div{width:100%;text-align:center}
.cabinet.deskcab .cab-head.hero .cab-nm-row{justify-content:center}
.cabinet.deskcab .cab-head.hero .cab-nm{font-size:22px}
.cabinet.deskcab .cab-head.hero .cab-role{justify-content:center;flex-wrap:wrap}
.cabinet.deskcab .cab-head.hero #cabRepInline{flex-shrink:0}
/* вертикальная навигация */
.cabinet.deskcab #cleanerTabs{flex-direction:column;gap:5px;border-bottom:none;padding:0;position:static;background:transparent;margin:0}
.cabinet.deskcab #cleanerTabs .cab-tab{flex:none;text-align:left;justify-content:flex-start;display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:12px;border-bottom:none;margin-bottom:0;font-size:15px;color:var(--t2)}
.cabinet.deskcab #cleanerTabs .cab-tab>span:not([id]):not([class]){font-size:19px!important;vertical-align:middle}
.cabinet.deskcab #cleanerTabs .cab-tab:hover{background:#EDF1F7;color:var(--t1)}
.cabinet.deskcab #cleanerTabs .cab-tab.on{background:#2563EB;color:#fff;border-bottom:none;box-shadow:0 6px 16px rgba(37,99,235,.32)}
.cabinet.deskcab #cleanerTabs .cab-tab .cab-tab-badge,.cabinet.deskcab #cleanerTabs .cab-tab #trustScoreBadge{margin-left:auto}
.cabinet.deskcab #cleanerTabs .cab-tab.on #trustScoreBadge{background:rgba(255,255,255,.25)!important}
/* контент справа — читаемые размеры */
.cabinet.deskcab .cab-tab-panel{font-size:14px}
.cabinet.deskcab .cab-sec-t{font-size:11px}
/* карточка заказа — крупнее, воздух, hover */
.cabinet.deskcab .ord-card{padding:18px 20px!important;border-radius:14px!important;margin-bottom:12px!important;transition:box-shadow .15s,transform .15s}
.cabinet.deskcab .ord-card:hover{box-shadow:0 8px 24px rgba(20,23,46,.12);transform:translateY(-2px)}
.cabinet.deskcab .ord-card>div:first-child{margin-bottom:11px!important}
.cabinet.deskcab .ord-card>div:first-child>div:first-child{font-size:16px!important}
.cabinet.deskcab .ord-card>div:nth-child(2){font-size:14px!important;gap:6px!important}
.cabinet.deskcab .ord-card>div:nth-child(2) b{font-size:15px!important}
.cabinet.deskcab .ord-card button{font-size:14px!important;padding:11px 12px!important;border-radius:10px!important}
}
/* ===== DESKTOP-КАБИНЕТ КЛИЕНТА: двухколоночный (без вкладок) ===== */
@media(min-width:900px){
.cabinet.deskcab-client{
width:min(960px,95vw);height:88vh;max-height:88vh;
display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto 1fr auto;
grid-template-areas:"head body" "stats body" "foot body";overflow:hidden;
}
.cabinet.deskcab-client .cab-head{grid-area:head;background:linear-gradient(135deg,#2563EB,#1E40AF);border-bottom:none}
.cabinet.deskcab-client .cab-head .cab-nm,.cabinet.deskcab-client .cab-head .cab-photo-btn{color:#fff}
.cabinet.deskcab-client .cab-head .cab-photo-btn{background:#fff;color:#2563EB}
.cabinet.deskcab-client .cab-head .crb.client{background:rgba(255,255,255,.2);color:#fff}
.cabinet.deskcab-client .cab-head #cabEmail{color:rgba(255,255,255,.82)}
.cabinet.deskcab-client .cab-head .cab-ava-row{flex-direction:column;text-align:center;gap:13px;margin-bottom:0}
.cabinet.deskcab-client .cab-head .cab-photo{width:110px;height:110px;border-radius:24px;border-color:rgba(255,255,255,.4)}
.cabinet.deskcab-client .cab-head .cab-ava-row>div{width:100%;text-align:center}
.cabinet.deskcab-client .cab-head .cab-nm-row{justify-content:center}
.cabinet.deskcab-client .cab-head .cab-nm{font-size:22px}
.cabinet.deskcab-client .cab-head .cab-role{justify-content:center}
.cabinet.deskcab-client #cabTabsSlot{display:none}
.cabinet.deskcab-client #cabStats{grid-area:stats;background:#F8FAFC;padding:16px 14px;overflow-y:auto;margin:0}
.cabinet.deskcab-client .cab-foot{grid-area:foot;position:static;background:#F8FAFC;border-top:1.5px solid var(--b1);padding:14px 12px}
.cabinet.deskcab-client .cab-body{grid-area:body;overflow-y:auto;border-left:1.5px solid var(--b1);max-height:none;padding:22px 26px}
}
/* ===== DESKTOP: масштабирование сайта убрано (по просьбе) — сайт 1:1 ===== */
.cab-sec-t::after{content:'';flex:1;height:1px;background:var(--b1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:2px}
.cal-day{min-height:36px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--t2);cursor:default;position:relative;padding:2px 0;border:1.5px solid transparent;transition:all .15s}
.cal-day.has-order{background:var(--v);color:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(90,95,255,.3)}
.cal-day.has-order:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(90,95,255,.4)}
.cal-day.multi-order{background:#F43F5E;color:#000;box-shadow:0 2px 8px rgba(244,63,94,.35)}
.cal-day.multi-order:hover{background:#e02d4e;box-shadow:0 4px 12px rgba(244,63,94,.5)}
.cal-day.multi-order .cal-cnt{font-size:9px;font-weight:800;color:#000;line-height:1;margin-top:1px}
.cal-day.today{border-color:var(--v);color:var(--v);font-weight:800}
.cal-day.today.has-order{border-color:transparent}
.cal-day.other-month{opacity:.3}
.cal-day.selected{outline:2px solid #fff;outline-offset:-3px}
.cal-dow{font-size:9px;font-weight:700;color:var(--t3);text-align:center;padding:2px 0;text-transform:uppercase;letter-spacing:.5px}
.cal-badge{position:absolute;top:2px;right:3px;width:14px;height:14px;border-radius:50%;background:#F43F5E;color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff}
.ord-card{background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:13px 14px;margin-bottom:8px;transition:border-color .15s}
.ord-card.pending{border-left:3px solid var(--amb);background:#FFFDF5}
.ord-card.active{border-left:3px solid var(--grn);background:#F8FFFC}
.ord-card.done{border-left:3px solid var(--gry);opacity:.7}
.ord-card.declined{border-left:3px solid var(--red);opacity:.6}
.ord-card.progress{border-left:3px solid var(--v,#2563EB);background:#F7FAFF}
.ord-card-badge.progress{background:#EAF1FE;color:#2563EB;border:1px solid #C7D9FF}
.ord-card.disputed{border-left:3px solid #F59F1C;background:#FFFCF5}
.ord-card-badge.disputed{background:#FFF6E6;color:#B0730B;border:1px solid #F5DFAE}
.ord-card.released{border-left:3px solid var(--grn,#16A34A)}
.ord-card-badge.released{background:#E9F7EF;color:#0F7A3D;border:1px solid #BFE7CF}
.ord-card.cancelled{border-left:3px solid var(--gry);opacity:.55;background:#FAFAFA}
.ord-card.awaiting_client{border-left:3px solid var(--v);background:#F5F4FF}
.ord-card.awaiting_cleaner{border-left:3px solid var(--amb);background:#FFFDF5}
.ord-card-badge.awaiting_client{background:#EEF0FF;color:var(--v);border:1px solid #C5C8FF}
.ord-card-badge.awaiting_cleaner{background:#FFF8EA;color:#C07A00;border:1px solid #FFD98A}
.ord-card-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ord-card-type{font-size:13px;font-weight:700;color:var(--t1);flex:1}
.ord-card-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:6px}
.ord-card-badge.pending{background:#FFF8EA;color:#C07A00;border:1px solid #FFD98A}
.ord-card-badge.active{background:#E6FBF3;color:#0A9B6A;border:1px solid #B0EDD9}
.ord-card-badge.done{background:#F2F4FA;color:var(--t3);border:1px solid var(--b2)}
.ord-card-badge.declined{background:#FFF0F2;color:#D0192B;border:1px solid #FFCDD5}
.ord-card-badge.cancelled{background:#F2F4FA;color:var(--t3);border:1px solid var(--b2)}
.ord-card-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);margin-bottom:4px}
.ord-card-row b{color:var(--t1)}
.ord-card-row .oi{width:16px;text-align:center;flex-shrink:0}
.ord-card-actions{display:flex;gap:6px;margin-top:10px}
.ord-btn-accept{flex:1;padding:7px;border-radius:8px;border:none;background:var(--grn);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:opacity .15s}
.ord-btn-accept:hover{opacity:.85}
.ord-btn-decline{flex:1;padding:7px;border-radius:8px;border:1.5px solid var(--red);background:transparent;color:var(--red);font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.ord-btn-decline:hover{background:var(--red);color:#fff}
.ord-btn-done{width:100%;padding:7px;border-radius:8px;border:none;background:#E6FBF3;color:#0A9B6A;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.ord-btn-done:hover{background:#0A9B6A;color:#fff}
.ord-badge-new{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;background:var(--red);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:0 4px;margin-left:5px}
.cab-item{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--wh);border:1.5px solid var(--b1);border-radius:9px;margin-bottom:5px;font-size:12px;color:var(--t1);cursor:pointer;transition:all .15s}
.cab-item:hover{border-color:var(--v);background:#F5F4FF}
.cab-item-ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.cab-item-r{margin-left:auto;font-size:11px;color:var(--t3)}
.order-item{background:var(--wh);border:1.5px solid var(--b1);border-radius:9px;padding:10px 11px;margin-bottom:6px}
.order-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.order-type{font-weight:600;font-size:12px}
.ostatus{padding:2px 6px;border-radius:7px;font-size:9px;font-weight:700}
.ostatus.done{background:#E6FBF3;color:#0A9B6A}
.order-meta{font-size:10px;color:var(--t3)}
.ctog{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1.5px solid var(--b1);border-radius:9px;padding:10px 11px;margin-bottom:8px}
.ctog-l{font-size:12px;font-weight:600;color:var(--t1)}.ctog-s{font-size:10px;color:var(--t3);margin-top:1px}
.tg{position:relative;width:38px;height:22px;flex-shrink:0}
.tg input{opacity:0;width:0;height:0;position:absolute}
.tg-track{position:absolute;inset:0;border-radius:11px;background:var(--b2);transition:background .18s;cursor:pointer}
.tg-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .18s;pointer-events:none}
.tg input:checked ~ .tg-track{background:var(--grn)}
.tg input:checked ~ .tg-thumb{transform:translateX(16px)}
.incoming{background:linear-gradient(135deg,rgba(90,95,255,.07),rgba(124,58,237,.07));border:1.5px solid rgba(90,95,255,.2);border-radius:10px;padding:11px;margin-bottom:8px}
.inc-t{font-size:11px;font-weight:700;color:var(--v);margin-bottom:6px;display:flex;align-items:center;gap:5px}
.inc-dot{width:6px;height:6px;border-radius:50%;background:var(--v);animation:pd 1s infinite}
.inc-btns{display:flex;gap:5px;margin-top:7px}
/* DOCS */
.doc-card{display:flex;align-items:center;gap:8px;background:var(--wh);border:1.5px solid var(--b1);border-radius:9px;padding:8px 10px;margin-bottom:5px;transition:all .15s}
.doc-card:hover{border-color:var(--b2)}
.doc-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.doc-info{flex:1;min-width:0}
.doc-nm{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.doc-meta{font-size:10px;color:var(--t3);margin-top:1px}
.doc-v{display:inline-flex;align-items:center;gap:2px;padding:1px 5px;border-radius:6px;font-size:8px;font-weight:700;background:linear-gradient(135deg,#1DA1F2,#0D6EFD);color:#fff}
.doc-p{display:inline-flex;padding:1px 5px;border-radius:6px;font-size:8px;font-weight:700;background:#FFF8EA;color:#C07A00;border:1px solid #FFD98A}
.doc-del{width:22px;height:22px;border-radius:5px;background:transparent;border:1.5px solid var(--b1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:11px;flex-shrink:0;transition:all .13s}
.doc-del:hover{background:var(--red);border-color:var(--red);color:#fff}
/* MODALS */
.overlay{position:fixed;inset:0;background:rgba(27,30,48,.4);z-index:1200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.overlay.on{display:flex}
.modal{background:var(--wh);border:1.5px solid var(--b1);border-radius:16px;width:360px;max-width:calc(100vw - 48px);animation:mpop .25s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--sh3);position:relative;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{flex-shrink:0;border-bottom:1.5px solid var(--b1);background:var(--wh);border-radius:16px 16px 0 0}
.modal-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 0;overscroll-behavior:contain}
.modal-scroll::-webkit-scrollbar{width:3px}
.modal-scroll::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.mfoot{flex-shrink:0;padding:12px 20px 16px;border-top:1px solid var(--b1);background:var(--wh);display:flex;gap:8px;justify-content:flex-end}
.modal::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--v),var(--v2))}
@keyframes mpop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.mt{font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;color:var(--t1);margin:0;padding:14px 20px;display:flex;align-items:center;gap:7px}
.mti{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.mti.o{background:#EEEDFF}.mti.r{background:#FFF8EA}.mti.ep{background:#E6FBF3}
.fg{margin-bottom:9px}
.fl{font-size:10px;font-weight:700;color:var(--t3);margin-bottom:3px;display:block;letter-spacing:.5px;text-transform:uppercase}
.fi{width:100%;background:var(--bg);border:1.5px solid var(--b1);border-radius:8px;padding:7px 10px;color:var(--t1);font-size:12px;font-family:'Inter',sans-serif;transition:border-color .15s,background .15s,box-shadow .15s,color .15s}
.fi:focus{outline:none;border-color:var(--v);background:#fff;box-shadow:0 0 0 3px rgba(90,95,255,.1)}
.fi::placeholder{color:var(--t3)}
select.fi{cursor:pointer}
.mfoot{display:flex;gap:5px;justify-content:flex-end;margin-top:14px}
/* NOTIF */
.order-popup{position:fixed;inset:0;z-index:9900;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);animation:nsl .25s cubic-bezier(.34,1.56,.64,1)}
.order-popup-inner{background:#fff;border-radius:20px;padding:22px 22px 18px;width:340px;max-width:100%;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.order-popup-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--t2);margin-bottom:5px}
.order-popup-row .oi{width:18px;text-align:center;flex-shrink:0;font-size:14px;line-height:1.4}
/* ── Попап нового заказа: сжатая карточка ───────────────────────────────
Раньше окно занимало почти весь экран: половину съедала карта, а цена и
время терялись мелким текстом. Здесь только то, что нужно для решения
«брать или нет»; карта и состав — по кнопке «Подробнее» в кабинете. */
.order-popup-inner.op-card{padding:16px 16px 12px;width:330px;max-height:90vh;overflow-y:auto}
.op-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.op-bell{width:34px;height:34px;border-radius:10px;background:#FFF8EA;border:1.5px solid #FFD98A;
display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.op-ttl{font-size:16px;font-weight:800;color:var(--t1);flex:1}
.op-timer{font-size:13px;font-weight:800;color:var(--t3);font-variant-numeric:tabular-nums;
background:var(--bg);border-radius:8px;padding:4px 9px}
.op-timer.hot{color:#D0192B;background:#FFF0F2}
.op-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.op-price{font-size:30px;font-weight:800;color:var(--v);line-height:1;letter-spacing:-.5px}
.op-type{font-size:13px;font-weight:700;color:var(--t2);background:var(--bg);border-radius:8px;padding:4px 9px}
.op-line{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;color:var(--t1);
font-weight:600;line-height:1.45;margin-bottom:6px}
.op-line .op-ic{width:17px;flex-shrink:0;text-align:center;opacity:.75}
.op-repair{color:#C07A00;font-weight:700}
.op-chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 4px}
.op-chip{font-size:12px;font-weight:700;color:var(--t2);background:var(--bg);border-radius:7px;padding:4px 8px}
.op-chip-own{color:#2563EB;background:#EEF2FF}
.op-quote{background:#EEF2FF;border:1px solid #C9D9FB;border-radius:10px;padding:8px 10px;margin:8px 0 2px}
.op-quote-h{font-size:12.5px;font-weight:800;color:#2563EB;margin-bottom:2px}
.op-quote-s{font-size:11.5px;color:#44506A;line-height:1.35}
.op-media{margin:8px 0 2px}
.op-media-h{font-size:11px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.2px;margin-bottom:5px}
.op-media-row{display:flex;gap:5px;flex-wrap:wrap}
.op-media-row img,.op-media-row video{width:50px;height:50px;object-fit:cover;border-radius:8px;
border:1px solid var(--b1);background:#eef1f6;display:block}
.op-note{background:var(--bg);border-radius:9px;padding:8px 10px;margin:8px 0 4px;
font-size:12.5px;color:var(--t2);font-style:italic;line-height:1.45}
.op-escrow{background:#F0FDF8;border:1px solid #B0EDD9;border-radius:9px;padding:7px 10px;
margin:9px 0 10px;font-size:12.5px;color:#0A9B6A;font-weight:700}
.op-btns{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;margin-bottom:8px}
.op-yes,.op-no{min-height:48px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;
font-family:inherit;border:none}
.op-yes{background:var(--grn);color:#fff;box-shadow:0 6px 16px rgba(22,163,74,.26)}
.op-no{background:#fff;color:var(--red);border:1.5px solid #FFD5DC}
.op-more{width:100%;min-height:44px;border:none;border-radius:11px;background:#EEF2FF;color:#2563EB;
font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:7px}
/* когда кнопка осталась одна — она главная: синяя заливка и высота как у основного действия */
.op-more-solo{min-height:52px!important;font-size:15.5px;background:#2563EB;color:#fff;
box-shadow:0 6px 16px rgba(37,99,235,.26);margin-top:2px}
/* на телефоне общее правило button{min-height:36px} ужимает кнопки попапа — держим норму касания */
.op-yes,.op-no,.op-more{min-height:48px!important}
.op-later{min-height:40px!important}
.op-later{width:100%;min-height:38px;border:none;border-radius:10px;background:transparent;
color:var(--t3);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
@media (max-width:620px){
.order-popup-inner.op-card{width:min(340px,calc(100vw - 28px));padding:16px 16px 12px}
.op-price{font-size:27px}
.op-yes,.op-no{min-height:50px}
}
.bell-btn{position:relative;width:54px;height:54px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;transition:all .15s}
.bell-btn:hover{background:transparent;color:var(--hac)}
/* Счётчик непрочитанных: привязан к ИКОНКЕ (28px в центре кнопки 54px), а не к углу кнопки —
раньше уезжал на 14px выше и правее колокольчика и терялся у края шапки. Кегль 8->11px. */
.bell-badge{position:absolute;top:8px;right:5px;background:#F43F5E;color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:10px;border:2.5px solid #fff;display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1;font-variant-numeric:tabular-nums}
.bell-panel{position:fixed;inset:0;margin:auto;z-index:9700;width:384px;height:fit-content;max-width:calc(100vw - 28px);background:var(--wh);border:1.5px solid var(--b1);border-radius:18px;box-shadow:0 20px 50px rgba(27,30,48,.22);display:none;animation:nsl .25s cubic-bezier(.34,1.56,.64,1);max-height:72vh;overflow:hidden;flex-direction:column}
.bell-panel.on{display:flex}
.bell-panel-head{display:flex;align-items:center;padding:13px 15px 11px;border-bottom:1px solid var(--b1);gap:8px;flex-shrink:0}
.bell-panel-body{overflow-y:auto;flex:1;padding:7px 8px 10px;max-height:calc(72vh - 52px)}
/* ── стеклянная карточка уведомления ── */
.bell-item{--_c:var(--v);--_cs:#EEF0FF;position:relative;display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border:1px solid transparent;border-radius:13px;margin-bottom:2px;background:transparent;cursor:pointer;overflow:hidden;transition:transform .16s,background .16s,box-shadow .16s,border-color .16s}
.bell-item::before{content:"";position:absolute;left:4px;top:11px;bottom:11px;width:3px;border-radius:99px;background:var(--_c);opacity:.9;transition:.16s}
.bell-item:hover{background:var(--wh);transform:translateY(-1px);box-shadow:0 9px 24px -13px rgba(27,30,48,.4);border-color:var(--b1)}
.bell-item:hover::before{top:7px;bottom:7px}
.bell-item.read{opacity:.58}
.bell-item.read::before{opacity:.32}
.bell-item-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--_c);background:var(--_cs);margin-left:5px}
.bell-item-ic svg{width:18px;height:18px}
.bell-item-body{flex:1;min-width:0}
.bell-item-top{display:flex;align-items:center;gap:8px;margin-bottom:3px;padding-right:16px}
.bell-item-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--_c)}
.bell-item-time{font-size:11px;color:var(--t3);font-weight:500;margin-left:auto;white-space:nowrap;cursor:default}
.bell-item-title{font-size:13px;font-weight:700;color:var(--t1);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bell-item-text{font-size:12px;color:var(--t2);line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bell-item-dot{position:absolute;top:13px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--_c)}
.bell-item-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--_c);opacity:.3;animation:bellpulse 2s ease-out infinite}
.bell-item.read .bell-item-dot{display:none}
.bell-item-x{position:absolute;top:8px;right:9px;width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--t3);cursor:pointer;display:grid;place-items:center;opacity:0;transform:scale(.85);transition:.15s;line-height:1}
.bell-item:hover .bell-item-x{opacity:1;transform:scale(1)}
.bell-item:hover .bell-item-dot{opacity:0}
.bell-item-x:hover{background:#FFF0F2;color:var(--red)}
@keyframes bellpulse{from{transform:scale(1);opacity:.3}to{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.bell-item-dot::after{animation:none}.bell-item{transition:none}}
.notif-bell{position:fixed;top:95px;left:14px;z-index:890;background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:10px 14px;max-width:300px;box-shadow:var(--sh2);display:none;animation:nsl .26s cubic-bezier(.34,1.56,.64,1)}
.notif-bell.on{display:block}
.notif-bell-title{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:3px}
.notif-bell-msg{font-size:11px;color:var(--t2);line-height:1.5}
.notif-bell-tag{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;margin-bottom:6px}
.notif-bell-tag.news{background:#EEF0FF;color:var(--v)}
.notif-bell-tag.promo{background:#FFF8EA;color:#C07A00}
.notif-bell-tag.alert{background:#FFF0F2;color:var(--red)}
.notif{position:fixed;top:95px;right:14px;z-index:900;background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:11px 14px;max-width:270px;box-shadow:var(--sh2);display:none}
.notif.on{display:block;animation:nsl .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes nsl{from{transform:translateX(10px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.n-bar{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--v),var(--v2));margin-bottom:7px;animation:nbar 3.5s linear forwards}
@keyframes nbar{from{width:100%}to{width:0}}
.n-title{font-weight:700;font-size:12px;color:var(--t1);margin-bottom:2px}
.n-msg{font-size:11px;color:var(--t2)}
@keyframes pinpulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
/* GPS badge */
/* .gps-badge убран 19.08.2026 по просьбе MR — бейдж «GPS Live» снят с карточек */
/* ══ ADMIN PANEL ══ */
.adm-ov{position:fixed;inset:0;z-index:1300;background:rgba(15,12,41,.82);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding-top:20px}
.adm-ov.on{display:flex;animation:fi .2s ease}
.adm-panel{--adm-head-h:66px;background:var(--wh);border-radius:20px;width:1200px;max-width:98vw;height:95vh;max-height:95vh;display:block;overflow-y:auto;overflow-x:hidden;box-shadow:0 32px 80px rgba(0,0,0,.4);-webkit-overflow-scrolling:touch}
.adm-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1.5px solid var(--b1);position:sticky;top:0;z-index:6;background:linear-gradient(135deg,#1B1E30,#2D2A5E)}
.adm-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--v),var(--v2));display:flex;align-items:center;justify-content:center;font-size:16px}
.adm-title{font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px}
.adm-sub{font-size:10px;color:rgba(255,255,255,.4);margin-left:2px}
.adm-x{margin-left:auto;width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.6);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.adm-x:hover{background:var(--red);color:#fff}
.adm-tabs{display:flex;border-bottom:1.5px solid var(--b1);overflow-x:auto;position:sticky;top:var(--adm-head-h, 66px);z-index:5;background:#FAFBFF}
.adm-tab{display:flex;align-items:center;gap:5px;padding:10px 14px;font-size:11px;font-weight:700;cursor:pointer;color:var(--t3);border-bottom:2.5px solid transparent;white-space:nowrap;transition:all .15s;flex-shrink:0}
.adm-tab:hover{color:var(--t1);background:var(--bg)}
.adm-tab.on{color:var(--v);border-bottom-color:var(--v);background:var(--wh)}
.adm-tab-ic{font-size:14px}
.adm-badge{background:var(--v);color:#fff;font-size:9px;font-weight:800;padding:1px 5px;border-radius:9px;min-width:16px;text-align:center;display:none}
.adm-badge:not(:empty){display:inline-block}
.adm-badge.red{background:var(--red)}
.adm-badge.grn{background:var(--grn)}
.adm-body{padding:16px;overscroll-behavior:contain}
.adm-foot{position:sticky;bottom:0;z-index:5;padding:10px 20px;border-top:1.5px solid var(--b1);background:var(--wh);display:flex;justify-content:flex-end}
.adm-body::-webkit-scrollbar{width:5px}
.adm-body::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.adm-sec{margin-bottom:18px}
.adm-sec-t{font-size:9px;font-weight:700;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.adm-sec-t::after{content:'';flex:1;height:1px;background:var(--b1)}
/* Stat cards */
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.adm-stat{background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:12px 14px}
.adm-stat-v{font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px}
.adm-stat-l{font-size:10px;color:var(--t3);margin-top:2px}
/* Cleaner card */
.adm-cl-card{background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:12px 14px;margin-bottom:8px;transition:border-color .15s}
.adm-cl-card:hover{border-color:var(--b2)}
.adm-cl-card.featured{border-color:#F59F1C;background:#FFFBF0}
.adm-cl-card.recommended{border-color:var(--grn);background:#F0FDF8}
.adm-cl-card.blocked{border-color:var(--red);background:#FFF5F6;opacity:.8}
.adm-cl-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adm-cl-info{flex:1;min-width:0}
.adm-cl-name{font-size:13px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.adm-cl-spec{font-size:11px;color:var(--t3);margin-top:1px}
.adm-cl-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--t2);margin-top:4px}
.adm-cl-actions{display:flex;gap:5px;flex-wrap:wrap}
.adm-btn{padding:5px 10px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;border:1.5px solid var(--b1);background:var(--bg);color:var(--t2);font-family:'Inter',sans-serif;transition:all .15s;display:flex;align-items:center;gap:3px}
.adm-btn:hover{border-color:var(--v);color:var(--v);background:#F0EEFF}
.adm-btn.danger{border-color:var(--red);color:var(--red)}
.adm-btn.danger:hover{background:var(--red);color:#fff}
.adm-btn.success{border-color:var(--grn);color:var(--grn)}
.adm-btn.success:hover{background:var(--grn);color:#fff}
.adm-btn.active{background:var(--v);color:#fff;border-color:var(--v)}
/* User card */
.adm-user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wh);border:1.5px solid var(--b1);border-radius:10px;margin-bottom:6px;transition:all .15s}
.adm-user-card.blocked{background:#FFF5F6;border-color:#FFCDD5;opacity:.8}
.adm-user-info{flex:1;min-width:0}
.adm-user-name{font-size:12px;font-weight:700;color:var(--t1)}
.adm-user-meta{font-size:10px;color:var(--t3);margin-top:2px}
/* Doc card */
.adm-doc-card{background:var(--wh);border:1.5px solid var(--b1);border-radius:11px;padding:12px 14px;margin-bottom:8px}
.adm-doc-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.adm-doc-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.adm-doc-info{flex:1}
.adm-doc-name{font-size:13px;font-weight:700;color:var(--t1)}
.adm-doc-meta{font-size:11px;color:var(--t3);margin-top:2px}
.adm-doc-owner{font-size:11px;color:var(--t2);margin-top:3px;display:flex;align-items:center;gap:5px}
.adm-doc-actions{display:flex;gap:6px;padding-top:9px;border-top:1px solid var(--b1)}
.adm-search{position:relative;margin-bottom:12px}
.adm-search input{width:100%;background:var(--bg);border:1.5px solid var(--b1);border-radius:9px;padding:8px 12px 8px 32px;font-size:12px;font-family:'Inter',sans-serif;color:var(--t1);transition:all .15s}
.adm-search input:focus{outline:none;border-color:var(--v);background:#fff}
.adm-search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--t3)}
.adm-empty{text-align:center;padding:30px;color:var(--t3);font-size:13px}
.adm-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-size:9px;font-weight:700}
.adm-tag.feat{background:#FFF8EA;color:#C07A00;border:1px solid #FFD98A}
.adm-tag.rec{background:#E6FBF3;color:#0A9B6A;border:1px solid #B0EDD9}
.adm-tag.blk{background:#FFF0F2;color:#C00030;border:1px solid #FFCDD5}
.adm-tag.ver{background:linear-gradient(135deg,#1DA1F2,#0D6EFD);color:#fff}
.adm-filter-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.adm-filter{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--b1);background:var(--wh);color:var(--t2);font-family:'Inter',sans-serif;transition:all .15s}
.adm-filter:hover{border-color:var(--v);color:var(--v)}
.adm-filter.on{background:var(--v);color:#fff;border-color:var(--v)}
/* ── DOC THUMBNAILS ── */
.det-docs-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.doc-thumb{width:44px;height:54px;border-radius:8px;border:1.5px solid var(--b1);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;position:relative;flex-shrink:0;overflow:hidden}
.doc-thumb:hover{border-color:var(--v);transform:translateY(-2px);box-shadow:0 4px 12px rgba(90,95,255,.2)}
.doc-thumb-ic{font-size:18px;line-height:1}
.doc-thumb-lbl{font-size:7px;font-weight:700;color:var(--t3);text-align:center;margin-top:3px;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40px}
.doc-thumb-ver{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--grn);border:1.5px solid #fff}
.doc-thumb-pend{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--amb);border:1.5px solid #fff}
/* ── DOC VIEWER MODAL ── */
.docview-ov{position:fixed;inset:0;z-index:1500;background:rgba(15,12,41,.88);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center}
.docview-ov.on{display:flex;animation:fi .18s ease}
.docview-card{background:var(--wh);border-radius:18px;width:360px;max-width:94vw;box-shadow:0 32px 80px rgba(0,0,0,.5);animation:ci .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.docview-head{padding:14px 16px;border-bottom:1.5px solid var(--b1);display:flex;align-items:center;gap:10px}
.docview-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.docview-title{flex:1}
.docview-name{font-size:14px;font-weight:700;color:var(--t1)}
.docview-meta{font-size:11px;color:var(--t3);margin-top:1px}
.docview-x{width:28px;height:28px;border-radius:7px;background:var(--bg);border:1.5px solid var(--b1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--t2)}
.docview-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
.docview-body{padding:16px}
.docview-preview{width:100%;min-height:160px;border-radius:12px;border:1.5px solid var(--b1);background:linear-gradient(135deg,#F2F4FA,#E8EBF5);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:14px;position:relative;overflow:hidden}
.docview-preview img{max-width:100%;max-height:240px;border-radius:10px;object-fit:contain}
.docview-preview-ic{font-size:52px;margin-bottom:8px}
.docview-preview-lbl{font-size:12px;color:var(--t3)}
.docview-status{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--b1);margin-bottom:10px}
.docview-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2);padding:6px 0;border-bottom:1px solid var(--b1)}
.docview-row:last-child{border-bottom:none}
.docview-row-ic{font-size:14px;flex-shrink:0}
/* ══ CITY SELECTOR ══ */
.city-ov{position:fixed;inset:0;z-index:1200;background:rgba(15,12,41,.85);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center}
.city-ov.on{display:flex;animation:fi .25s ease}
.city-card{background:var(--wh);border-radius:22px;width:440px;max-width:95vw;box-shadow:0 32px 80px rgba(0,0,0,.5);animation:ci .3s cubic-bezier(.34,1.56,.64,1);overflow:hidden}
.city-head{background:linear-gradient(135deg,#1B1E30,#2D2A5E);padding:24px 24px 20px;text-align:center}
.city-head-ic{font-size:36px;margin-bottom:8px}
.city-head-t{font-family:'Manrope',sans-serif;font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.city-head-s{font-size:12px;color:rgba(255,255,255,.5)}
.city-body{padding:20px}
.city-geo-btn{width:100%;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;box-shadow:0 4px 18px rgba(90,95,255,.35);transition:all .18s}
.city-geo-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(90,95,255,.45)}
.city-geo-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.city-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.city-divider::before,.city-divider::after{content:'';flex:1;height:1px;background:var(--b1)}
.city-divider span{font-size:11px;color:var(--t3);font-weight:600;white-space:nowrap}
.city-search{position:relative;margin-bottom:10px}
.city-search input{width:100%;background:var(--bg);border:1.5px solid var(--b1);border-radius:10px;padding:10px 12px 10px 36px;font-size:13px;font-family:'Inter',sans-serif;color:var(--t1);transition:all .15s}
.city-search input:focus{outline:none;border-color:var(--v);background:#fff;box-shadow:0 0 0 3px rgba(90,95,255,.1)}
.city-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3)}
.city-list{max-height:260px;overflow-y:auto;margin-bottom:4px}
.city-list::-webkit-scrollbar{width:3px}
.city-list::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.city-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:background .12s;font-size:13px;color:var(--t1)}
.city-item:hover{background:var(--bg)}
.city-item.active{background:#EEF0FF;color:var(--v);font-weight:600}
.city-item-ic{font-size:18px;flex-shrink:0;width:26px;text-align:center}
.city-item-sub{font-size:10px;color:var(--t3);margin-top:1px}
.city-geo-status{text-align:center;font-size:12px;color:var(--t3);padding:8px;display:none}
.city-selected-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--bg);border:1.5px solid var(--b1);border-radius:10px;margin-top:12px;font-size:12px;color:var(--t2)}
.city-selected-bar b{color:var(--t1);font-weight:700}
/* Кнопка смены города в топбаре */
.city-btn{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:11px;font-size:15px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--t2);font-family:'Inter',sans-serif;transition:all .15s;margin-left:6px}
.city-btn:hover{color:var(--v)}
/* ── Top-bar status toggle (cleaner only) ── */
.top-toggle{display:none;align-items:center;gap:10px;padding:6px 4px;margin-left:10px;background:none;border:none;cursor:pointer;transition:opacity .2s}
.top-toggle:hover{opacity:.85}
.tt-ic{display:flex;align-items:center;justify-content:center;color:var(--gry,#9CA3AF);flex-shrink:0;transition:color .22s}
.top-toggle.online .tt-ic{color:var(--grn)}
.tt-ic svg{width:22px;height:22px}
.tt-tx{font-size:14px;font-weight:800;color:var(--t1);line-height:1.2;white-space:nowrap}
.tt-tx small{display:block;font-size:11.5px;font-weight:600;color:var(--t3);margin-top:1px}
.top-toggle.online .tt-tx small{color:#0A9B6A}
#chat-header-btn:hover{color:var(--hac)}
@media (max-width:768px){#chat-header-btn{padding:0!important;width:36px!important;height:36px!important;gap:0!important;margin:0 6px 0 auto!important;flex-shrink:0!important;order:998!important}.top #topBurger{order:901!important;flex-shrink:0!important;margin-left:6px!important;margin-right:8px!important}#chat-header-btn .chat-btn-label{display:none!important}}
/* ── Doc viewer modal ── */
.doc-modal-ov{position:fixed;inset:0;z-index:1200;background:rgba(15,12,41,.75);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center}
.doc-modal-ov.on{display:flex;animation:fi .2s ease}
.doc-modal-card{background:var(--wh);border-radius:20px;padding:26px;width:420px;max-width:94vw;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:mpop .28s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.doc-modal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--v),var(--v2))}
.doc-modal-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--bg);border:1.5px solid var(--b1);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--t2)}
.doc-modal-x:hover{background:var(--red);color:#fff;border-color:var(--red)}
.doc-preview-box{width:100%;height:148px;border-radius:12px;margin:14px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:2px dashed}
/* ── Cluster markers ── */
.cluster-marker{cursor:pointer;transition:transform .15s}
.cluster-marker:hover{transform:scale(1.08)}
.cluster-popup{background:var(--wh);border-radius:16px;padding:0;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.18);border:1.5px solid var(--b1);min-width:320px;max-width:480px}
/* На телефоне окно списка занимало почти всю ширину экрана встык к краям и
верхом наезжало на кнопку «глаз». Ширину считаем от окна, оставляя поля,
а высоту списка ограничиваем так, чтобы шапка карты оставалась видна. */
@media(max-width:760px){
.cluster-popup{min-width:0;width:calc(100vw - 34px);max-width:calc(100vw - 34px)}
.cluster-popup-list{max-height:min(44vh,320px)}
.leaflet-popup-content-wrapper,.leaflet-popup-content{width:auto!important;max-width:calc(100vw - 34px)!important}
}
.cluster-popup-head{padding:12px 14px 10px;border-bottom:1.5px solid var(--b1);display:flex;align-items:center;gap:8px}
.cluster-popup-title{font-family:'Manrope',sans-serif;font-size:16.9px;font-weight:800;color:var(--t1)}
.cluster-popup-sub{font-size:13px;color:var(--t3);margin-top:1px}
.cluster-popup-list{max-height:260px;overflow-y:auto}
.cluster-popup-list::-webkit-scrollbar{width:3px}
.cluster-popup-list::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
.cluster-trust{font-size:12px;font-weight:800;display:flex;align-items:center;gap:2px;line-height:1}
.cluster-popup-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--b1);cursor:pointer;transition:background .13s}
.cluster-popup-item:last-child{border-bottom:none}
.cluster-popup-item:hover{background:var(--bg)}
.cluster-ava{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #fff;display:block}
.cluster-info{flex:1;min-width:0}
.cluster-name{font-size:15.6px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cluster-spec{font-size:13px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cluster-rating{font-size:14.3px;font-weight:700;color:#D97706;white-space:nowrap}
.cluster-st{padding:2px 7px;border-radius:10px;font-size:11.7px;font-weight:700;flex-shrink:0}
.cluster-st.free{background:#E6FBF3;color:#0A9B6A}
.cluster-st.busy{background:#FFF0F2;color:#F43F5E}
.cluster-st.offline{background:#F5F7FB;color:var(--gry)}
.leaflet-popup-content-wrapper{padding:0!important;border-radius:16px!important;overflow:hidden}
.leaflet-popup-content{margin:0!important;line-height:1}
.leaflet-popup .leaflet-popup-tip-container{margin-top:-1px}
/* ── Feedback button ── */
.fb-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;font-size:17px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--t2);font-family:'Inter',sans-serif;transition:all .18s;margin-left:8px}
.fb-btn:hover{background:transparent;color:var(--hac)}
.fb-rating{display:flex;gap:6px;margin-bottom:4px}
.fb-star{font-size:24px;cursor:pointer;transition:transform .15s;color:#E4E8F4;line-height:1}
.fb-star:hover,.fb-star.on{color:#F59F1C;transform:scale(1.15)}
.fb-type-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.fb-type{padding:5px 11px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--b1);background:var(--wh);color:var(--t2);transition:all .15s}
.fb-type.on{background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;border-color:transparent}
/* ── Уведомление об успешной отправке ── */
#feedbackSuccess{
position:fixed;top:0;left:0;width:100%;height:100%;
z-index:99999;
background:rgba(0,0,0,0.65);
display:none;
}
#feedbackSuccessCard{
background:#ffffff;
border-radius:20px;
padding:48px 44px;
text-align:center;
width:400px;
max-width:88vw;
box-shadow:0 20px 60px rgba(0,0,0,0.45);
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
#feedbackSuccessCard .fs-top{
position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,#5A5FFF,#7C3AED);
border-radius:20px 20px 0 0;
}
#feedbackSuccessCard .fs-icon{font-size:68px;display:block;margin-bottom:20px;line-height:1}
#feedbackSuccessCard .fs-title{
font-size:26px;font-weight:800;color:#1B1E30;
font-family:'Manrope',sans-serif;
margin-bottom:12px;letter-spacing:-0.5px;
}
#feedbackSuccessCard .fs-msg{
font-size:15px;color:#4B5280;line-height:1.7;margin-bottom:28px;
}
#feedbackSuccessCard .fs-btn{
display:inline-block;padding:13px 40px;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
color:#fff;font-size:15px;font-weight:700;
border:none;border-radius:12px;cursor:pointer;
font-family:'Inter',sans-serif;
box-shadow:0 4px 20px rgba(90,95,255,0.4);
}
/* Review photo upload */
.rev-photos-area{background:var(--bg);border:1.5px solid var(--b1);border-radius:10px;padding:10px;margin-bottom:2px;transition:border-color .15s}
.rev-photos-area:hover{border-color:var(--v)}
.rev-photos-strip{display:flex;gap:8px;flex-wrap:wrap;min-height:0}
.rev-photo-thumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;flex-shrink:0;border:2px solid var(--b1);transition:border-color .15s}
.rev-photo-thumb:hover{border-color:var(--v)}
.rev-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.rev-photo-thumb-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(244,63,94,.9);border:1.5px solid #fff;color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:1}
.rev-photo-thumb-del:hover{background:var(--red)}
.rev-photo-add{width:64px;height:64px;border-radius:10px;border:2px dashed var(--b2);background:var(--wh);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:2px;flex-shrink:0;transition:all .15s}
.rev-photo-add:hover{border-color:var(--v);background:#F5F4FF}
.rev-photo-add span{font-size:20px;line-height:1}
.rev-photo-add small{font-size:9px;color:var(--t3);font-weight:600}
.rev-photo-hint{font-size:10px;color:var(--t3);margin-top:6px;text-align:center}
/* Review photo expand on hover */
.rev-ava-wrap{position:relative;flex-shrink:0;cursor:pointer}
.rev-ava-wrap img{display:block;transition:opacity .15s}
.rev-ava-wrap:hover img{opacity:.85}
.rev-ava-zoom{
position:fixed;z-index:9998;
pointer-events:none;
opacity:0;
transition:opacity .18s;
border-radius:14px;
overflow:hidden;
box-shadow:0 12px 40px rgba(0,0,0,.35);
border:3px solid #fff;
background:#eef0f4;
width:180px;height:180px;
object-fit:cover;
}
.rev-ava-wrap:hover .rev-ava-zoom{opacity:1}
.rev-ava-has-photo .rev-ava{border:2px solid var(--v);border-radius:10px}
/* Review edit button */
.rev-edit-btn{font-size:10px;font-weight:600;color:var(--v);cursor:pointer;padding:2px 7px;border-radius:6px;border:1px solid var(--b1);background:var(--bg);margin-left:auto;flex-shrink:0;transition:all .15s;line-height:1.6}
.rev-edit-btn:hover{background:var(--v);color:#fff;border-color:var(--v)}
.rev-del-btn{font-size:10px;font-weight:600;color:var(--red);cursor:pointer;padding:2px 7px;border-radius:6px;border:1px solid var(--b1);background:var(--bg);margin-left:4px;flex-shrink:0;transition:all .15s;line-height:1.6}
.rev-del-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}
/* Admin review moderation */
.adm-rev-card{background:var(--wh);border:1.5px solid var(--b1);border-radius:12px;padding:14px;margin-bottom:10px;position:relative}
.adm-rev-card.pending{border-left:3px solid var(--amb)}
.adm-rev-card.approved{border-left:3px solid var(--grn);opacity:.7}
.adm-rev-card.rejected{border-left:3px solid var(--red);opacity:.6}
.adm-rev-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.adm-rev-meta{flex:1;min-width:0}
.adm-rev-nm{font-size:13px;font-weight:700;color:var(--t1)}
.adm-rev-for{font-size:11px;color:var(--t3);margin-top:1px}
.adm-rev-stars{color:#D97706;font-size:12px;font-weight:700}
.adm-rev-text{font-size:12px;color:var(--t2);line-height:1.55;margin-bottom:10px;padding:8px 10px;background:var(--bg);border-radius:8px}
.adm-rev-actions{display:flex;gap:8px}
.adm-rev-approve{flex:1;padding:7px;border-radius:8px;border:none;background:#E6FBF3;color:#0A9B6A;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.adm-rev-approve:hover{background:#0A9B6A;color:#fff}
.adm-rev-reject{flex:1;padding:7px;border-radius:8px;border:none;background:#FFF0F2;color:#D0192B;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.adm-rev-reject:hover{background:var(--red);color:#fff}
.adm-rev-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.adm-rev-status.pending{background:#FFF8EA;color:#C07A00}
.adm-rev-status.approved{background:#E6FBF3;color:#0A9B6A}
.adm-rev-status.rejected{background:#FFF0F2;color:#D0192B}
/* Eye toggle + forgot password */
.pass-wrap{position:relative}
.pass-wrap .ai{padding-right:38px;width:100%;box-sizing:border-box}
.eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--t3);font-size:17px;padding:0;line-height:1;transition:color .15s}
.eye-btn:hover{color:var(--t1)}
.forgot-link{font-size:11px;color:var(--v);cursor:pointer;text-align:right;display:block;margin-top:-4px;margin-bottom:6px}
.forgot-link:hover{text-decoration:underline}
/* Forgot password form */
.auth-form#forgotForm .auth-back{font-size:11px;color:var(--t3);cursor:pointer;margin-bottom:12px;display:inline-flex;align-items:center;gap:4px}
.auth-form#forgotForm .auth-back:hover{color:var(--v)}
.forgot-success{background:#E6FBF3;border:1.5px solid #B0EDD9;border-radius:9px;padding:11px 13px;font-size:12px;color:#0A9B6A;display:none;margin-bottom:10px;line-height:1.5}
.forgot-success.on{display:block}
/* Smart login/reg field */
.smart-field-wrap{position:relative}
.smart-field-wrap .ai{padding-right:64px}
.smart-type-badge{position:absolute;right:10px;top:50%;transform:translateY(-50%);
font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;pointer-events:none;
transition:all .2s;opacity:0}
.smart-type-badge.on{opacity:1}
.smart-type-badge.email{background:rgba(90,95,255,.18);color:#a5a8ff}
.smart-type-badge.phone{background:rgba(17,201,138,.18);color:#5ce8ba}
.sms-prov-btn{flex:1;padding:9px;border-radius:9px;border:1.5px solid var(--b1);background:var(--bg);
color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .18s}
.sms-prov-btn:hover{border-color:var(--v);color:var(--t1)}
.sms-prov-btn.on{border-color:var(--v);background:var(--v);color:#fff}
/* ── Масштабируемая таблица уборщиков ── */
.adm-table-wrap{overflow-x:auto;margin:0 -16px}
.adm-table{width:100%;border-collapse:collapse;font-size:12px;min-width:900px}
.adm-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--t3);
text-transform:uppercase;letter-spacing:.6px;border-bottom:1.5px solid var(--b1);
background:var(--bg);position:sticky;top:0;z-index:2;white-space:nowrap;cursor:pointer;user-select:none}
.adm-table th:hover{color:var(--v)}
.adm-table th .sort-ic{margin-left:4px;opacity:.4}
.adm-table th.sorted .sort-ic{opacity:1;color:var(--v)}
.adm-table td{padding:8px 12px;border-bottom:.5px solid var(--b1);vertical-align:middle;color:var(--t1)}
.adm-table tr:hover td{background:#F8F7FF}
.adm-table tr.blocked td{opacity:.5;background:#FFF5F5}
.adm-tava{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.adm-tname{font-weight:600;font-size:12px;color:var(--t1);max-width:150px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-tmeta{font-size:10px;color:var(--t3);margin-top:1px}
.adm-tbadge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:6px;
font-size:9px;font-weight:700;margin-right:2px;white-space:nowrap}
.adm-tbadge.ver{background:#E6F1FB;color:#0C447C}
.adm-tbadge.feat{background:#FFF8EA;color:#C07A00}
.adm-tbadge.rec{background:#E6FBF3;color:#0A9B6A}
.adm-tbadge.blk{background:#FFF0F2;color:#D0192B}
.adm-tstat{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;
font-size:10px;font-weight:700}
.adm-tstat.free{background:#E6FBF3;color:#0A9B6A}
.adm-tstat.busy{background:#FFF8EA;color:#C07A00}
.adm-tstat.offline{background:var(--bg);color:var(--t3)}
.adm-tact{display:flex;gap:4px;flex-wrap:nowrap}
.adm-tact button{padding:3px 7px;border-radius:5px;border:.5px solid var(--b1);
background:var(--bg);color:var(--t2);font-size:10px;cursor:pointer;white-space:nowrap;transition:all .12s}
.adm-tact button:hover{border-color:var(--v);color:var(--v)}
.adm-tact button.danger:hover{border-color:var(--red);color:var(--red)}
/* Пагинация */
.adm-pages{display:flex;align-items:center;gap:6px;padding:12px 0 4px;flex-wrap:wrap}
.adm-page-btn{padding:5px 10px;border-radius:7px;border:1.5px solid var(--b1);
background:var(--wh);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.adm-page-btn:hover{border-color:var(--v);color:var(--v)}
.adm-page-btn.on{background:var(--v);color:#fff;border-color:var(--v)}
.adm-page-btn:disabled{opacity:.35;cursor:default}
.adm-page-info{font-size:11px;color:var(--t3);margin-left:auto}
/* Строка итогов */
.adm-summary-row{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1.5px solid var(--b1);margin-bottom:10px}
.adm-summary-chip{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;
background:var(--bg);border:1px solid var(--b1);font-size:11px;font-weight:600;color:var(--t1)}
.adm-summary-chip b{color:var(--v)}
/* Быстрые действия */
.adm-bulk{display:flex;align-items:center;gap:8px;padding:8px 0;flex-wrap:wrap}
.adm-bulk-info{font-size:11px;font-weight:600;color:var(--v)}
.adm-bulk-btn{padding:5px 12px;border-radius:7px;border:1.5px solid var(--b1);
background:var(--wh);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer}
.adm-bulk-btn:hover{border-color:var(--v);color:var(--v)}
.adm-bulk-btn.danger:hover{border-color:var(--red);color:var(--red)}
/* Чекбоксы */
.adm-table td:first-child,.adm-table th:first-child{width:32px;padding:8px 8px 8px 12px}
input.adm-cb{width:14px;height:14px;cursor:pointer;accent-color:var(--v)}
/* Экспорт */
.adm-export-btn{padding:5px 12px;border-radius:7px;border:1.5px solid var(--b1);
background:var(--wh);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;
display:inline-flex;align-items:center;gap:5px}
.adm-export-btn:hover{border-color:var(--grn);color:var(--grn)}
/* ── A11Y + Мобильность ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--v);outline-offset:2px;border-radius:4px}
@media(hover:hover){.card:hover{box-shadow:0 8px 32px rgba(0,0,0,.14);transform:translateY(-1px)}}
@media(hover:none){.card:active{opacity:.9}}
@supports(padding:env(safe-area-inset-bottom)){
body{padding-bottom:env(safe-area-inset-bottom)}
.top{padding-top:env(safe-area-inset-top)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (hover: hover) { .card:hover { box-shadow: var(--sh2); } }
@media print{
.top,.tnav,.login-btn,.reg-btn,.map-wrap,.side,.fab,.mob-nav{display:none!important}
body{font-size:12pt;color:#000;background:#fff}
.det{position:static;box-shadow:none;border:1px solid #ccc}
}
/* ── Bottom Sheet ── */
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--wh);border-radius:20px 20px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.15);z-index:1300;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;max-height:85vh;overflow-y:auto;overscroll-behavior:contain}
.bottom-sheet.open{transform:translateY(0)}
.bs-handle{width:40px;height:4px;background:var(--b2);border-radius:2px;margin:10px auto 4px}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE (tablet 1024, tablet-s 768, phone 480, small 360)
═══════════════════════════════════════════════════════════════ */
/* Кнопка открытия боковой панели (списка уборщиков) на мобильных.
bottom смещён вверх, чтобы не пересекаться с легендой .map-leg (~140px высотой). */
.mobile-side-toggle{
display:none;position:fixed;bottom:calc(220px + env(safe-area-inset-bottom, 0px));right:16px;z-index:1200;
width:56px;height:56px;border-radius:50%;
background:var(--v);color:#fff;border:none;cursor:pointer;
box-shadow:0 6px 20px rgba(90,95,255,.45);
font-size:22px;align-items:center;justify-content:center;
transition:transform .2s;
}
.mobile-side-toggle:active{transform:scale(.92)}
.mobile-side-toggle .badge{
position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;
background:#F43F5E;color:#fff;font-size:11px;font-weight:800;
border-radius:10px;border:2px solid #fff;padding:0 5px;
display:flex;align-items:center;justify-content:center;line-height:1;
}
/* Прозрачный оверлей под боковой при открытой панели (на мобильных) */
.side-overlay{
display:none;position:fixed;inset:0;background:rgba(15,12,41,.45);
z-index:999;backdrop-filter:blur(2px);animation:fi .2s ease;
}
.side-overlay.on{display:block}
/* ─────── 1024px — планшеты, уменьшаем боковую ─────── */
@media (max-width: 1024px){
.side{width:-moz-fit-content;width:fit-content;min-width:380px;max-width:470px}
.top{height:72px;padding:0 12px;gap:6px}
.logo img{height:calc(72px * 0.85)}
.chip{padding:5px 11px;font-size:14px}
.auth-card{padding:28px 26px;width:400px}
}
/* ─────── 1100px — планшеты и узкие окна десктопа ─────── */
/* Под этим брейкпоинтом большие кнопки топа начинают наезжать друг на друга,
поэтому всё схлопываем в бургер-меню, а боковой список уборщиков — в выезжающий sheet (FAB 🧹). */
@media (max-width: 1100px){
/* Боковая панель превращается в выезжающий sheet справа.
Правила ОЧЕНЬ агрессивные (всё через !important) —
защита от любых родительских overflow/transform/z-index конфликтов. */
.side{
position:fixed !important;
top:64px !important; /* под top-баром (высота top на мобильных) */
right:0 !important; bottom:0 !important; left:auto !important;
width:min(420px, 88vw) !important;
min-width:0 !important; /* перекрываем 420px из базового */
max-width:100vw !important;
height:auto !important; max-height:none !important;
transform:translateX(105%) !important; /* 105% чтобы совсем за край */
transition:transform .3s cubic-bezier(.4,0,.2,1) !important;
z-index:1100 !important;
box-shadow:-6px 0 24px rgba(0,0,0,.18) !important;
visibility:visible !important;
pointer-events:auto !important;
display:flex !important;
overflow-y:auto !important;
}
.side.open{transform:translateX(0) !important}
.mobile-side-toggle{display:flex}
.app-main{flex-direction:column}
.map-wrap{width:100%;min-width:0}
/* ━━━ Легенда статуса остаётся видимой, но компактная ━━━
FAB 🧹 поднимается НАД легендой, чтобы не пересекались. */
.map-leg{
right:8px !important; bottom:calc(70px + env(safe-area-inset-bottom, 0px)) !important;
padding:8px 10px !important;
font-size:11px !important;
z-index:20 !important;
}
.map-leg .ml-tit{font-size:9px !important;margin-bottom:4px !important}
.map-leg .ml-row{gap:5px !important;padding:1px 0 !important}
.map-leg .ml-dot{width:8px !important;height:8px !important}
.map-btns{left:8px !important; top:8px !important; gap:4px !important}
.map-btns .mb{width:42px !important; height:42px !important; font-size:19px !important}
.mb-burger{display:flex !important}
.mb-collapsible{
display:none !important;
animation:mbFadeIn .18s ease;
}
.mb-collapsible.open{display:flex !important}
@keyframes mbFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Top-бар компактнее */
/* На узких экранах чипы статуса занимают слишком много места в топбаре
и могут выталкивать логотип/кнопки. Функция дублируется легендой на карте. */
.top .chips, .top #chips{display:none !important}
.top{height:64px;padding:0 10px;gap:4px;overflow:visible}
.logo{font-size:14px}
.logo img{height:calc(64px * 0.78)}
.chips{flex-shrink:0}
.chip{padding:4px 10px;font-size:13px}
.chip .cdot{width:5px;height:5px}
/* Кнопка города — только иконка, без текста "Санкт-Петербург" */
.city-btn{padding:7px 10px;font-size:14px;margin-left:4px}
.city-btn #cityBtnLabel{display:none}
/* Auth-модалка на весь экран почти */
.auth-card{padding:24px 22px;border-radius:18px;width:380px;max-width:calc(100vw - 32px)}
.auth-logo{margin:-24px -22px 18px -22px;padding:16px 22px}
/* Карточки уборщика — чуть меньше */
.card{padding:10px 12px}
.card-nm{font-size:14px}
.card-sp{font-size:11px}
/* Bell-panel + modal центруются нормально на узких */
.bell-panel{width:min(360px, calc(100vw - 20px))}
.modal{width:min(360px, calc(100vw - 24px))}
}
/* ─────── 480px — мобильный, ландшафт/портрет ─────── */
@media (max-width: 480px){
/* Ещё плотнее top-бар; прячем логотип-текст, оставляем иконку */
.top{height:68px;padding:0 8px;gap:4px}
.logo img{height:calc(58px * 0.8)}
.logo-nm{display:none !important}
.logo{font-size:12px;gap:5px}
/* Кнопки в топе — круглые, без текста */
.login-btn, .reg-btn{padding:7px 12px;font-size:12px}
/* Боковая — почти на весь экран */
.side{width:92vw !important;top:58px !important}
/* Карта: добавим внутренние отступы для управления кнопок */
.map-wrap{min-height:calc(100dvh - 58px)}
/* Auth — padding ужимаем ещё */
.auth-card{padding:22px 18px;border-radius:16px}
.auth-logo{margin:-22px -18px 16px -18px;padding:14px 18px}
.auth-tabs{margin-bottom:14px}
/* Регистрация — role-row в столбик на узких */
.role-row{flex-wrap:wrap}
/* Админ-таблица становится скроллируемой, а не ломается */
.adm-table{font-size:11px;min-width:700px}
.adm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* FAB/mobile-side-toggle чуть меньше, над легендой */
.mobile-side-toggle{width:52px;height:52px;right:14px;bottom:calc(260px + env(safe-area-inset-bottom, 0px));font-size:20px}
/* Отзывы — компактнее */
.rev-ava{width:34px !important;height:34px !important}
/* Карточки chip */
.chip{padding:4px 8px;font-size:12px;gap:4px}
}
/* ─────── 360px — узкие телефоны (iPhone SE первого гена) ─────── */
@media (max-width: 360px){
.top{height:62px;padding:0 6px;gap:3px}
.logo img{height:calc(54px * 0.8)}
.chip{padding:3px 7px;font-size:11px}
.chip .cdot{width:4px;height:4px}
.auth-card{padding:18px 14px;border-radius:14px}
.auth-logo{margin:-18px -14px 14px -14px;padding:12px 14px}
.card{padding:8px 10px}
.card-nm{font-size:13px}
.card-sp{font-size:10px}
.login-btn, .reg-btn{padding:6px 9px;font-size:11px}
.cab-tab{padding:8px 10px;font-size:11px}
.mobile-side-toggle{width:48px;height:48px;font-size:18px;bottom:calc(250px + env(safe-area-inset-bottom, 0px))}
}
/* ═══════════════════════════════════════════════════════════════
ДЕТАЛЬНАЯ КАРТОЧКА УБОРЩИКА (.det)
На desktop: sheet справа 420px
На tablet/mobile (≤1100px): bottom sheet на всю ширину, выезжает снизу
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
.det{
top:72px; left:auto; right:12px; bottom:0;
width:min(520px, calc(100vw - 24px)); max-width:100%;
height:auto; max-height:none;
border-left:none; border-top-left-radius:20px; border-top-right-radius:20px;
transform:translateY(100%);
box-shadow:0 -8px 32px rgba(0,0,0,.22);
padding-bottom:env(safe-area-inset-bottom); /* safe-area для iPhone X+ и Android-жестов */
z-index:1100; /* Выше .top (z-index:1000) */
}
.det.open{transform:translateY(0)}
/* Ручка для свайпа сверху — поверх canvas-а, но над контентом прозрачная */
.det::before{
content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
width:40px; height:4px; border-radius:2px; background:rgba(255,255,255,.55); z-index:10;
pointer-events:none;
}
.det-hero{padding-top:14px}
.det-cv{height:64px}
/* Кнопка «назад» — крупнее для пальца и у правого края:
на телефоне до левого верхнего угла тянуться неудобно */
.det-back{width:32px;height:32px;font-size:14px;order:9;margin-left:auto}
.det-br{top:14px}
/* Аватар — опустим чтобы не обрезался сверху */
.det-aw{margin-top:-22px !important}
.det-ava{width:72px;height:72px}
/* Имя и спец — покрупнее, с нормальными отступами */
.det-name{font-size:17px}
.det-spec{font-size:13px}
/* Контент прокручивается, safe-area для iPhone. .det-foot в той же flex-колонке
автоматически не перекрывает контент, поэтому дополнительный padding-bottom не нужен. */
.det-body{
padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px)) !important;
-webkit-overflow-scrolling:touch;
}
/* Вкладки — компактнее, чтобы три (Профиль/Отзывы/Наблюдение) влезли без переноса */
.dt-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dt-tabs::-webkit-scrollbar{display:none}
/* Кнопки-действия по всей ширине с wrap */
.det .det-actions, .det .btn-row{flex-wrap:wrap;gap:6px}
.det .det-actions > *, .det .btn-row > *{flex:1 1 calc(50% - 3px); min-width:0}
/* FAB 🧹 скрываем когда открыта карточка, панель уборщиков, кабинет, админка или бургер-меню — чтобы не перекрывал */
.det.open ~ .mobile-side-toggle,
body:has(.det.open) .mobile-side-toggle,
.side.open ~ .mobile-side-toggle,
body:has(.side.open) .mobile-side-toggle,
body:has(.cab-ov.on) .mobile-side-toggle,
body:has(.adm-ov.on) .mobile-side-toggle,
body:has(.auth-ov.on) .mobile-side-toggle,
body:has(.top-menu.on) .mobile-side-toggle{display:none !important}
}
@media (max-width: 480px){
.det{top:68px;left:0;right:0;width:100%;height:auto;max-height:none;border-top-left-radius:16px;border-top-right-radius:16px;transform:translateY(100%)}
.det.open{transform:translateY(0)}
.det-cv{height:56px}
.det-ava{width:64px;height:64px}
.det-name{font-size:16px}
}
/* ═══════════════════════════════════════════════════════════════
ПЛАНШЕТНЫЙ РЕЖИМ КАБИНЕТА (769-1100px)
Прижат к правому краю, ~520px, как карточка уборщика
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) and (min-width: 769px){
.cab-ov{align-items:stretch;justify-content:flex-end;padding:0}
.cabinet{
width:min(520px, calc(100vw - 24px));
min-width:0;
max-width:100vw;
height:100dvh;
max-height:100dvh;
border-radius:0;
box-shadow:-4px 0 24px rgba(0,0,0,.22);
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
}
/* ═══════════════════════════════════════════════════════════════
КАБИНЕТ ПОЛЬЗОВАТЕЛЯ (.cabinet)
На desktop: modal 50vw, center
На tablet: modal 96vw
На mobile: fullscreen с safe-area
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
.cab-ov{align-items:stretch;padding:0}
.cabinet{
width:100vw; min-width:0; max-width:100vw;
height:100dvh; max-height:100dvh;
border-radius:0;
box-shadow:none;
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.cab-head{padding:12px 14px}
.cab-ava-row{margin-bottom:8px}
.cab-x{top:10px; right:10px; width:34px; height:34px; font-size:15px}
/* Вкладки — горизонтальный скролл */
.cab-tabs-wrap, #cleanerTabs, .cab-tabs{
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
flex-wrap:nowrap !important;
}
.cab-tabs-wrap::-webkit-scrollbar, #cleanerTabs::-webkit-scrollbar{display:none}
.cab-tab{flex-shrink:0; white-space:nowrap; padding:10px 14px; font-size:12px}
/* Grid внутри кабинета: 2 колонки → 1 (кроме .cab-stats — там 3 компактные плашки) */
.cab-grid, .cab-row-2col{grid-template-columns:1fr !important}
}
@media (max-width: 480px){
.cab-tab{padding:9px 11px; font-size:11px}
.cab-photo-wrap img.user-ava-large, .cab-ava-row img{width:60px !important;height:60px !important}
}
/* ═══════════════════════════════════════════════════════════════
ПАНЕЛЬ АДМИНИСТРАТОРА (.adm-panel)
На desktop: modal 1200px, 95vh
На tablet: modal 98vw
На mobile: fullscreen с вкладками-скроллом
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
.adm-panel{width:98vw; max-width:98vw}
}
@media (max-width: 768px){
.adm-ov{padding-top:0; align-items:stretch}
.adm-panel{
width:100vw; max-width:100vw;
height:100dvh; max-height:100dvh;
border-radius:0;
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.adm-head{padding:12px 14px; flex-wrap:wrap}
.adm-logo{width:28px;height:28px;font-size:14px}
.adm-head > div:first-of-type, .adm-head h2{font-size:14px}
/* Вкладки админки — горизонтальный скролл */
.adm-tabs, .adm-tabs-wrap{
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
flex-wrap:nowrap !important;
}
.adm-tabs::-webkit-scrollbar, .adm-tabs-wrap::-webkit-scrollbar{display:none}
.adm-tab{flex-shrink:0; white-space:nowrap; padding:9px 12px; font-size:11px}
/* Карточки внутри вкладок */
.adm-card{padding:10px 12px}
.adm-cl-name, .adm-user-name, .adm-rev-nm{font-size:12px}
/* Таблицы делаем скроллируемыми */
.adm-table-wrap, [class*="adm-table"]{overflow-x:auto; -webkit-overflow-scrolling:touch}
.adm-table{min-width:640px; font-size:11px}
/* Grid 2 колонки → 1 */
.adm-stats, .adm-grid{grid-template-columns:1fr !important}
/* Обзор: карточки-индикаторы в 2 колонки */
.adm-overview-cards{grid-template-columns:repeat(2,1fr) !important; gap:8px}
}
@media (max-width: 480px){
.adm-head{padding:10px 12px}
.adm-tab{padding:8px 10px; font-size:10px}
/* Обзор: в 1 колонку на узких */
.adm-overview-cards{grid-template-columns:1fr !important}
/* Формы в споре: 2 колонки → 1 */
.adm-panel [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
/* Кнопки-действия внутри спора/отзыва переносим */
.adm-panel .btn-row, .adm-panel [style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap}
}
/* ─────── Альбомная ориентация на низких экранах ─────── */
@media (max-height: 500px) and (orientation: landscape){
.top{height:52px}
.logo img{height:calc(52px * 0.78)}
.auth-card{max-height:96vh;overflow-y:auto}
.cabinet, .adm-panel{height:100dvh; max-height:100dvh}
.det{top:52px;height:auto;max-height:none}
}
/* ─────── Touch-устройства: увеличиваем tap-targets ─────── */
@media (hover: none) and (pointer: coarse){
.chip{min-height:36px}
.cab-tab{min-height:40px}
.adm-tab{min-height:40px}
button:not(.auth-x):not(.mb):not(.bell-btn):not(.adm-btn):not(.cab-x){min-height:36px}
}
/* ═══════════════════════════════════════════════════════════════
МЕНЮ ДЛЯ МОБИЛЬНЫХ — открывается из шапки боковой панели
Кнопка «⋯» в заголовке .side, видна ТОЛЬКО когда .side открыта
═══════════════════════════════════════════════════════════════ */
/* Мини-кнопка Войти/Кабинет в top-баре на мобильных */
.top-quick-btn{
display:none; /* на desktop скрыта — там обычные Войти/Регистрация */
position:relative;flex-shrink:0;
width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
border:none;color:#fff;cursor:pointer;padding:0;margin-left:auto;
align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(90,95,255,.35);
transition:transform .2s, box-shadow .25s;
}
.top-quick-btn:hover{box-shadow:0 5px 14px rgba(90,95,255,.5);transform:translateY(-1px)}
.top-quick-btn:active{transform:scale(.94)}
.top-quick-btn .tqb-ic{
font-size:20px;line-height:1;display:block;pointer-events:none;
}
.top-quick-btn .tqb-badge{
position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
background:#F43F5E;color:#fff;font-size:9px;font-weight:800;
border-radius:8px;border:2px solid #fff;padding:0 4px;
align-items:center;justify-content:center;display:none;line-height:1;
z-index:2;
}
/* Кнопка меню ⋯ в шапке боковой панели (только мобильные) */
.sh-menu-btn{
display:none !important; /* СКРЫТА ВСЕГДА — функции дублируются FAB 🧹 (список уборщиков) и topBurger М (меню) */
width:34px;height:34px;border-radius:10px;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
border:none;color:#fff;cursor:pointer;padding:0;
align-items:center;justify-content:center;flex-shrink:0;
box-shadow:0 2px 8px rgba(90,95,255,.35);
transition:transform .2s, box-shadow .25s;
position:relative;margin-left:8px;
}
.sh-menu-btn:hover{box-shadow:0 4px 12px rgba(90,95,255,.5);transform:translateY(-1px)}
.sh-menu-btn:active{transform:scale(.94)}
.sh-menu-ic{
font-size:18px;font-weight:800;line-height:1;
display:block;pointer-events:none;letter-spacing:-1px;
}
.sh-menu-badge{
position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
background:#F43F5E;color:#fff;font-size:9px;font-weight:800;
border-radius:8px;border:2px solid #fff;padding:0 4px;
align-items:center;justify-content:center;display:none;line-height:1;
z-index:2;
}
.top-menu-overlay{
display:none;position:fixed;inset:0;background:rgba(15,12,41,.35);
backdrop-filter:blur(3px);z-index:1090;animation:fi .2s ease;
}
.top-menu-overlay.on{display:block}
.top-menu{
position:fixed;top:0;right:0;bottom:auto;
width:min(320px, 85vw);max-height:100dvh;overflow-y:auto;
background:var(--wh);border-left:1.5px solid var(--b1);
box-shadow:-6px 0 24px rgba(0,0,0,.18);
z-index:1100;transform:translateX(100%);
transition:transform .3s cubic-bezier(.4,0,.2,1);
display:flex;flex-direction:column;
padding-top:env(safe-area-inset-top);
padding-bottom:env(safe-area-inset-bottom);
}
.top-menu.on{transform:translateX(0)}
.top-menu .tm-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;border-bottom:1.5px solid var(--b1);flex-shrink:0;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);color:#fff;
}
.top-menu .tm-title{font-size:16px;font-weight:800;letter-spacing:.2px}
.top-menu .tm-close{
width:32px;height:32px;border-radius:8px;border:none;
background:rgba(255,255,255,.15);color:#fff;font-size:14px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
}
.top-menu .tm-close:hover{background:rgba(255,255,255,.25)}
.top-menu .tm-body{padding:10px;display:flex;flex-direction:column;gap:4px}
.top-menu .tm-item{
display:flex;align-items:center;gap:12px;
padding:12px 14px;border-radius:10px;cursor:pointer;
font-size:14px;font-weight:600;color:var(--t1);
background:transparent;border:none;text-align:left;
transition:background .15s;
position:relative;
}
.top-menu .tm-item:hover{background:var(--bg)}
.top-menu .tm-item .tm-ic{font-size:18px;width:26px;text-align:center;flex-shrink:0}
.top-menu .tm-item.primary{
background:linear-gradient(135deg,#5A5FFF,#7C3AED);color:#fff;
font-weight:700;box-shadow:0 4px 14px rgba(90,95,255,.3);
}
.top-menu .tm-item.primary:hover{filter:brightness(1.08)}
.top-menu .tm-item .tm-badge{
margin-left:auto;min-width:20px;height:20px;
background:#F43F5E;color:#fff;font-size:10px;font-weight:800;
border-radius:10px;padding:0 6px;
display:flex;align-items:center;justify-content:center;line-height:1;
}
.top-menu .tm-user{
display:flex;align-items:center;gap:10px;padding:12px 14px;
background:linear-gradient(135deg,#EEF0FF,#F5F4FF);border-radius:10px;
margin-bottom:6px;cursor:pointer;
}
.top-menu .tm-user img{
width:42px;height:42px;border-radius:10px;object-fit:cover;flex-shrink:0;
}
.top-menu .tm-user .tm-user-nm{font-size:14px;font-weight:700;color:var(--t1);line-height:1.2}
.top-menu .tm-user .tm-user-rl{font-size:11px;color:var(--t3);margin-top:2px}
.top-menu .tm-divider{height:1px;background:var(--b1);margin:8px 4px;border:none}
/* Строка статистики уборщиков в бургер-меню */
.top-menu .tm-stats{display:flex;gap:6px;padding:4px 4px;flex-wrap:wrap}
.top-menu .tm-stat{flex:1;min-width:80px;display:flex;align-items:center;gap:5px;
padding:6px 10px;border-radius:10px;font-size:12px;font-weight:700;
white-space:nowrap;justify-content:center}
.top-menu .tm-stat-dot{width:7px;height:7px;border-radius:50%}
.top-menu .tm-stat.g{background:#E6FBF3;color:#0A9B6A;border:1px solid #B0EDD9}
.top-menu .tm-stat.g .tm-stat-dot{background:#10B981}
.top-menu .tm-stat.a{background:#FFF8EA;color:#C07A00;border:1px solid #FFD98A}
.top-menu .tm-stat.a .tm-stat-dot{background:#F59F1C}
.top-menu .tm-stat.o{background:#F1EFE8;color:#5F5E5A;border:1px solid #D3D1C7}
.top-menu .tm-stat.o .tm-stat-dot{background:#888780}
/* Свитч «Принимаю заказы» внутри бургер-меню */
.top-menu .tm-toggle-item{user-select:none}
.top-menu .tm-tg-pill{
margin-left:auto;flex-shrink:0;
width:38px;height:22px;border-radius:11px;
background:#D4D6E5;position:relative;
transition:background .2s;
}
.top-menu .tm-tg-pill.on{background:linear-gradient(135deg,#10B981,#059669)}
.top-menu .tm-tg-thumb{
position:absolute;top:2px;left:2px;
width:18px;height:18px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.top-menu .tm-tg-pill.on .tm-tg-thumb{transform:translateX(16px)}
/* ═══ Кнопка-гамбургер «М» в топ-баре (только ≤1100px) ═══ */
.top-burger{
display:none; /* на desktop скрыто; показывается через @media ниже */
position:relative;flex-shrink:0;
width:40px;height:40px;border-radius:10px;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
border:none;color:#fff;
cursor:pointer;padding:0;
align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(90,95,255,.32);
transition:transform .2s, box-shadow .25s;
font-family:'Manrope','Inter',sans-serif;
}
.top-burger:hover{
box-shadow:0 6px 18px rgba(90,95,255,.45);
transform:translateY(-1px);
}
.top-burger:active{transform:scale(.94)}
.top-burger .burger-letter{
font-family:inherit;font-size:19px;font-weight:800;line-height:1;
letter-spacing:-.5px;display:block;pointer-events:none;
text-shadow:0 1px 2px rgba(0,0,0,.12);
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.top-burger.open .burger-letter{transform:rotate(360deg) scale(.85)}
.top-burger .burger-badge{
position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
background:#F43F5E;color:#fff;font-size:10px;font-weight:800;
border-radius:9px;border:2px solid #fff;padding:0 5px;
align-items:center;justify-content:center;display:none;line-height:1;z-index:2;
}
/* На узких экранах (и на мобильном, и на узком окне ПК) скрываем все большие кнопки топа,
оставляем только компактные:
- 👤 topQuickBtn (Войти/Кабинет)
- М topBurger (Меню)
Список уборщиков открывается через FAB 🧹 в правом нижнем углу.
Брейкпоинт 1100px — чтобы схлопывать ДО того как иконки начинают наезжать друг на друга. */
@media (max-width: 1100px){
.top{overflow:visible !important; gap:4px;}
.top .fb-btn,
.top .login-btn,
.top .reg-btn,
.top #bellBtn,
.top #admBtn,
.top .user-btn,
.top .tnav,
.top .top-toggle,
.top .chips,
.top #chips,
.top .city-btn,
.top #cityBtn,
.top #sideToggleBtn,
.top #topToggle{display:none !important}
/* Показываем компактные мобильные кнопки */
.top-burger, #topBurger{display:inline-flex !important; margin-left:auto}
/* .top-quick-btn, #topQuickBtn{display:inline-flex !important} — скрыто, дублирует topBurger */
/* Меню ⋯ в шапке боковой панели — скрываем, т.к. дублирует topBurger */
.sh-menu-btn{display:none !important}
}
/* === AUDIT_FIX_HIDE_MAP_BURGER 20260429-235139 === скрываем кнопку "М" и пустую группу */
#mapBurgerBtn,
#mapBurgerGroup {
display: none !important;
}
/* === AUDIT_FIX_FAB_MEDIA 20260429-235613 === FAB на узких экранах, панель на широких */
/* === AUDIT_FIX_FAB_AT_2LINES 20260430-001002 === брейкпоинт поднят с 900px до 1100px */
@media (max-width: 1100px) {
#mapFiltersPanel { display: none !important; }
#mapFiltersFab { display: flex !important; }
}
@media (min-width: 1101px) {
#mapFiltersFab { display: none !important; }
#mapFiltersPanel { display: block !important; }
}
/* === AUDIT_FIX_FAB_V2 20260430-065205 === FAB управляется только media-query, перебиваем JS-inline */
@media (max-width: 1440px) {
#mapFiltersFab[id] { display: none !important; }
#mapFiltersPanel[id] { display: none !important; }
}
@media (min-width: 1441px) {
#mapFiltersFab[id] { display: none !important; }
/* старая панель фильтров над картой убрана — фильтры живут в шапке списка уборщиков */
#mapFiltersPanel[id] { display: none !important; }
}
/* ─── Block #2 (был на строке ~15848, 4010 chars) ─── */
.ob-ov{
position:fixed;inset:0;z-index:9999;background:rgba(15,12,41,.82);
backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;
padding:20px;animation:fi .3s ease;
}
.ob-ov.on{display:flex}
.ob-card{
background:linear-gradient(145deg,#1a1740,#211e50);
border:1px solid rgba(255,255,255,.13);border-radius:22px;
width:100%;max-width:480px;max-height:92vh;overflow-y:auto;
box-shadow:0 32px 80px rgba(0,0,0,.55);animation:ci .35s cubic-bezier(.34,1.56,.64,1);
color:#fff;
}
.ob-head{
padding:24px 24px 16px;text-align:center;position:relative;
border-bottom:1px solid rgba(255,255,255,.08);
}
.ob-skip{
position:absolute;top:14px;right:14px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);
font-size:12px;padding:6px 12px;border-radius:14px;cursor:pointer;transition:all .2s;
}
.ob-skip:hover{background:rgba(255,255,255,.15);color:#fff}
.ob-body{padding:20px 24px 22px}
.ob-step-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ob-step-num{
width:36px;height:36px;border-radius:50%;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
display:flex;align-items:center;justify-content:center;
font-size:16px;font-weight:800;flex-shrink:0;
box-shadow:0 4px 14px rgba(90,95,255,.4);
}
.ob-step-title{font-size:18px;font-weight:800;color:#fff;line-height:1.3}
.ob-step-desc{font-size:13px;line-height:1.6;color:rgba(255,255,255,.75);margin-bottom:14px}
.ob-features{list-style:none;padding:0;margin:0 0 8px}
.ob-features li{
padding:10px 14px;margin-bottom:6px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
border-radius:10px;display:flex;align-items:flex-start;gap:10px;
font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.88);
}
.ob-features li .ic{font-size:18px;line-height:1;flex-shrink:0;margin-top:-1px}
.ob-dots{display:flex;gap:6px;justify-content:center;margin:18px 0 14px}
.ob-dot{
width:7px;height:7px;border-radius:50%;
background:rgba(255,255,255,.2);transition:all .25s;
}
.ob-dot.on{background:#5A5FFF;width:22px;border-radius:4px}
.ob-nav{display:flex;gap:8px;margin-top:6px}
.ob-btn{
flex:1;padding:13px;border-radius:11px;border:none;cursor:pointer;
font-size:14px;font-weight:700;transition:all .2s;
}
.ob-btn-secondary{
background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);
border:1px solid rgba(255,255,255,.12);
}
.ob-btn-secondary:hover{background:rgba(255,255,255,.15)}
.ob-btn-primary{
background:linear-gradient(135deg,#5A5FFF,#7C3AED);color:#fff;
box-shadow:0 6px 18px rgba(90,95,255,.35);
}
.ob-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(90,95,255,.5)}
.ob-role-row{display:flex;gap:10px;margin-top:4px}
.ob-role-btn{
flex:1;padding:18px 14px;border-radius:14px;
background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.08);
color:#fff;cursor:pointer;transition:all .22s;text-align:center;
font-size:13px;font-weight:700;
}
.ob-role-btn:hover{background:rgba(255,255,255,.12);border-color:#5A5FFF;transform:translateY(-2px)}
.ob-role-btn.active{background:rgba(90,95,255,.15);border-color:#5A5FFF;box-shadow:0 0 0 4px rgba(90,95,255,.1)}
.ob-role-btn .role-ic{font-size:28px;display:block;margin-bottom:6px}
.ob-logo{
width:54px;height:54px;border-radius:14px;
background:linear-gradient(135deg,#5A5FFF,#7C3AED);
display:flex;align-items:center;justify-content:center;font-size:28px;
margin:0 auto 10px;box-shadow:0 8px 24px rgba(90,95,255,.4);
}
.ob-welcome-title{font-size:22px;font-weight:800;margin-bottom:6px}
.ob-welcome-sub{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5}
@media (max-width: 480px){
.ob-card{border-radius:18px;max-height:94vh}
.ob-head{padding:20px 20px 14px}
.ob-body{padding:18px 20px 20px}
.ob-step-title{font-size:16px}
.ob-step-desc{font-size:12px}
.ob-features li{font-size:11.5px;padding:9px 12px}
.ob-role-btn{padding:14px 10px}
.ob-role-btn .role-ic{font-size:24px}
}
/* ─── Block #3 (был на строке ~16274, 1360 chars) ─── */
#mapFiltersDrawer {
position:fixed; top:0; right:0; width:340px; max-width:100vw; height:100vh;
background:#fff; box-shadow:-8px 0 32px rgba(0,0,0,.18);
transform:translateX(100%); transition:transform .25s ease;
z-index:9000; display:flex; flex-direction:column;
font-family:'Manrope', sans-serif;
}
#mapFiltersDrawer.on { transform:translateX(0); }
#mapFiltersDrawerBackdrop {
position:fixed; inset:0; background:rgba(20,24,40,.45); z-index:8999;
opacity:0; pointer-events:none; transition:opacity .25s ease;
}
#mapFiltersDrawerBackdrop.on { opacity:1; pointer-events:auto; }
#mapFiltersDrawer .mfd-head {
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid var(--b1);
}
#mapFiltersDrawer .mfd-title { font-size:15px; font-weight:800; color:var(--t1); }
#mapFiltersDrawer .mfd-close {
width:32px; height:32px; border-radius:9px; border:1.5px solid var(--b1);
background:var(--bg); cursor:pointer; font-size:14px; color:var(--t2);
}
#mapFiltersDrawer .mfd-body { flex:1; overflow-y:auto; padding:14px 16px; }
#mapFiltersDrawer .mfd-section { margin-bottom:14px; }
#mapFiltersDrawer .mfd-label {
display:block; font-size:11px; color:var(--t2); font-weight:700; margin-bottom:5px;
}
.mb-fab-f { font-size:13px !important; }
/* AUDIT_FIX_TOPBURGER_ABSOLUTE — прижимаем М к правому краю шапки на узких экранах */
@media (max-width: 1100px) {
.top {
position: relative !important;
/* добавляем правый padding чтобы контент не уезжал под иконку */
padding-right: 64px !important;
}
.top-burger,
#topBurger {
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
z-index: 100 !important;
}
/* topQuickBtn (👤) тоже мобильный — но мы его прячем, как сказано в коде */
.top-quick-btn,
#topQuickBtn { display: none !important; }
}
/* AUDIT_FIX_CHAT_SEND_MOBILE_V2 — на узких экранах ужимаем все элементы инпут-бара чата */
@media (max-width: 420px) {
/* Кнопки 🎨 и 📎 уменьшены с 36 до 32 */
button[onclick*="_toggleStickerPicker"],
button[onclick*="_uploadChatFile"] {
width: 32px !important;
height: 32px !important;
font-size: 15px !important;
flex-shrink: 0 !important;
}
/* Контейнер: меньше padding и gap */
div:has(> input[id^="chat-input-"]) {
padding: 8px 6px !important;
gap: 5px !important;
}
/* Кнопка → 38×38 вместо 42×42, чуть отодвинута от края */
div:has(> input[id^="chat-input-"]) > button[onclick*="_sendChatMessage"] {
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
margin-right: 2px !important;
}
/* Инпут гибкий, может ужиматься */
input[id^="chat-input-"] {
min-width: 0 !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
}
/* AUDIT_FIX_CHAT_KEYBOARD — клавиатура не должна закрывать поле ввода */
@media (max-width: 768px) {
/* Popup-контейнер: используем dvh (учитывает клавиатуру) */
#chat-inbox-popup {
height: 100dvh !important;
max-height: 100dvh !important;
}
/* Внутренний шелл: тоже dvh, не 75vh */
#chat-wrapper-shell {
height: 100dvh !important;
max-height: 100dvh !important;
min-height: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* Popup: убираем padding 20px — на мобиле fullscreen нужен */
#chat-inbox-popup {
padding: 0 !important;
}
/* Inbox-right (правая панель с сообщениями) тоже на всю dvh */
#inbox-right {
height: 100dvh !important;
max-height: 100dvh !important;
}
}
/* === Mobile long-press fix v2: блокируем контекстное меню Chrome Android === */
.leaflet-marker-icon,
.leaflet-marker-icon *,
.leaflet-popup-content,
.leaflet-popup-content * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
-webkit-user-drag: none !important;
user-drag: none !important;
}
/* КЛЮЧЕВОЕ: отключаем pointer-events на ![]()
и фоновых картинках внутри маркеров,
чтобы Android не считал их "изображениями" для контекстного меню.
Tap event прокидывается на родитель (div маркера). */
.leaflet-marker-icon img,
.leaflet-popup-content img {
pointer-events: none !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
.leaflet-container,
.leaflet-marker-pane,
.leaflet-overlay-pane,
.leaflet-popup-pane {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
/* Auth form inputs — светлая тема */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="password"],
.auth-form select,
.auth-form textarea {
width: 100%;
background: #F8F9FC !important;
border: 1.5px solid #E8EAF2 !important;
color: #1F2937 !important;
border-radius: 10px;
padding: 10px 12px;
font-size: 13px;
font-family: 'Inter', sans-serif;
box-sizing: border-box;
transition: border-color .15s, background .15s;
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
outline: none;
border-color: var(--v) !important;
background: #ffffff !important;
}
.auth-form input::placeholder { color: #9CA3AF; }
.auth-form label,
.auth-form .auth-label,
.auth-form .fl {
color: #4B5563 !important;
font-size: 11px;
font-weight: 600;
margin-bottom: 4px;
display: block;
}
.auth-form .fg { margin-bottom: 11px; }
/* Кнопки выбора роли (если есть) */
.auth-form .role-btn,
.auth-form .auth-role,
.auth-form button[data-role] {
background: #F8F9FC !important;
border: 1.5px solid #E8EAF2 !important;
color: #1F2937 !important;
}
.auth-form .role-btn.on,
.auth-form .auth-role.on,
.auth-form button[data-role].on {
background: linear-gradient(135deg, var(--v), var(--v2)) !important;
color: #fff !important;
border-color: transparent !important;
}
/* === AUTH LIGHT THEME: фикс белых букв в OTP-форме и других местах === */
#authOv .auth-form [style*="rgba(255,255,255,.85)"],
#authOv .auth-form [style*="rgba(255,255,255,.7)"],
#authOv .auth-form [style*="rgba(255,255,255,.5)"],
#authOv .auth-form [style*="rgba(255,255,255,.4)"],
#authOv .auth-form [style*="rgba(255, 255, 255,"] {
color: #1B1E30 !important;
}
#authOv .auth-form [style*="rgba(255,255,255,.5)"][style*="cursor:pointer"],
#authOv .auth-form [style*="rgba(255,255,255,.4)"] {
color: #6B7280 !important;
}
/* Заголовки и подсказки шагов */
#authOv .auth-form [style*="font-weight:700"][style*="rgba(255,255,255"] {
color: #4B5280 !important;
}
/* OTP-инпуты — тёмный текст */
#authOv .otp-digit {
color: #1B1E30 !important;
background: #F8F9FC !important;
border-color: #E8EAF2 !important;
}
#authOv .otp-digit:focus {
background: #fff !important;
border-color: var(--v) !important;
}
/* Resend и подобные ссылки */
#authOv .auth-form a[onclick] {
color: var(--v) !important;
}
/* === ONBOARDING: светлая тема === */
.ob-card {
background: #ffffff !important;
border: 1.5px solid #E8EAF2 !important;
box-shadow: 0 24px 60px rgba(15,12,41,.18) !important;
}
.ob-head {
background: linear-gradient(135deg, #F8F9FC, #ffffff) !important;
border-bottom: 1px solid #E8EAF2 !important;
}
.ob-welcome-title {
color: #1B1E30 !important;
}
.ob-welcome-sub {
color: #6B7280 !important;
}
.ob-skip {
background: #F2F4FA !important;
color: #4B5280 !important;
border: 1px solid #E8EAF2 !important;
}
.ob-skip:hover {
background: #E5E7EB !important;
color: #1B1E30 !important;
}
.ob-logo {
background: linear-gradient(135deg, #5A5FFF, #7C3AED) !important;
box-shadow: 0 8px 20px rgba(90,95,255,.3) !important;
}
.ob-step-title {
color: #1B1E30 !important;
}
.ob-step-desc {
color: #4B5280 !important;
}
.ob-features li {
background: #F8F9FC !important;
border: 1px solid #E8EAF2 !important;
color: #1B1E30 !important;
}
.ob-dot {
background: #E8EAF2 !important;
}
.ob-dot.on {
background: #5A5FFF !important;
}
.ob-btn-secondary {
background: #F2F4FA !important;
border: 1.5px solid #E8EAF2 !important;
color: #4B5280 !important;
}
.ob-btn-secondary:hover {
background: #E5E7EB !important;
color: #1B1E30 !important;
}
.ob-role-btn {
background: #F8F9FC !important;
border: 1.5px solid #E8EAF2 !important;
color: #1B1E30 !important;
}
.ob-role-btn:hover {
background: #EEF0FF !important;
border-color: #5A5FFF !important;
}
.ob-role-btn.active {
background: #EEF0FF !important;
border-color: #5A5FFF !important;
box-shadow: 0 0 0 4px rgba(90,95,255,.12) !important;
}
.ob-role-btn small {
color: #6B7280 !important;
}
/* === ONBOARDING: светлый расплывчатый glow вокруг карточки === */
.ob-ov {
background: radial-gradient(ellipse 700px 600px at center,
rgba(255,255,255,.35) 0%,
rgba(255,255,255,.18) 30%,
rgba(255,255,255,.06) 55%,
rgba(15,12,41,.55) 85%) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
.ob-card {
box-shadow:
0 0 0 1px rgba(255,255,255,.6),
0 0 80px 30px rgba(255,255,255,.25),
0 24px 80px rgba(15,12,41,.45) !important;
}
/* === ONBOARDING: равномерный полупрозрачный белый фон === */
.ob-ov {
background: rgba(255,255,255,.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
/* === CITY PICKER: полупрозрачный белый фон + светлая шапка === */
.city-ov {
background: rgba(255,255,255,.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.city-card {
border: 1.5px solid #E8EAF2 !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.6),
0 0 80px 30px rgba(255,255,255,.25),
0 24px 80px rgba(15,12,41,.18) !important;
}
.city-head {
background: linear-gradient(135deg, #F8F9FC, #ffffff) !important;
border-bottom: 1px solid #E8EAF2 !important;
}
.city-head-t {
color: #1B1E30 !important;
}
.city-head-s {
color: #6B7280 !important;
}
/* === LOGO SAM: ровная вставка картинки вместо метлы === */
.ob-logo {
padding: 0 !important;
background: #ffffff !important;
border: 1.5px solid #E8EAF2 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.ob-logo img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
padding: 6px;
}
.city-head-ic {
display: flex !important;
justify-content: center !important;
margin-bottom: 8px !important;
}
.city-head-ic img {
background: #ffffff;
border: 1.5px solid #E8EAF2;
}
/* === LOGO SAM: увеличение в 2 раза === */
.ob-logo {
width: 120px !important;
height: 120px !important;
border-radius: 24px !important;
margin: 0 auto 12px !important;
}
.city-head-ic img {
width: 128px !important;
height: 128px !important;
border-radius: 22px !important;
}
/* ═══════════════════════════════════════════════════════════════
FULLSCREEN КАРТОЧКА УБОРЩИКА НА МОБИЛКЕ
(override базовых .det стилей для max-width:1100px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
.det{
top:0 !important;
left:0 !important;
right:0 !important;
bottom:0 !important;
width:100vw !important;
max-width:100vw !important;
height:100vh !important;
height:100dvh !important; /* dvh — динамическая высота, учитывает адресную строку */
max-height:100vh !important;
max-height:100dvh !important;
border-radius:0 !important;
border-top-left-radius:0 !important;
border-top-right-radius:0 !important;
padding-top:env(safe-area-inset-top); /* отступ под нотч */
}
/* Ручку-полоску сверху убираем — это уже не bottom-sheet */
.det::before{ display:none !important; }
}
/* Карточка профиля из чата (#cleaner-profile-modal) — на всю высоту */
@media (max-width: 1100px){
#cleaner-profile-modal > .cp-card{
width:100vw !important;
max-width:100vw !important;
height:100vh !important;
height:100dvh !important;
max-height:100vh !important;
max-height:100dvh !important;
border-radius:0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
ШИРОКАЯ МОДАЛКА НА МОБИЛКЕ
(чтобы нативный time picker Android не обрезался)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px){
.modal{
width:calc(100vw - 16px) !important;
max-width:calc(100vw - 16px) !important;
}
}
.ob-welcome-sub{color:#1a1a1a !important}
/* AUDIT_FIX_TOOLBAR_RIGHT — те же правила, что инжектил chat-btn-right-align.js.
Раньше они приезжали ПОСЛЕ первой отрисовки (defer-скрипт) и двигали кнопки шапки
на 24px — «дёргались» Список/Связь/Контакты. Теперь применяются сразу. */
.top{justify-content:flex-start !important}
#topBurger,#mobSideToggle{margin-left:auto !important;order:0 !important}
#topToggle,#chat-header-btn,.fb-btn,#bellBtn,#userBtn{margin-left:0 !important;order:0 !important}
/* Кнопка «Чаты» создаётся скриптом с font-size:13px/600 — мельче соседей (.fb-btn 17px/700).
Выравниваем; !important, потому что скрипт заново ставит inline-стиль. */
#chat-header-btn{font-size:17px !important;font-weight:700 !important;padding:10px 18px !important;height:auto !important}
#chat-header-btn svg{width:17px !important;height:17px !important}
/* ═══════════════════════════════════════════════════════════════
БУРГЕР-МЕНЮ v2 «профиль-шапка» (вариант A, 20.08.2026)
Старая шапка .tm-head/.tm-title убрана из index.html — вместо неё
.tm-hero с фото профиля. Имена .tm-item/.tm-ic/.tm-badge сохранены
намеренно: их уплотняет mobile-cab.js (.tm-compact/.tm-dense).
═══════════════════════════════════════════════════════════════ */
/* ── шапка-профиль ── */
.top-menu .tm-hero{
position:relative;flex-shrink:0;height:140px;overflow:hidden;
background:linear-gradient(135deg,#2F5BD0,#1E3A8A);
}
/* фото не режем: вписываем целиком по центру, бока закрываем размытым тем же кадром */
.top-menu .tm-hero-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
display:block;z-index:1;
}
.top-menu .tm-hero-bg{
position:absolute;inset:0;background-size:cover;background-position:center;
filter:blur(22px);transform:scale(1.25);z-index:0;
}
.top-menu .tm-hero-shade{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,18,40,.05) 0%,rgba(11,18,40,.35) 45%,rgba(11,18,40,.86) 100%);
}
.top-menu .tm-hero-x{
position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:10px;
border:none;cursor:pointer;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);
color:#fff;display:flex;align-items:center;justify-content:center;z-index:3;
}
.top-menu .tm-hero-x:hover{background:rgba(255,255,255,.3)}
.top-menu .tm-hero-x svg{width:16px;height:16px}
.top-menu .tm-hero-txt{position:absolute;left:14px;right:12px;bottom:11px;color:#fff;z-index:2}
.top-menu .tm-hero-nm{
font-family:'Manrope',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.2px;
display:flex;align-items:center;gap:6px;line-height:1.2;
/* фото вписано целиком и по центру бывает светлым — иначе имя тонет */
text-shadow:0 1px 6px rgba(10,15,30,.75),0 0 2px rgba(10,15,30,.5);
}
.top-menu .tm-hero-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-menu .tm-hero-sub{
font-size:11.5px;font-weight:600;color:rgba(255,255,255,.86);margin-top:3px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
text-shadow:0 1px 5px rgba(10,15,30,.7);
}
.top-menu .tm-rate{
/* Рейтинг со звездой в шапке меню был мельче всего остального и терялся
рядом с именем: увеличен в 1,3 раза вместе со значком. */
margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.18);
backdrop-filter:blur(6px);font-size:15px;font-weight:800;
}
.top-menu .tm-rate{cursor:pointer;-webkit-tap-highlight-color:transparent}
.top-menu .tm-rate:active{transform:scale(.96)}
.top-menu .tm-rate:empty{display:none}
.top-menu .tm-rate svg{width:16px;height:16px;color:#FFC53D;fill:#FFC53D}
/* ── карточка статуса уборщика ── */
.top-menu .tm-status{
margin:10px;padding:11px 12px;border-radius:14px;display:flex;align-items:center;gap:10px;
border:none;background:linear-gradient(135deg,#EDFBF5,#F5FDF9);
cursor:pointer;user-select:none;
}
.top-menu .tm-status.off{background:var(--bg)}
.top-menu .tm-status .tm-st-dot{
width:9px;height:9px;border-radius:50%;background:var(--grn);flex-shrink:0;
box-shadow:0 0 0 4px rgba(17,201,138,.18);
}
.top-menu .tm-status.off .tm-st-dot{background:#9BAFCC;box-shadow:0 0 0 4px rgba(155,175,204,.16)}
.top-menu .tm-status .tm-st-t{font-size:13.5px;font-weight:700;color:#0A8F62;line-height:1.25}
.top-menu .tm-status.off .tm-st-t{color:var(--t2)}
.top-menu .tm-status .tm-st-s{font-size:11px;color:var(--t3);margin-top:2px;font-weight:500}
/* ── акцентная кнопка (клиент / гость) ── */
.top-menu .tm-cta{
display:flex;align-items:center;justify-content:center;gap:8px;
width:calc(100% - 20px);margin:10px;padding:13px 14px;border-radius:14px;border:none;
background:linear-gradient(135deg,var(--hac),#1D4ED8);color:#fff;cursor:pointer;
font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
box-shadow:0 6px 18px rgba(37,99,235,.32);
}
.top-menu .tm-cta:hover{filter:brightness(1.06)}
.top-menu .tm-cta svg{width:17px;height:17px}
/* ── группы ── */
.top-menu .tm-grp-t{
font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
color:var(--t3);padding:12px 18px 6px;
}
.top-menu .tm-sep{height:1px;background:var(--b1);margin:8px 14px 0;border:none}
/* ── пункт меню (переопределяет старые правила выше по файлу) ── */
.top-menu .tm-item{
display:flex;align-items:center;gap:12px;width:100%;min-height:48px;
padding:10px 14px;border-radius:0;border:none;background:transparent;text-align:left;
font-size:14px;font-weight:600;color:var(--t1);cursor:pointer;
transition:background .14s;position:relative;
}
.top-menu .tm-item:hover{background:#EFF4FF}
.top-menu .tm-item .tm-ic{
width:28px;height:28px;border-radius:9px;background:var(--bg);flex-shrink:0;
display:flex;align-items:center;justify-content:center;color:var(--hac);font-size:0;
}
.top-menu .tm-item:hover .tm-ic{background:#fff}
.top-menu .tm-item .tm-ic svg{width:16px;height:16px;stroke-width:2}
.top-menu .tm-item.admin .tm-ic{background:#FFF3E8;color:#D97706}
.top-menu .tm-item .tm-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-menu .tm-item .tm-val{
font-size:12.5px;font-weight:600;color:var(--t3);flex-shrink:0;
max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top-menu .tm-item .tm-chev{width:15px;height:15px;color:var(--b2);flex-shrink:0;margin-left:4px}
.top-menu .tm-item .tm-badge{
margin-left:0;min-width:20px;height:20px;background:var(--red);color:#fff;
font-size:10.5px;font-weight:800;border-radius:10px;padding:0 6px;
display:flex;align-items:center;justify-content:center;line-height:1;
font-variant-numeric:tabular-nums;flex-shrink:0;
}
/* ── футер ── */
.top-menu .tm-foot{
flex-shrink:0;border-top:1.5px solid var(--b1);padding:10px 14px;
display:flex;align-items:center;gap:10px;background:#fff;
}
.top-menu .tm-foot:empty{display:none}
.top-menu .tm-out{
display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;
font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;color:#D8394F;
padding:6px 8px;border-radius:9px;
}
.top-menu .tm-out:hover{background:#FFF0F2}
.top-menu .tm-out svg{width:16px;height:16px}
.top-menu .tm-brand{margin-left:auto;font-size:11px;color:var(--t3);font-weight:600}
/* ── уплотнённые режимы mobile-cab.js: шапка тоже ужимается ── */
#topMenu.tm-compact .tm-hero{height:116px}
#topMenu.tm-dense .tm-hero{height:96px}
#topMenu.tm-dense .tm-hero-nm{font-size:15px}
#topMenu.tm-compact .tm-grp-t,#topMenu.tm-dense .tm-grp-t{padding-top:7px;padding-bottom:3px}
#topMenu.tm-dense .tm-status,#topMenu.tm-compact .tm-status{margin:7px 10px;padding:8px 11px}
#topMenu.tm-dense .tm-item .tm-ic,#topMenu.tm-compact .tm-item .tm-ic{width:26px;height:26px}
/* карта: мягкий светлый вид */
/* CARTO закрыл бесплатные тайлы (водяной знак «API KEY REQUIRED»), перешли на
OpenStreetMap. Он ярче, поэтому приглушаем цвет — карта снова служит фоном,
а не спорит с интерфейсом. Метки и элементы управления фильтр не задевает. */
.leaflet-tile-pane{filter:grayscale(.78) brightness(1.09) contrast(.88) saturate(.6)}
/* окно «Параметры уборки»: без значка и без полосы */
/* Значок-стрелка в заголовке ничего не открывал (окно закрывается своими кнопками),
а цветная полоса поверху спорила с остальным оформлением. */
#m-params .modal-head .mti{display:none!important}
#m-params .modal-head .mt{gap:0!important}
#m-params .modal::before{display:none!important}
/* === Выбор города на невысоком экране ===============================
Карточка не помещалась по высоте (673 px при экране 664), и кнопка
«Подтвердить» уезжала за нижний край. Нажать её было нельзя, окно
не закрывалось и держало весь интерфейс — вплоть до того, что человек
не мог войти в аккаунт. Теперь карточка не выше экрана, список городов
прокручивается внутри, а панель подтверждения прижата к низу карточки. */
@media (max-height: 780px), (max-width: 640px) {
.city-ov{align-items:flex-start !important; padding:10px 0 !important}
.city-card{max-height:calc(100vh - 20px) !important; display:flex !important;
flex-direction:column !important; overflow:hidden !important}
.city-card .city-head{flex-shrink:0}
.city-card .city-body{flex:1 1 auto; min-height:0; overflow-y:auto;
display:flex; flex-direction:column}
.city-card .city-body #citySelectedBar{position:sticky; bottom:0; z-index:3;
background:var(--wh,#fff); box-shadow:0 -6px 16px rgba(15,12,41,.10)}
}
/* Блок «Дата уборки» в параметрах: плашка «выберите время» и поле ввода сменяют
друг друга сразу после открытия окна, и содержимое под ними подпрыгивало на
несколько пикселей. Держим обе части одной высоты — подмена больше ничего не
двигает. */
#par-dt-time-pill,#par-dt-other-inp{min-height:45px;box-sizing:border-box}
#par-dt-other-inp{display:flex;align-items:center}
/* Лента вкладок карточки уборщика: раньше вкладки жались влево по ширине слов —
справа оставалась пустота, а сами заголовки стояли по-разному (у активной
вкладки способ отображения отличался от остальных, и текст съезжал). Делим
ширину поровну и выравниваем содержимое одинаково у всех. */
html .dt-tabs{overflow-x:hidden}
html .dt-tabs .dt{flex:1 1 0 !important;min-width:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;
white-space:nowrap;letter-spacing:.2px}
/* Самое длинное слово («Наблюдение») на узком экране не должно ломать сетку. */
@media (max-width:430px){html .dt-tabs .dt{font-size:11.5px;padding-left:2px;padding-right:2px}}
/* Панель управления и пояснение под экраном наблюдения бывают пустыми — тем,
кто не заказывал уборку, показывать там нечего. Пустые блоки всё равно
рисовали свои рамки и подложки: под чёрным экраном оставались две светлые
полосы. Пустые — прячем. */
.cam-ctrl:empty{display:none}
/* Внутри панели остаются переводы строк из шаблона, поэтому :empty её не ловит.
Считаем панель пустой, когда в ней нет ни кнопки, ни надписи. */
.cam-ctrl:not(:has(button)):not(:has(span)):not(:has(div)){display:none}
.cam-inf:empty{display:none}
/* Когда панели управления нет, у экрана незачем и разделительная черта. */
.cam-wrap:has(.cam-ctrl:empty){border-bottom:0}
/* Плитки «рейтинг / отзывов / заказов / доверие» стоят в гибком ряду #detRating,
но сам ряд их не растягивал: плитки жались по содержимому и справа оставалась
пустая полоса. Пусть занимают всю доступную ширину. */
#detRating > div{flex:1 1 auto;min-width:0}
/* Замок в заглушке наблюдения: значку нужен видимый цвет — в тёмном экране он
рисуется линиями по currentColor, а тот наследуется от приглушённого текста. */
.cam-off-ic svg{width:34px;height:34px;stroke:rgba(255,255,255,.62);display:block}
.cam-off-ic:has(svg){background:transparent}
/* ═══ Аватарка в списке уборщиков крупнее (06.09.2026) ═══
Базовые 44 px — это кружок, в котором лица толком не разобрать, а выбирают
уборщика именно по фото. Поднимаем до 72 px только в ленте (#lstEl): базовый
.ava используют ещё отзывы и чаты, там размер менять не нужно.
Файл теперь приходит копией 512 px, так что запаса разрешения хватает. */
#lstEl .ava{width:72px;height:72px;border-radius:17px}
#lstEl .ava-dot{width:15px;height:15px;bottom:-3px;right:-3px}
#lstEl .ava-w{margin-top:10px}
/* ═══ Список уборщиков: крупнее шрифт (07.09.2026) ═══
Заголовок панели и подписи карточек оставались на прежней мелкой шкале,
хотя аватарки уже выросли до 72 px — строки читались хуже фото. */
#sidePanel .sh-title{font-size:19px}
/* размеры внутри карточек задаёт шкала ui-scale.js (правила с !important) —
имя уборщика поднято там, в таблице CLS: .card-nm 15 → 18 (ступень «lead») */