/* Lucent Legal HQ — по макету Figma «All in one component / Dashboard» (node 2056-1981). Сетка, радиусы, типографика и структура из макета; палитра — фирменная Lucent (золото/чернила). */ /* ============ темы ============ Панель повторяет цвета сайта: светлая — айвори с бронзой из брендбука Lucent, тёмная — графит с янтарём. По умолчанию тёмная (как было), выбор сохраняется в localStorage; атрибут выставляется inline-скриптом в , иначе при загрузке успевает мигнуть чужая тема. */ :root{ --acc:#9A5928; --acc-2:#BF935B; --acc-3:#D8A916; --acc-deep:#7F4A20; --acc-tint:rgba(191,147,91,.16); --acc-tint-2:rgba(191,147,91,.24); --acc-line:rgba(191,147,91,.42); --on-acc:#3A2A12; /* текст поверх бронзовой заливки: белый на #BF935B даёт 2.6 при норме 4.5 */ --sidebar-grad:linear-gradient(178deg,#F3ECDF 0%,#EDE4D3 45%,#E5D9C3 100%); --sidebar-ink:#23262B; --sidebar-hover:rgba(35,38,43,.06); --sidebar-dim:#5C5548; /* пункты меню: 6.4 на песке */ --sidebar-on:rgba(154,89,40,.14); --sidebar-on-ink:#8A4E20; --bg:#F6F1E8; --card:#FCFAF5; --card-2:#F1EADD; --ink:#23262B; --ink-2:#3A3F46; --muted:#6E675A; --muted-2:#726B5C; --faint:#8F887A; --line:rgba(35,38,43,.12); --line-2:rgba(35,38,43,.07); --ok:#2E7D52; --ok-bg:rgba(46,125,82,.12); --warn:#8A6100; --warn-bg:rgba(216,169,22,.18); --bad:#B4322A; --bad-bg:rgba(180,50,42,.1); --chart-axis:#6E675A; --chart-grid:rgba(35,38,43,.1); /* Цвета данных. Подобраны валидатором палитр (dataviz): проходят проверку на дальтонизм (ΔE 21–25 при протанопии и дейтеранопии), попадают в полосу светлоты своей темы и держат контраст к фону. Совпадают по смыслу со значками каналов, но чуть глубже — на графике заливка крупная и яркие бренд-цвета выжигают глаз. Серия = канал, а не «первая-вторая». */ --ch-site:#9A7A00; --ch-tg:#2589C2; --ch-mail:#C9522F; --seq-1:#2589C2; --seq-2:#8FBEDC; /* один хью, два шага: визиты / уникальные */ --data-neutral:#8C8477; --r-s:6px; --r-m:8px; --r-l:12px; --r-xl:16px; --r-pill:999px; --sh:0 1px 2px rgba(90,70,38,.08), 0 10px 26px -14px rgba(90,70,38,.2); --sh-2:0 16px 40px -16px rgba(90,70,38,.28); --sidebar-w:293px; --wrap:1560px; --f:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; } :root[data-theme="dark"]{ --acc:#E0B300; --acc-2:#F5C400; --acc-3:#C29A00; --acc-deep:#F5C400; --on-acc:#101010; --acc-tint:rgba(224,179,0,.12); --acc-tint-2:rgba(224,179,0,.18); --acc-line:rgba(224,179,0,.30); --sidebar-grad:linear-gradient(178deg,#25272D 0%,#191A1F 45%,#101116 100%); --sidebar-ink:#fff; --sidebar-hover:rgba(255,255,255,.06); --sidebar-dim:rgba(255,255,255,.72); --sidebar-on:rgba(224,179,0,.14); --sidebar-on-ink:#F5C400; --bg:#141519; --card:#1A1B20; --card-2:#1E1F24; --ink:#F2F3F4; --ink-2:#DDDEE1; --muted:#A0A3A9; --muted-2:#878B92; --faint:#6C7076; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06); --ok:#7FBF8E; --ok-bg:rgba(127,191,142,.14); --warn:#E0B300; --warn-bg:rgba(224,179,0,.14); --bad:#E0736A; --bad-bg:rgba(224,115,106,.14); --chart-axis:#878B92; --chart-grid:rgba(255,255,255,.08); --ch-site:#B08A00; --ch-tg:#2E9FD8; --ch-mail:#DA6242; --seq-1:#2E9FD8; --seq-2:#2A5F7D; --data-neutral:#7A7E86; --r-s:6px; --r-m:8px; --r-l:12px; --r-xl:16px; --r-pill:999px; --sh:0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.55); --sh-2:0 16px 40px -16px rgba(0,0,0,.7); --sidebar-w:293px; --wrap:1560px; --f:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font:500 14px/1.45 var(--f);-webkit-font-smoothing:antialiased} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em} a{color:inherit;text-decoration:none} [hidden]{display:none !important} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:#33353B;border-radius:9px} ::-webkit-scrollbar-track{background:transparent} /* ============ вход ============ */ .login{position:fixed;inset:0;display:grid;place-items:center;background: radial-gradient(70% 60% at 50% 0%,rgba(224,179,0,.10),transparent),var(--bg);z-index:60} .login-card{width:min(380px,92vw);padding:34px 30px 30px;background:var(--card); border-radius:var(--r-xl);box-shadow:var(--sh-2);text-align:center} .login-card img{width:54px;height:54px;margin:0 auto 12px} .login-card h1{font-size:22px} .login-card p{margin:6px 0 20px;color:var(--muted);font-size:13px} .login-card input{width:100%;margin-bottom:10px;padding:13px 15px;border-radius:var(--r-m); border:1px solid var(--line);background:var(--card-2);outline:none} .login-card input:focus{border-color:var(--acc);background:var(--card-2)} .login-err{display:block;min-height:18px;margin-top:8px;color:var(--bad);font-size:12.5px} /* QR читается сканером только на белом — фон под ним светлый при любой теме */ .qr-box{width:186px;margin:0 auto 12px;padding:10px;background:#fff;border-radius:var(--r-m)} .qr-box svg{display:block;width:100%;height:auto} .qr-secret{margin:0 0 16px;font-size:11.5px;line-height:1.5;color:var(--muted);word-break:break-all} .qr-secret code{display:block;margin-top:4px;color:var(--fg);letter-spacing:.06em} #lgCode{text-align:center;font-size:20px;letter-spacing:.34em;padding-right:0} /* ============ быстрые фильтры инбокса ============ */ .quick{display:flex;gap:8px;margin-bottom:10px} .quick .btn.on{background:var(--acc);color:var(--on-acc)} /* точка «клиент ждёт»: цветом, а не текстом — строка списка и так плотная */ .hot-dot{display:inline-block;width:7px;height:7px;margin-left:7px;border-radius:50%; background:var(--bad);vertical-align:middle} /* ============ каркас ============ */ .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh} .sidebar{background:var(--sidebar-grad);border-right:1px solid var(--line); color:var(--sidebar-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .sb-brand{display:flex;align-items:center;gap:11px;padding:30px 28px 26px} .sb-brand img,.sb-brand .hq-logo{width:34px;height:34px} .sb-brand b{font-size:19px;font-weight:800;letter-spacing:.01em} .sb-brand b em{font-style:normal;color:var(--acc-2)} .sb-nav{display:flex;flex-direction:column;padding-top:4px} .sb-item{display:flex;align-items:center;gap:14px;height:46px;padding:0 28px;width:100%; color:var(--sidebar-dim);font-size:14.5px;font-weight:600;text-align:left; border-left:3px solid transparent;transition:background .18s,color .18s} .sb-item svg{width:19px;height:19px;flex:none;opacity:.9} .sb-item:hover{color:var(--sidebar-ink);background:var(--sidebar-hover)} .sb-item.on{background:var(--sidebar-on);color:var(--sidebar-on-ink);border-left-color:var(--sidebar-on-ink)} .sb-item.on svg{opacity:1} .sb-spacer{flex:1} .sb-foot{padding-bottom:18px} .sb-tag{margin:0 28px 14px;padding:10px 12px;border-radius:var(--r-m);background:var(--sidebar-hover); font-size:11.5px;color:var(--sidebar-dim);line-height:1.4} .sb-tag b{display:block;color:var(--sidebar-ink);font-size:12.5px;margin-bottom:2px} .main{min-width:0;max-width:100%;display:flex;flex-direction:column;overflow-x:hidden} /* топбар */ .topbar{display:flex;align-items:center;gap:12px;padding:16px 25px;width:100%;max-width:var(--wrap);margin:0 auto} .search{flex:1;display:flex;align-items:center;gap:11px;height:44px;padding:0 18px; background:var(--card);border-radius:var(--r-pill);border:1px solid transparent;box-shadow:var(--sh)} .search:focus-within{border-color:var(--acc-line)} .search svg{width:17px;height:17px;color:var(--faint);flex:none} .search input{flex:1;border:0;background:none;outline:none;font-size:14px} .tb-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill); background:var(--card);box-shadow:var(--sh);color:var(--ink-2);flex:none} .tb-btn:hover{color:var(--acc)} .tb-btn svg{width:18px;height:18px} /* счётчик «без ответственного»: колокольчик молчал даже когда лиды никто не взял */ .tb-btn{position:relative} .tb-btn.has-new{color:var(--acc)} .tb-btn.has-new::after{content:attr(data-n);position:absolute;top:-3px;right:-3px;min-width:17px; height:17px;padding:0 4px;border-radius:9px;background:var(--acc);color:#1A1A1A; font-size:10.5px;font-weight:800;line-height:17px;text-align:center} .tb-user{display:flex;align-items:center;gap:11px;padding-left:6px;flex:none} .tb-user small{display:block;color:var(--muted-2);font-size:11.5px;font-weight:500} .tb-user b{font-size:13.5px;font-weight:700} .ava{width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;flex:none; color:#fff;font-weight:800;font-size:13px;overflow:hidden;background:var(--acc)} .ava img{width:100%;height:100%;object-fit:cover} .ava.sm{width:30px;height:30px;font-size:11px} .ava.lg{width:56px;height:56px;font-size:18px} /* контент */ .page{padding:8px 25px 34px;width:100%;max-width:var(--wrap);margin:0 auto;min-width:0} .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px} .page-head h1{font-size:31px} .page-head p{margin:3px 0 0;color:var(--muted);font-size:13.5px;font-weight:500} .btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:var(--r-pill); background:var(--acc);color:var(--on-acc);font-weight:700;font-size:13.5px;transition:filter .2s,transform .15s} .btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.98)} .btn.ghost{background:var(--card);color:var(--ink-2);box-shadow:var(--sh)} .btn.ghost:hover{color:var(--acc)} .btn.sm{height:33px;padding:0 14px;font-size:12.5px} .btn svg{width:15px;height:15px} /* ============ карточки ============ */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} .card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh);padding:19px 22px;min-width:0} .stat{position:relative;min-height:116px;display:flex;flex-direction:column;justify-content:center} .stat .t{color:var(--muted);font-size:13.5px;font-weight:600} .stat .v{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:5px 0 3px} .stat .s{color:var(--faint);font-size:12.5px;font-weight:500} .stat .ic{position:absolute;top:19px;right:19px;width:29px;height:29px;border-radius:var(--r-s); display:grid;place-items:center;background:var(--acc-tint);color:var(--acc)} .stat .ic svg{width:15px;height:15px} .stat.acc{background:linear-gradient(145deg,var(--acc-2),var(--acc-3));color:var(--on-acc);box-shadow:var(--sh-2)} .stat.acc .t{color:rgba(16,16,16,.72)} .stat.acc .s{color:rgba(16,16,16,.62)} .stat.acc .ic{background:rgba(16,16,16,.16);color:var(--on-acc)} .grid-2{display:grid;grid-template-columns:1fr 430px;gap:14px;margin-bottom:18px} .grid-2.rev{grid-template-columns:1fr 1fr} .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .card-h h3{font-size:16.5px;display:flex;align-items:center;gap:9px} .card-h h3 svg{width:17px;height:17px;color:var(--acc)} .card-h .lnk{color:var(--muted);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px} .card-h .lnk:hover{color:var(--acc)} .seg{display:inline-flex;gap:4px;padding:4px;background:var(--bg);border-radius:var(--r-pill)} .seg button{padding:6px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;color:var(--muted)} .seg button.on{background:var(--acc);color:var(--on-acc)} .tabs{display:flex;gap:26px;margin-bottom:6px} .tabs button{font-size:13.5px;font-weight:700;color:var(--faint);padding-bottom:2px} .tabs button.on{color:var(--ink)} /* список-строки (Diagnostics / Lab activity в макете) */ .rows{display:flex;flex-direction:column;gap:9px} .row-i{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:var(--r-m); background:var(--card-2);border:1px solid var(--line-2)} .row-i .ic{width:34px;height:34px;border-radius:var(--r-s);display:grid;place-items:center; background:var(--acc-tint);color:var(--acc);flex:none} .row-i .ic svg{width:16px;height:16px} .row-i b{display:block;font-size:13.5px;font-weight:700} .row-i small{color:var(--muted-2);font-size:12px;font-weight:500} .row-i .val{margin-left:auto;font-weight:800;font-size:15px} .feed{display:flex;flex-direction:column;gap:15px} .feed-i{display:flex;gap:11px;align-items:flex-start} .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);margin-top:6px;flex:none} .feed-i b{display:block;font-size:13.5px;font-weight:700} .feed-i small{color:var(--muted-2);font-size:11.5px;font-weight:500} /* таблица (Appointments в макете) */ .panel{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh);overflow:hidden} .panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px} .panel-h h3{font-size:16.5px} .panel-h p{margin:4px 0 0;color:var(--muted-2);font-size:12.5px;font-weight:500} .filters{display:flex;gap:9px;flex-wrap:wrap} .sel{height:38px;padding:0 14px;border-radius:var(--r-m);border:1px solid var(--line); background:var(--card-2);font-size:13px;font-weight:600;outline:none} .sel:focus{border-color:var(--acc)} .tr{display:grid;grid-template-columns:minmax(190px,1.4fr) 1.6fr 120px 120px 150px;gap:14px; align-items:center;padding:15px 22px;border-top:1px solid var(--line-2);cursor:pointer} .tr:hover{background:var(--card-2)} /* строка-ссылка (материалы контента) не должна выглядеть ссылкой */ a.tr{color:inherit;text-decoration:none} .tr .who{display:flex;align-items:center;gap:11px;min-width:0} .tr .who b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tr .sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tr .mono{color:var(--muted-2);font-size:12.5px;font-weight:600} .th{display:grid;grid-template-columns:minmax(190px,1.4fr) 1.6fr 120px 120px 150px;gap:14px; padding:10px 22px;border-top:1px solid var(--line-2);background:var(--card-2); color:var(--faint);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:var(--r-pill); font-size:12px;font-weight:700;background:var(--bg);color:var(--muted)} .pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.acc{background:var(--acc-tint);color:var(--acc-deep)} .pill.bad{background:var(--bad-bg);color:var(--bad)} /* Канал показывается значком: пилюля становится квадратной, иначе рядом с круглыми текстовыми ярлыками она выглядит растянутой пустотой. Размер значка один на все каналы — фирменные глифы разной плотности, но бокс общий. */ .pill.ico-pill{height:26px;width:26px;padding:0;justify-content:center;border-radius:9px} .pill.ico-pill .ico-14{width:14px;height:14px;flex:none} /* Каждый канал в своём фирменном цвете — так строка узнаётся боковым зрением, не читая подсказку. Сам знак цветной, подложка — тот же цвет на 14%: заливать плашку целиком нельзя, двадцать ярких квадратов в столбик перебьют красную точку «клиент ждёт ответа», а она в списке главная. Instagram официально градиентный; в одном цвете берём его розовый — на 14px градиент всё равно читается как грязь. */ .empty{padding:44px 22px;text-align:center;color:var(--faint);font-size:13.5px} /* ============ диалог ============ */ .chat{display:grid;grid-template-columns:1fr 320px;gap:14px} .thread{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:420px} .thread-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-2)} .thread-h .who b{font-size:15px;font-weight:800;display:block} .thread-h .who small{color:var(--muted-2);font-size:12px;font-weight:500} .thread-h .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .msgs{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:9px;background:var(--card-2)} .m{max-width:74%;padding:10px 14px;border-radius:var(--r-l);font-size:13.5px;line-height:1.5;white-space:pre-wrap; word-break:break-word;background:var(--card);border:1px solid var(--line)} .m small{display:block;margin-top:5px;color:var(--faint);font-size:10.5px;font-weight:600} .m.client{align-self:flex-start;border-bottom-left-radius:5px} .m.ai{align-self:flex-end;background:var(--acc-tint);border-color:var(--acc-line);border-bottom-right-radius:5px} .m.lawyer{align-self:flex-end;background:linear-gradient(145deg,var(--acc-2),var(--acc-3));color:var(--on-acc); border-color:transparent;border-bottom-right-radius:5px} .m.lawyer small{color:rgba(16,16,16,.6)} .reply{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line-2);background:var(--card)} .reply textarea{flex:1;resize:none;padding:11px 14px;border-radius:var(--r-m);border:1px solid var(--line); background:var(--card-2);outline:none;font-size:13.5px} .reply textarea:focus{border-color:var(--acc);background:var(--card-2)} .note-row{padding:13px 16px;border-top:1px solid var(--line-2);color:var(--muted-2);font-size:12.5px;background:var(--card)} .side-card{padding:18px 20px} .side-card h4{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13px} .kv:last-child{border-bottom:0} .kv span{color:var(--muted)} .kv b{font-weight:700;text-align:right} .notes{display:flex;flex-direction:column;gap:10px;margin-bottom:12px} .note{padding:10px 12px;border-radius:var(--r-m);background:var(--card-2);border:1px solid var(--line-2);font-size:12.5px} .note small{display:block;margin-top:4px;color:var(--faint);font-size:11px;font-weight:600} /* ============ команда ============ */ .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .t-card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--sh);padding:20px;position:relative} .t-card .top{display:flex;align-items:center;gap:13px;margin-bottom:14px} .t-card b{font-size:15px;font-weight:800;display:block} .t-card small{color:var(--muted-2);font-size:12px;font-weight:500} .t-stats{display:flex;gap:18px;padding-top:13px;border-top:1px solid var(--line-2)} .t-stats div{font-size:12px;color:var(--muted)} .t-stats b{font-size:17px;font-weight:800;color:var(--ink)} .t-card .edit{position:absolute;top:16px;right:16px;color:var(--faint)} .t-card .edit:hover{color:var(--acc)} /* модалка */ .modal{position:fixed;inset:0;background:rgba(6,7,9,.66);display:grid;place-items:center;z-index:70;padding:20px} .modal-card{width:min(460px,100%);max-height:90vh;overflow-y:auto;background:var(--card); border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:26px} .modal-card h3{font-size:19px;margin-bottom:16px} .field{margin-bottom:12px} .field label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:var(--muted)} .field input,.field select,.field textarea{width:100%;padding:11px 13px;border-radius:var(--r-m); border:1px solid var(--line);background:var(--card-2);outline:none;font-size:13.5px} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--acc);background:var(--card-2)} .field .hint{margin-top:5px;color:var(--faint);font-size:11.5px} .swatches{display:flex;gap:8px} .swatch{width:30px;height:30px;border-radius:var(--r-pill);border:2px solid transparent} .swatch.on{border-color:#fff} .modal-foot{display:flex;gap:9px;justify-content:flex-end;margin-top:18px} .check{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink-2)} .check input{width:17px;height:17px;accent-color:var(--acc)} /* мелочи */ .bars{display:flex;flex-direction:column;gap:11px} .bar-row{display:grid;grid-template-columns:150px 1fr 56px;gap:12px;align-items:center;font-size:13px} .bar-row .track{height:9px;border-radius:var(--r-pill);background:var(--bg);overflow:hidden} .bar-row .track i{display:block;height:100%;border-radius:var(--r-pill); /* воронка и «читают чаще всего» — величины одной природы, поэтому один цвет без градиента: градиент по длине полосы врёт, будто внутри есть шкала */ background:var(--seq-1)} .bar-row .n{text-align:right;font-weight:800} .bar-row .lbl{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px} .mini div{background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh);padding:15px 17px} .mini b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em} .mini small{color:var(--muted);font-size:12px;font-weight:600} .chart-box{width:100%;min-width:0;overflow:hidden} .sec-title{margin:22px 0 12px;font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)} /* адаптив */ @media (max-width:1250px){ .cards{grid-template-columns:repeat(2,1fr)} .grid-2,.grid-2.rev{grid-template-columns:1fr} .chat{grid-template-columns:1fr} .th,.tr{grid-template-columns:minmax(160px,1.3fr) 1.4fr 110px 130px} .th span:nth-child(4),.tr .hide-md{display:none} } @media (max-width:900px){ .app{grid-template-columns:1fr} .sidebar{position:fixed;left:0;top:0;bottom:0;width:264px;z-index:50;transform:translateX(-100%); transition:transform .28s cubic-bezier(.16,1,.3,1);height:100dvh} .app.nav-open .sidebar{transform:none} .scrim{position:fixed;inset:0;background:rgba(20,19,16,.4);z-index:45} .burger{display:grid !important} .page{padding:6px 15px 30px} /* На телефоне строка сверху вылезала за экран на 79px: поиск держал свою ширину и выталкивал колокольчик за край. min-width:0 разрешает ему сжиматься — без этого flex-элемент не ужимается меньше содержимого. */ .topbar{padding:12px 15px;gap:8px} .topbar .search{min-width:0} .topbar .search input{min-width:0} .page-head h1{font-size:25px} .tb-user .txt{display:none} .th{display:none} .tr{grid-template-columns:1fr auto;gap:8px;padding:14px 15px} .tr .sub{grid-column:1/-1} .tr .hide-sm{display:none} .cards{grid-template-columns:1fr 1fr;gap:10px} .stat .v{font-size:30px} .m{max-width:88%} .thread{height:auto;min-height:60vh} } .burger{display:none;width:40px;height:40px;place-items:center;border-radius:var(--r-pill); background:var(--card);box-shadow:var(--sh);flex:none} .burger svg{width:18px;height:18px} @media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}} /* ===== кнопки связи по контакту клиента (v6) ===== только фирменные иконки: канал узнаётся по цвету, подписи не нужны */ .cbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--card-2)} .cbar.sm{padding:6px 0 0;border:0;background:none;gap:6px} .cbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px; border:1px solid var(--line);background:var(--card);text-decoration:none; transition:border-color .15s,background .15s,transform .15s} .cbtn svg{width:18px;height:18px} .cbtn:hover{transform:translateY(-1px)} .cbtn.wa{color:#25D366} .cbtn.wa:hover{border-color:#25D366;background:rgba(37,211,102,.14)} .cbtn.tg{color:#2AABEE} .cbtn.tg:hover{border-color:#2AABEE;background:rgba(42,171,238,.14)} .cbtn.tel{color:var(--acc)} .cbtn.tel:hover{border-color:var(--acc);background:var(--acc-tint)} .cbtn.mail{color:var(--muted)} .cbtn.mail:hover{border-color:var(--acc);background:var(--acc-tint);color:var(--acc)} .cbtn.sm{width:28px;height:28px;border-radius:8px} .cbtn.sm svg{width:14px;height:14px} /* вердикт проверки контакта рядом с кнопками связи */ .vchk{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px; border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px;font-weight:600} .vchk svg{width:14px;height:14px;color:var(--ok)} .vchk.bad{border-color:rgba(224,115,106,.4);background:var(--bad-bg);color:var(--bad)} .vchk.bad svg{color:var(--bad)} .cbtn.chk{color:var(--muted);cursor:pointer} .cbtn.chk:hover{border-color:var(--acc);background:var(--acc-tint);color:var(--acc)} .cbtn.chk:disabled{opacity:.5;cursor:default} .cbtn.chk.busy svg{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* знак фирмы в панели — вектор из спрайта, в акцентном цвете. Размеры и цвет заданы жёстко: правило .sb-brand img после замены картинки на svg перестало действовать, и знак раздувался. */ .hq-logo{width:34px;height:34px;color:var(--acc);flex:none} .topbar .hq-logo{width:30px;height:30px} /* в тёмной теме предлагаем солнце, в светлой — луну: кнопка показывает, куда переключишься, а не где находишься */ .th-sun{display:none} :root[data-theme="dark"] .th-sun{display:block} :root[data-theme="dark"] .th-moon{display:none} /* Цвет канала — в конце файла и с [class] в селекторе: у .row-i .ic в настройках специфичность выше, и без этого значки там оставались золотыми, хотя формы уже были правильные. Одинаковая специфичность + позиция ниже = наш цвет. */ [data-ch="tg"][class] {color:#2AABEE;background:rgba(42,171,238,.14)} [data-ch="wa"][class] {color:#25D366;background:rgba(37,211,102,.14)} [data-ch="ig"][class] {color:#E1306C;background:rgba(225,48,108,.14)} [data-ch="fb"][class] {color:#1877F2;background:rgba(24,119,242,.14)} [data-ch="li"][class] {color:#0A66C2;background:rgba(10,102,194,.16)} [data-ch="mail"][class] {color:#EA6C4B;background:rgba(234,108,75,.14)} [data-ch="site"][class] {color:var(--acc);background:var(--acc-tint)} [data-ch="radar"][class]{color:#3FB6A8;background:rgba(63,182,168,.14)} .ok-t{color:var(--ok)} .bad-t{color:var(--bad)} .hint{font-size:12px;line-height:1.4;margin:-4px 0 10px}