/* «Скидочный двор» — светлый Apple-grade интерфейс. Единый акцент — системный синий #0071e3. Никакой пестроты. Дизайн-токены → перерисовка всех компонентов под эталон. ВАЖНО: блок «голосовой орб + думающая лента» (.voiceorb / .orb-* / .reel-track / .mic-reel.thinking и @keyframes reelScroll/haloGlow/haloSweep/orbSpin/orbPulse/ orbGlow) сохранён без изменений — одобрен оператором. */ :root{ /* Поверхности */ --bg:#ffffff; --bg-soft:#f5f5f7; --bg-card:#ffffff; --bg-sunken:#f5f5f7; /* Текст */ --ink:#1d1d1f; --ink-soft:#3a3a3c; --muted:#6e6e73; /* Волосяные разделители */ --line:rgba(0,0,0,.10); --line-soft:rgba(0,0,0,.07); --hair:rgba(0,0,0,.10); /* Единственный акцент — системный синий */ --accent:#0071e3; --accent-press:#0064c8; --accent-tint:#e8f1fd; /* Статусы (используются точечно, не для декора) */ --green:#1d9e54; --green-tint:#e7f6ed; --red:#d70015; --red-tint:#fdecea; --warn:#9a6500; --warn-tint:#fbf2e3; /* Тени */ --shadow-card:0 10px 30px rgba(0,0,0,.06); --shadow-card-h:0 16px 40px rgba(0,0,0,.10); --shadow-pop:0 20px 60px rgba(0,0,0,.18); /* Радиусы */ --r-lg:22px; --r-md:18px; --r-sm:14px; --r-pill:980px; /* Кривая перехода */ --ease:cubic-bezier(.2,.7,.2,1); --fz:0px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue","Segoe UI",Roboto,sans-serif} body{margin:0;background:#ebebef;color:var(--ink); font-size:calc(16px + var(--fz));line-height:1.5;letter-spacing:-.01em; font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; padding:24px 12px 60px} /* Сцена-обрамление: спокойный нейтральный фон вместо пёстрых градиентов */ .stage{padding:30px 18px;border-radius:30px;max-width:440px;margin:0 auto; background:#e3e3e8;transition:background .5s var(--ease)} .stage.role-manager,.stage.role-boss,.stage.role-driver,.stage.role-helper{background:#e3e3e8} .phone{width:332px;max-width:100%;margin:0 auto;background:#000;border-radius:46px;padding:11px; box-shadow:0 40px 90px rgba(0,0,0,.34),0 10px 24px rgba(0,0,0,.18)} .phone-screen{background:var(--bg);border-radius:36px;overflow:hidden;position:relative;height:640px} .phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%); width:104px;height:26px;background:#000;border-radius:14px;z-index:10} .phone-status{display:flex;justify-content:space-between;align-items:center; padding:13px 24px 6px;font-size:13px;font-weight:600;letter-spacing:-.01em;position:relative;z-index:5;color:var(--ink)} .phone-content{padding:4px 16px 18px;height:calc(100% - 44px);overflow:auto;position:relative; -webkit-overflow-scrolling:touch;background:var(--bg)} .phone-content::-webkit-scrollbar{width:0} /* ===== Переключатель ролей (персонал) — СКРЫТ от обычного покупателя ===== По умолчанию display:none. Включается только когда на есть класс .staff (ставится в app.js при ?staff в URL, 5 быстрых тапах или долгом нажатии по названию «Скидочный двор»). Для покупателя — чистый клиент. */ #roles{display:none} body.staff #roles{display:flex} .roles{position:absolute;top:0;left:0;right:0;z-index:60;gap:2px; background:rgba(245,245,247,.96);-webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); padding:6px 10px;margin:0;border-bottom:.5px solid var(--line)} /* В staff-режиме сдвигаем содержимое экрана вниз под панель ролей */ body.staff .phone-content{padding-top:52px} body.staff .view[data-v="client"].on{top:52px;height:auto} .roles button{flex:1;border:0;background:transparent;border-radius:11px;padding:9px 2px; font-size:11px;font-weight:600;letter-spacing:-.01em;color:var(--muted);cursor:pointer; white-space:nowrap;transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .roles button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.10)} .view{display:none}.view.on{display:block;animation:fade .3s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ======================================================================= КЛИЕНТСКОЕ ПРИЛОЖЕНИЕ: компактный навбар + прокрутка + нижний таб-бар Делает клиентскую часть похожей на настоящее мобильное приложение: appbar (sticky сверху), appscroll (прокрутка между навбаром и баром), tabbar (фикс снизу, iOS-стиль). Внутренние отступы phone-content для клиента убираем — навбар/бар сами держат края. ======================================================================= */ .view[data-v="client"].on{display:flex;flex-direction:column; position:absolute;inset:0;height:100%;animation:fade .3s var(--ease)} .phone-content:has(.view[data-v="client"].on){padding:0;overflow:hidden;display:flex} /* Компактный sticky-навбар (название + заголовок вкладки) */ .appbar{position:sticky;top:0;z-index:25;flex:0 0 auto; padding:9px 18px 8px;background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); border-bottom:.5px solid var(--line)} .appbar-brand{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);cursor:pointer;user-select:none;-webkit-user-select:none} .appbar-title{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:1px} /* ===== Кнопки связи (Avito-паттерн): «Позвонить» + «Написать», всегда сверху ===== Одна акцент-pill + одна светлая, крупные тап-цели ≥44px, Apple-стиль. */ .contactbar{flex:0 0 auto;display:flex;gap:10px;padding:10px 16px; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); border-bottom:.5px solid var(--line)} .cbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px; min-height:46px;border:0;border-radius:var(--r-pill);cursor:pointer; font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none; transition:transform .12s var(--ease),background .2s var(--ease)} .cbtn:active{transform:scale(.97)} .cbtn svg{width:19px;height:19px;flex:0 0 auto} .cbtn-call{background:var(--accent);color:#fff} @media (hover:hover){.cbtn-call:hover{background:var(--accent-press)}} .cbtn-msg{background:var(--bg-soft);color:var(--ink)} @media (hover:hover){.cbtn-msg:hover{background:#ececef}} /* Прокручиваемая область экранов */ .appscroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:12px 16px calc(var(--tabbar-h) + 14px);background:var(--bg)} .appscroll::-webkit-scrollbar{width:0} /* Когда клиент активен — родной phone-content не должен скроллиться сам */ :root{--tabbar-h:62px} /* ===== Нижний таб-бар (iOS) ===== */ .tabbar{position:absolute;left:0;right:0;bottom:0;z-index:40; display:flex;height:var(--tabbar-h);padding:0;margin:0;border-radius:0;gap:0; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%); border-top:.5px solid var(--line)} .tabbar .tab{flex:1;border:0;background:none;cursor:pointer;position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:44px;color:#8e8e93;padding:6px 2px; transition:color .2s var(--ease),transform .12s var(--ease)} .tabbar .tab:active{transform:scale(.94)} .tabbar .tab svg{width:25px;height:25px} .tabbar .tab .tab-label{font-size:10.5px;font-weight:600;letter-spacing:.01em} .tabbar .tab.on{color:var(--accent)} .tab-badge{position:absolute;top:5px;left:calc(50% + 9px);min-width:17px;height:17px; padding:0 4px;border-radius:var(--r-pill);background:var(--red);color:#fff; font-size:11px;font-weight:700;line-height:17px;text-align:center; font-variant-numeric:tabular-nums} /* ===== Экран КОРЗИНА (клиент) ===== */ .cart-empty{text-align:center;padding:48px 22px;display:flex;flex-direction:column; align-items:center;gap:10px} .cart-empty .ce-emoji{font-size:40px} .cart-empty .ce-title{font-size:19px;font-weight:700;letter-spacing:-.02em} .cart-empty .ce-sub{font-size:14.5px;color:var(--muted);max-width:270px;line-height:1.45} /* ===== Экран КАБИНЕТ (клиент) ===== */ .acc-profile{display:flex;align-items:center;gap:14px;padding:6px 2px 16px} .acc-avatar{width:60px;height:60px;border-radius:50%;flex:0 0 60px; background:linear-gradient(135deg,#0071e3,#4aa3ff);color:#fff; display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600} .acc-name{font-size:20px;font-weight:700;letter-spacing:-.02em} .acc-meta{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45} .acc-sec{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase; letter-spacing:.05em;margin:20px 2px 8px} .acc-panel{background:var(--bg-card);border-radius:var(--r-md);box-shadow:var(--shadow-card); overflow:hidden;border:.5px solid var(--line-soft)} .acc-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;border-bottom:.5px solid var(--line)} .acc-row:last-child{border-bottom:none} .acc-row .acc-row-lbl{font-size:15.5px} .acc-row .acc-row-val{font-size:14px;color:var(--muted)} /* segmented-переключатель режима внутри кабинета */ .acc-modes{display:flex;gap:2px;background:var(--bg-soft);border-radius:var(--r-sm);padding:3px; flex:0 0 auto} .acc-modes button{border:0;background:transparent;border-radius:11px;padding:8px 14px; font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} .acc-modes button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.10)} /* ===== Заголовок раздела ===== */ .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:21px; letter-spacing:-.02em;margin:6px 2px 2px} .brand .dot{width:30px;height:30px;border-radius:9px;background:var(--accent); display:flex;align-items:center;justify-content:center;font-size:15px; box-shadow:0 4px 12px rgba(0,113,227,.30)} .brand-sub{color:var(--muted);font-size:13px;margin:3px 2px 14px;letter-spacing:-.01em} .trust{font-size:12px;color:var(--green);background:var(--green-tint); border-radius:12px;padding:8px 11px;margin-bottom:12px;font-weight:500} .demo-tag{font-size:10px;color:var(--muted);background:var(--bg-soft); border-radius:6px;padding:2px 7px;margin-left:7px;font-weight:600;letter-spacing:0} h3.sec{font-size:12px;color:var(--muted);margin:18px 2px 8px;font-weight:600; text-transform:uppercase;letter-spacing:.04em} /* ===== Чат ===== */ .chat{display:flex;flex-direction:column;gap:8px;padding:6px 0} .bubble{max-width:84%;padding:10px 14px;border-radius:20px;font-size:15px; white-space:pre-wrap;line-height:1.45;letter-spacing:-.01em} .bubble.in{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:7px} .bubble.out{align-self:flex-start;background:var(--bg-soft);color:var(--ink);border-bottom-left-radius:7px} .bubble.sys{align-self:center;background:var(--warn-tint);color:var(--warn); font-size:12.5px;text-align:center;border-radius:14px;font-weight:500} /* ===== Карточка подобранной позиции (чат/консультация) ===== */ .card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r-md); padding:13px 14px;margin:8px 0;box-shadow:var(--shadow-card)} .card .nm{font-weight:600;font-size:15px;letter-spacing:-.01em} .card .meta{color:var(--muted);font-size:12.5px;margin-top:3px} .card .pr{font-weight:600;color:var(--ink);font-size:17px;margin-top:6px;letter-spacing:-.02em} .card .stk{font-size:11.5px;color:var(--green);font-weight:500}.card .stk.no{color:var(--muted)} .chip{display:inline-block;font-size:11.5px;background:var(--bg-soft);border-radius:var(--r-pill); padding:4px 11px;margin:4px 5px 0 0;color:var(--ink-soft)} /* ===== Сводка-подтверждение (корзина-итог) ===== */ .summary{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r-md); padding:14px;margin:10px 0;box-shadow:var(--shadow-card)} .summary .row{display:flex;justify-content:space-between;font-size:13.5px;padding:3px 0;color:var(--ink-soft)} .summary .tot{font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink); border-top:1px solid var(--hair);margin-top:8px;padding-top:10px} .summary .pay{font-size:12.5px;color:var(--warn);background:var(--warn-tint); border-radius:12px;padding:9px 11px;margin-top:10px;font-weight:500} /* ===== Нумерованный список позиций (корзина/состав/история) — ВЕЗДЕ по пунктам ===== */ ol.cart-list{margin:2px 0 4px;padding-left:0;list-style:none;counter-reset:cli} ol.cart-list > li.cart-li{counter-increment:cli;display:flex;align-items:baseline;gap:8px; font-size:13.5px;line-height:1.45;padding:7px 0;border-bottom:1px solid var(--hair)} ol.cart-list > li.cart-li:last-child{border-bottom:none} ol.cart-list > li.cart-li::before{content:counter(cli);flex:0 0 auto; font-weight:600;color:var(--accent);min-width:20px;font-size:12px; font-variant-numeric:tabular-nums} .cart-li .cl-name{flex:1 1 auto;font-weight:500;color:var(--ink)} .cart-li .cl-calc{flex:0 0 auto;color:var(--muted);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums} .cart-li .cl-sum{flex:0 0 auto;font-weight:600;color:var(--ink);min-width:58px;text-align:right;font-variant-numeric:tabular-nums} .cart-block .cart-title{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px; text-transform:uppercase;letter-spacing:.03em} ol.cart-list.order-items > li.cart-li{font-size:13px;padding:6px 0} ol.cart-list.order-items > li.cart-li .cl-name{font-weight:500} /* ===== Composer (поле ввода + кнопки), pill-стиль ===== */ .composer{display:flex;gap:8px;margin-top:10px;position:sticky;bottom:0; background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg) 22%);padding:10px 0 6px} .composer input{flex:1;border:1px solid var(--line);border-radius:var(--r-pill); padding:12px 16px;font-size:15px;outline:none;background:var(--bg-soft); color:var(--ink);transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .composer input::placeholder{color:var(--muted)} .composer input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)} .btn{border:0;border-radius:var(--r-pill);padding:12px 20px;font-size:15px;font-weight:600; letter-spacing:-.01em;cursor:pointer;background:var(--accent);color:#fff; transition:background .2s var(--ease),transform .12s var(--ease),box-shadow .2s var(--ease)} @media (hover:hover){.btn:hover{background:var(--accent-press)}} .btn:active{transform:scale(.97)} .btn.send{padding:12px 16px} .btn.ghost{background:var(--bg-soft);color:var(--ink)} @media (hover:hover){.btn.ghost:hover{background:#ececef}} /* Семантические варианты — без пестроты: один тон + понятная роль */ .btn.orange{background:var(--accent)} .btn.green{background:var(--green)} @media (hover:hover){.btn.green:hover{background:#178746}} .btn.red{background:#fff;color:var(--red);box-shadow:inset 0 0 0 1px rgba(215,0,21,.30)} @media (hover:hover){.btn.red:hover{background:var(--red-tint)}} .btn.sm{padding:9px 14px;font-size:13px} .btn.block{display:block;width:100%;margin-top:10px} .btn:disabled{opacity:.4;cursor:default} .btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .quick{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0} .quick button{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-pill); padding:9px 14px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer; transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)} @media (hover:hover){.quick button:hover{background:var(--bg-soft);transform:translateY(-1px)}} .quick button:active{transform:scale(.98)} /* ===== Карточки списков (менеджер/водитель/грузчик) ===== */ .item{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r-md); padding:14px;margin:10px 0;box-shadow:var(--shadow-card)} .item .hd{display:flex;justify-content:space-between;align-items:center;gap:8px} .item .id{font-weight:600;font-size:15px;letter-spacing:-.01em} .badge{font-size:11px;font-weight:600;border-radius:var(--r-pill);padding:4px 10px; letter-spacing:-.01em} /* Бейджи статусов — приглушённые тинты, читаемый текст, без кричащих заливок */ .badge{color:var(--muted);background:var(--bg-soft)} .badge.hitl{background:var(--warn-tint);color:var(--warn)} .badge.ok{background:var(--green-tint);color:var(--green)} .badge.new{background:var(--accent-tint);color:var(--accent)} .badge.drv{background:var(--accent-tint);color:var(--accent)} .badge.paid{background:var(--green-tint);color:var(--green)} .badge.rej{background:var(--red-tint);color:var(--red)} .ds{font-size:13px;color:var(--ink-soft);margin:6px 0;line-height:1.45} .muted{color:var(--muted);font-size:12.5px} .kv{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0;color:var(--ink-soft)} .tx{background:var(--bg-soft);border-radius:12px;padding:10px;font-size:11.5px; max-height:130px;overflow:auto;margin:8px 0;line-height:1.5} .tx .t-in{color:var(--accent);margin:2px 0}.tx .t-out{color:var(--ink-soft);margin:2px 0} /* ===== Водитель — крупная сумма наличными ===== */ .cash{background:var(--accent-tint);border:1px solid rgba(0,113,227,.18);border-radius:var(--r-md); padding:14px;text-align:center;margin:10px 0} .cash .lbl{font-size:11.5px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.03em} .cash .val{font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums} .addr{font-weight:600;font-size:15px;letter-spacing:-.01em} .land{color:var(--muted);font-size:12.5px;margin-top:3px} /* ===== Грузчик — тумблеры ===== */ .toggle-row{display:flex;justify-content:space-between;align-items:center;gap:8px; padding:11px 2px;border-bottom:1px solid var(--hair)} .toggle-row .nm{font-size:14px;font-weight:500} .sw{display:flex;gap:8px} .sw button{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill); padding:8px 13px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} .sw button.on{background:var(--green);color:#fff;border-color:var(--green)} .progress{background:var(--bg-soft);border-radius:var(--r-pill);height:10px;overflow:hidden;margin:8px 0} .progress > div{height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .4s var(--ease)} .prog-lbl{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:6px} /* ===== Сегментированные переключатели (общий вид) ===== */ .ctabs,.modes,.mtabs,.periods{display:flex;gap:2px;background:var(--bg-soft); border-radius:var(--r-sm);padding:3px;margin:4px 0 14px} /* hidden должен оставаться скрытым (важно для #clientModes, вынесенного в Кабинет) */ .modes[hidden]{display:none} .ctabs button,.modes button,.periods button{flex:1;border:0;background:transparent; border-radius:11px;padding:10px 4px;font-size:13.5px;font-weight:600;letter-spacing:-.01em; color:var(--muted);cursor:pointer;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} .ctabs button.on,.modes button.on,.periods button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.10)} .ctab{display:none}.ctab.on{display:block;animation:fade .25s var(--ease)} .cmode{display:none}.cmode.on{display:block;animation:fade .25s var(--ease)} .periods button{font-size:13px;padding:10px 2px} /* Кнопка микрофона в композере */ .btn.mic{background:var(--bg-soft);color:var(--ink);padding:12px 14px;font-size:17px;line-height:1; display:flex;align-items:center;justify-content:center} .btn.mic.rec{background:var(--red);color:#fff;animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} .mic-hint{font-size:12px;color:var(--muted);text-align:center;min-height:15px;margin-top:4px} .mic-hint.busy{color:var(--accent)}.mic-hint.err{color:var(--red)} /* Тумблер «озвучивать ответы» (Классика) — pill */ .speak-toggle{display:block;margin:10px auto 0;border:1px solid var(--line);background:#fff; border-radius:var(--r-pill);padding:9px 16px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)} .speak-toggle.on{background:var(--green-tint);color:var(--green);border-color:rgba(29,158,84,.30)} /* ===== Выбор голоса (нейро-TTS) ===== */ .voicebox{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; margin:10px auto 0;font-size:12.5px;color:var(--muted)} .voicebox-lbl{display:inline-flex;align-items:center;gap:7px;font-weight:600} .voice-select{border:1px solid var(--line);border-radius:12px;padding:7px 11px;font-size:12.5px; font-weight:600;color:var(--ink);background:#fff;cursor:pointer} .voice-sample{padding:7px 13px !important;font-size:12px !important} .voice-status{font-size:11.5px;color:var(--accent);min-height:15px;min-width:60px;font-weight:600} /* ======================================================================= ⛔ НЕ ТРОГАТЬ (одобрено оператором): «Современный» голосовой орб + думающая лента/ореол. Сохранено как было. ======================================================================= */ .modern-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 6px 10px} .modern-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:6px} .modern-sub{font-size:14px;color:var(--muted);margin:6px 0 30px} .voiceorb{position:relative;width:186px;height:186px;border:0;background:transparent;cursor:pointer; padding:0;margin:0 0 22px;display:flex;align-items:center;justify-content:center; -webkit-appearance:none} .voiceorb .orb-ring{position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg,#06c,#5ab0ff,#e8820c,#06c);opacity:.35; filter:blur(2px);transition:opacity .3s} .voiceorb .orb-core{position:relative;width:150px;height:150px;border-radius:50%; background:radial-gradient(circle at 50% 38%,#ffffff,#f2f4f8 70%); box-shadow:0 10px 30px rgba(0,0,40,.16),inset 0 1px 2px rgba(255,255,255,.9),inset 0 -6px 14px rgba(0,0,60,.05); display:flex;align-items:center;justify-content:center;overflow:hidden} .voiceorb .orb-idle{font-size:54px;line-height:1;transition:opacity .2s,transform .2s} .voiceorb .orb-reel{position:absolute;inset:0;display:none;flex-direction:column;align-items:center} .voiceorb:active{transform:scale(.97)} /* Состояние ЗАПИСИ — пульсирующее красноватое свечение */ .voiceorb.rec .orb-ring{opacity:.85;background:conic-gradient(from 0deg,#d70015,#ff6a7a,#d70015); animation:orbSpin 2.4s linear infinite} .voiceorb.rec .orb-idle{transform:scale(1.06)} .voiceorb.rec .orb-core{animation:orbPulse 1.1s ease-in-out infinite} /* Состояние ДУМАЕТ — ореол по краю кнопки мягко СВЕТИТСЯ и дышит, по нему бежит деликатный световой блик, + РАВНОМЕРНАЯ прокрутка ленты иконок внутри (лента = 2 копии, translateY 0→-50% linear). */ .voiceorb.thinking .orb-ring{ opacity:1; /* мягкий дорогой ореол по краю: синий #066cff + тёплый #ff9a23 */ background:radial-gradient(circle at 50% 50%, rgba(6,108,255,0) 54%, rgba(6,108,255,.34) 70%, rgba(255,154,35,.24) 85%, rgba(6,108,255,0) 100%); filter:blur(3px); animation:haloGlow 2.2s ease-in-out infinite} /* бегущий по краю световой блик — отдельный слой (conic), мягко вращается */ .voiceorb.thinking .orb-ring::after{ content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(6,108,255,.0) 30deg, rgba(255,255,255,.85) 70deg, rgba(255,154,35,.5) 96deg, rgba(6,108,255,.0) 140deg, rgba(6,108,255,0) 360deg); -webkit-mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 72%,transparent 100%); mask:radial-gradient(circle at 50% 50%,transparent 58%,#000 72%,transparent 100%); filter:blur(2px); animation:haloSweep 3.4s linear infinite} .voiceorb.thinking .orb-idle{opacity:0} .voiceorb.thinking .orb-reel{display:flex} .voiceorb.thinking .orb-core{animation:orbGlow 1.6s ease-in-out infinite} /* Дорожка .reel-track держит все иконки и прокручивается; orb-reel — окно. */ .orb-reel .reel-track{display:flex;flex-direction:column;align-items:center} .voiceorb.thinking .orb-reel .reel-track{animation:reelScroll 3s linear infinite} /* Каждая иконка ленты = высота окна барабана (150px), одна видна за раз. */ .orb-reel span:not(.reel-track){height:150px;flex:0 0 150px;display:flex;align-items:center;justify-content:center;line-height:1} .orb-reel span svg{width:96px;height:96px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,40,.22))} /* Равномерная бесшовная прокрутка: -50% = ровно одна копия набора. */ @keyframes reelScroll{from{transform:translateY(0)}to{transform:translateY(-50%)}} @keyframes orbSpin{to{transform:rotate(360deg)}} /* Ореол «дышит»: мягко меняет яркость свечения и внешний glow вокруг кнопки. */ @keyframes haloGlow{ 0%,100%{opacity:.7;filter:blur(3px) drop-shadow(0 0 6px rgba(6,108,255,.25))} 50% {opacity:1; filter:blur(4px) drop-shadow(0 0 16px rgba(6,108,255,.45)) drop-shadow(0 0 10px rgba(255,154,35,.3))} } /* По краю мягко бежит световой блик (вращение conic-слоя). */ @keyframes haloSweep{to{transform:rotate(360deg)}} @keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} @keyframes orbGlow{0%,100%{box-shadow:0 10px 30px rgba(0,0,40,.16),inset 0 0 0 rgba(6,108,255,0)} 50%{box-shadow:0 10px 34px rgba(6,108,255,.28),inset 0 0 22px rgba(6,108,255,.12)}} .modern-status{font-size:14px;color:var(--muted);min-height:19px;font-weight:500} .modern-status.busy{color:var(--accent)}.modern-status.err{color:var(--red)}.modern-status.ok{color:var(--green)} .modern-answer{margin:16px 6px 4px;font-size:15px;line-height:1.55;color:var(--ink); background:var(--bg-soft);border-radius:var(--r-md);padding:0;max-height:0;overflow:hidden; transition:max-height .35s var(--ease),padding .35s var(--ease);text-align:left;width:100%} .modern-answer.show{padding:14px 16px;max-height:320px;overflow:auto} .modern-replay{margin-top:12px} /* «думающая» подсветка кнопке-микрофону в Классике (НЕ ТРОГАТЬ ленту) */ .btn.mic.thinking{background:linear-gradient(135deg,#eaf2ff,#fff0e0);color:var(--accent); overflow:hidden;position:relative} .btn.mic .mic-reel{display:none} .btn.mic.thinking .mic-glyph{display:none} .btn.mic.thinking .mic-reel{display:flex;align-items:center;justify-content:center;height:26px;width:auto;line-height:0} .mic-reel .reel-track{display:flex;flex-direction:column;align-items:center} .btn.mic.thinking .mic-reel .reel-track{animation:reelScroll 3s linear infinite} .btn.mic.thinking .mic-reel span:not(.reel-track){display:flex;flex:0 0 26px;align-items:center;justify-content:center; height:26px;width:26px;line-height:0} .btn.mic.thinking .mic-reel span svg{width:24px;height:24px;display:block} /* ======================================================================= Чистый минималистичный индикатор «думает» (Apple): три пульсирующие точки акцентного синего. Заменяет прежнюю мультяшную ленту иконок THINK_SVGS. Свечение ореола (.orb-ring + haloGlow/haloSweep) сохранено отдельно. ======================================================================= */ .think-dots{display:flex;align-items:center;justify-content:center;gap:7px} .think-dots i{display:block;width:9px;height:9px;border-radius:50%; background:var(--accent);opacity:.35;animation:thinkDot 1.1s ease-in-out infinite} .think-dots i:nth-child(2){animation-delay:.16s} .think-dots i:nth-child(3){animation-delay:.32s} /* В большом орбе точки крупнее и по центру окна; занимают всю высоту орб-ядра. */ .voiceorb .orb-reel .think-dots{height:100%;gap:11px} .voiceorb .orb-reel .think-dots i{width:13px;height:13px} /* В кнопке-микрофоне точки компактные. */ .btn.mic .mic-reel .think-dots{height:26px;gap:5px} .btn.mic .mic-reel .think-dots i{width:6px;height:6px} @keyframes thinkDot{0%,100%{opacity:.3;transform:scale(.78)}50%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.think-dots i{animation-duration:1.6s}} /* ======================================================================= Каталог — поиск, чипы категорий, сетка карточек (крупное фото) ======================================================================= */ .cat-search{position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 70%,rgba(255,255,255,0));padding:6px 0 8px;z-index:3} .cat-search input{width:100%;border:1px solid var(--line);border-radius:var(--r-pill); padding:12px 18px;font-size:15px;outline:none;background:var(--bg-soft);color:var(--ink); transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .cat-search input::placeholder{color:var(--muted)} .cat-search input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)} .cat-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch} .cat-chips::-webkit-scrollbar{display:none} .cat-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill); padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)} @media (hover:hover){.cat-chip:hover{background:var(--bg-soft)}} .cat-chip:active{transform:scale(.97)} .cat-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)} .cat-chip .cnt{opacity:.65;font-weight:500;margin-left:4px;font-variant-numeric:tabular-nums} .cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 0 8px} .pcard{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r-md); overflow:hidden;cursor:pointer;display:flex;flex-direction:column; box-shadow:var(--shadow-card); transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)} @media (hover:hover){.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-h);border-color:var(--line)}} .pcard:active{transform:scale(.985)} /* Фото товара крупно, ровный квадрат, светлый фон */ .pcard .ph{position:relative;aspect-ratio:1/1;width:100%; display:flex;align-items:center;justify-content:center;font-size:40px; background:var(--bg-soft);box-shadow:inset 0 -1px 0 var(--line-soft);overflow:hidden} .pcard .ph .pimg{width:100%;height:100%;object-fit:cover;display:block} .pcard .ph.noimg{background:var(--bg-soft)} .pcard .ph.noimg .pimg{display:none} .pcard .bd{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1 1 auto} /* Avito-раскладка: крупное фото → крупная цена (самый заметный элемент) → название */ .pcard .pr{font-weight:700;color:var(--ink);font-size:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .pcard .nm{font-size:13px;font-weight:500;line-height:1.32;height:2.64em;overflow:hidden;color:var(--ink);margin-top:5px} .pcard .un{font-size:11px;color:var(--muted)} .pcard .stk{font-size:11px;font-weight:500;color:var(--green);margin-top:auto;padding-top:6px} .pcard .stk.no{color:var(--muted)} .cat-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:14px;padding:30px 0} /* Skeleton-плейсхолдер каталога */ .pcard.skeleton,.pcard.skel{pointer-events:none;cursor:default;box-shadow:var(--shadow-card)} .pcard.skeleton .ph,.pcard.skeleton .sk-line, .pcard.skel .ph,.pcard.skel .sk-line{background:linear-gradient(100deg,#ececf0 30%,#f6f6f9 50%,#ececf0 70%); background-size:200% 100%;animation:skel 1.3s ease-in-out infinite} .pcard.skeleton .sk-line,.pcard.skel .sk-line{height:11px;border-radius:7px;margin:8px 12px 0} .pcard.skeleton .sk-line.short{width:55%} @keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}} /* ===== Модалка деталей товара (bottom sheet) ===== */ .sheet{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end} .sheet[hidden]{display:none} .sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .sheet-card{position:relative;width:100%;max-height:90%;overflow:auto;background:var(--bg); border-radius:26px 26px 0 0;padding:20px 18px 24px;box-shadow:var(--shadow-pop);animation:slideup .3s var(--ease)} .sheet-card::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%); width:38px;height:5px;border-radius:3px;background:var(--line)} @keyframes slideup{from{transform:translateY(40px);opacity:.5}to{transform:translateY(0);opacity:1}} .sheet-card .ph{position:relative;height:170px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; font-size:54px;margin:8px 0 14px;background:var(--bg-soft);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-soft)} .sheet-card .ph .pimg{width:100%;height:100%;object-fit:cover;display:block} .sheet-card .ph.noimg{background:var(--bg-soft)} .sheet-card .ph.noimg .pimg{display:none} .sheet-card .nm{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em} .sheet-card .meta{color:var(--muted);font-size:13px;margin-top:3px} .sheet-card .pr{font-size:24px;font-weight:600;color:var(--ink);margin:8px 0;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .sheet-card .specs{list-style:none;padding:0;margin:10px 0} .sheet-card .specs li{display:flex;justify-content:space-between;gap:12px;font-size:14px; padding:9px 0;border-bottom:1px solid var(--hair)} .sheet-card .specs li:last-child{border-bottom:none} .sheet-card .specs li span:first-child{color:var(--muted)} .sheet-card .specs li span:last-child{font-weight:500;text-align:right} .sheet-card .alabel{font-size:12px;color:var(--muted);margin:14px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .sheet-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;border-radius:50%; background:var(--bg-soft);font-size:15px;cursor:pointer;color:var(--ink-soft); display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease)} @media (hover:hover){.sheet-close:hover{background:#e3e3e8}} /* Метрики */ .metric{display:inline-block;background:var(--bg-card);border:1px solid var(--line-soft); border-radius:var(--r-sm);padding:12px 14px;margin:5px 6px 0 0;min-width:92px;box-shadow:var(--shadow-card)} .metric .v{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .metric .l{font-size:11.5px;color:var(--muted);margin-top:2px} .empty{text-align:center;color:var(--muted);font-size:14px;padding:30px 0} .set-row{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:11px 0;border-bottom:1px solid var(--hair)} .set-row input{width:104px;border:1px solid var(--line);border-radius:12px;padding:8px 11px; font-size:14px;text-align:right;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums} .set-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,113,227,.12)} /* ===== Структурированный ответ помощника ===== */ .bubble .ans-p{margin:0 0 6px}.bubble .ans-p:last-child{margin-bottom:0} .bubble ol.ans-list{margin:6px 0 2px;padding-left:22px} .bubble ol.ans-list li{margin:4px 0;line-height:1.45} .modern-answer .ans-p{margin:0 0 6px} .modern-answer ol.ans-list{margin:6px 0;padding-left:22px} .modern-answer ol.ans-list li{margin:5px 0} /* ===== Кнопки-варианты под уточняющим вопросом ===== */ .clarify-opts{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;margin:2px 0 6px} .clarify-opt{border:1px solid var(--accent);background:var(--accent-tint);color:var(--accent); border-radius:var(--r-pill);padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer; transition:background .15s var(--ease),transform .12s var(--ease)} .clarify-opt:active{transform:scale(.97)} @media (hover:hover){.clarify-opt:hover{background:#dcebfb}} /* ===== Тест-режим (плашка) ===== */ .test-banner{font-size:12px;color:var(--warn);background:var(--warn-tint);border:1px solid rgba(154,101,0,.18); border-radius:14px;padding:9px 12px;margin:0 0 12px;font-weight:500} .bubble.sys + .bubble.sys{margin-top:-2px} /* ===== Режимы для всех ролей ===== */ .rmode{display:none}.rmode.on{display:block;animation:fade .25s var(--ease)} /* ===== Менеджер: табы кабинета (скролл-сегмент) ===== */ .mtabs{overflow-x:auto} .mtabs::-webkit-scrollbar{display:none} .mtabs button{flex:0 0 auto;padding:9px 13px;font-size:12.5px} .mtab{display:none}.mtab.on{display:block;animation:fade .25s var(--ease)} /* ===== Кабинет обучения (формы) ===== */ .learn-stats{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:var(--muted); background:var(--bg-soft);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:8px} .learn-stats b{color:var(--ink);font-weight:600} .lform{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:var(--r-md); padding:13px;margin:6px 0;box-shadow:var(--shadow-card)} .lform input,.lform textarea{width:100%;border:1px solid var(--line);border-radius:12px; padding:10px 12px;font-size:14px;outline:none;margin:5px 0;font-family:inherit; background:var(--bg-soft);color:var(--ink); transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .lform input::placeholder,.lform textarea::placeholder{color:var(--muted)} .lform input:focus,.lform textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(0,113,227,.12)} .lform textarea{resize:vertical} .lrow{display:flex;gap:8px}.lrow input{flex:1;min-width:0} .lflash{font-size:12.5px;margin-top:8px;font-weight:600} .lflash.ok{color:var(--green)}.lflash.err{color:var(--red)} /* ===== Руководитель: дашборд ===== */ .bmetrics{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0} .bmetric{flex:1 1 calc(33% - 9px);min-width:94px;background:var(--bg-card); border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 13px;box-shadow:var(--shadow-card)} .bmetric .bv{font-size:20px;font-weight:600;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .bmetric .bl{font-size:11px;color:var(--muted);margin-top:4px} /* Без пестроты: акцентируем только цифру, спокойными тонами */ .bmetric.b-blue .bv{color:var(--accent)} .bmetric.b-green .bv{color:var(--green)} .bmetric.b-orange .bv{color:var(--ink)} .bmetric.b-red .bv{color:var(--red)} .bcard{padding:14px} .bsub{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em} .erow{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 0; border-bottom:1px solid var(--hair)} .erow:last-child{border-bottom:0} .erow.sub{padding:5px 0;border-bottom:0;font-size:12.5px} .erow span:first-child{font-weight:500} .test-card{background:var(--warn-tint);border-color:rgba(154,101,0,.18)} /* ===== Менеджер: фильтр по ответственному (выбор менеджера) ===== */ .mgr-filter{display:flex;align-items:center;gap:8px;overflow-x:auto; padding:6px 0 10px;-webkit-overflow-scrolling:touch} .mgr-filter::-webkit-scrollbar{display:none} .mgr-filter-lbl{flex:0 0 auto;font-size:12px;color:var(--muted);font-weight:600} .mgr-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill); padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)} .mgr-chip:active{transform:scale(.97)} .mgr-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)} /* ===== Отзывы (руководитель + клиент): Apple-карточки со звёздами ===== */ .stars{display:inline-flex;gap:2px;font-size:14px;line-height:1;letter-spacing:1px} .stars .star{color:var(--line)} .stars .star.on{color:var(--accent)} .review-card{margin:8px 0} .rv-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .rv-date{font-size:12px} .rv-text{font-size:14px;line-height:1.5;color:var(--ink);margin:8px 0 6px} .rv-meta{font-size:12.5px} .rv-summary{display:flex;align-items:center;gap:14px} .rv-summary .rv-avg{font-size:34px;font-weight:600;letter-spacing:-.03em; font-variant-numeric:tabular-nums;color:var(--ink);line-height:1} .acc-reviews{margin:2px 0 4px} /* спарклайн столбиков — единый синий */ .spark{display:flex;align-items:flex-end;gap:4px;height:56px} .spark .bar{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:3px;opacity:.85} /* горизонтальные бары топов — единый синий */ .brow{margin:10px 0} .brow-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:5px} .brow-top span:first-child{font-weight:500} .bbar{background:var(--bg-soft);border-radius:var(--r-pill);height:8px;overflow:hidden} .bbar > div{height:100%;background:var(--accent);border-radius:var(--r-pill)} /* ======================================================================= Доступность (в т.ч. пожилые): тап-цели ≥44px, фокус, reduce-motion ======================================================================= */ .btn,.composer input,.cat-search input,.cat-chip,.quick button, .clarify-opt,.sw button,.voice-sample,.speak-toggle, .roles button,.ctabs button,.modes button,.mtabs button,.periods button{min-height:44px} .btn.sm{min-height:40px} .cat-chip,.quick button,.clarify-opt{display:inline-flex;align-items:center} .btn:focus-visible,.cat-chip:focus-visible,.quick button:focus-visible, .composer input:focus-visible,.cat-search input:focus-visible, .clarify-opt:focus-visible,.pcard:focus-visible,.ctabs button:focus-visible, .modes button:focus-visible,.mtabs button:focus-visible,.periods button:focus-visible, .roles button:focus-visible,.sw button:focus-visible,.sheet-close:focus-visible{ outline:2px solid var(--accent);outline-offset:2px} /* ======================================================================= МОБИЛЬНЫЙ ПОЛНОЭКРАН: на узком экране (≤480px) декоративная рамка-«телефон» убирается, приложение занимает весь экран — как настоящее установленное app. Рамка .phone / .phone-notch / .phone-status остаётся только на широком десктопе. ======================================================================= */ @media (max-width:480px){ body{padding:0;background:var(--bg)} .stage,.stage.role-manager,.stage.role-boss,.stage.role-driver,.stage.role-helper{ padding:0;border-radius:0;max-width:100%;background:var(--bg)} .phone{width:100%;max-width:100%;border-radius:0;padding:0;background:var(--bg);box-shadow:none} .phone-screen{border-radius:0;height:100vh;height:100dvh} .phone-notch,.phone-status{display:none} .phone-content{height:100%} /* запас под «домашний индикатор» iOS */ .appscroll{padding-bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px))} .tabbar{height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .view.on,.ctab.on,.cmode.on,.rmode.on,.mtab.on{animation:none} .pcard{transition:none} } /* ===== Экспертный подбор «под задачу» (knowledge/16) — Apple-стиль ===== */ /* Pill-кнопка в каталоге */ .expert-pill{display:block;width:100%;margin:2px 0 10px;min-height:46px;border:0;cursor:pointer; border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:15px;font-weight:600; letter-spacing:-.01em;box-shadow:0 6px 18px rgba(0,113,227,.22);transition:background .2s var(--ease),transform .15s var(--ease)} @media (hover:hover){.expert-pill:hover{background:var(--accent-press)}} .expert-pill:active{transform:scale(.98)} /* Шит подбора — поверх шита товара */ .sheet-expert{z-index:40} .x-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:6px} .x-sub{color:var(--muted);font-size:13.5px;line-height:1.45;margin:4px 0 6px} .x-task-tag{display:inline-block;background:var(--accent-tint);color:var(--accent); border-radius:var(--r-pill);padding:6px 12px;font-size:12.5px;font-weight:600;margin:4px 0 6px} /* Список задач */ .x-tasks{display:flex;flex-direction:column;gap:8px;margin:10px 0;max-height:44vh;overflow-y:auto; -webkit-overflow-scrolling:touch;padding:2px} .x-task{display:flex;align-items:center;gap:11px;text-align:left;min-height:48px;cursor:pointer; border:1px solid var(--line);background:#fff;border-radius:var(--r-md);padding:10px 14px; font-size:14.5px;font-weight:500;color:var(--ink);transition:background .15s var(--ease),border-color .15s var(--ease)} @media (hover:hover){.x-task:hover{background:var(--bg-soft)}} .x-task:active{transform:scale(.99)} .x-task.on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent);font-weight:600} .x-task .x-ico{font-size:19px;flex:0 0 auto} .x-task .x-nm{line-height:1.3} /* Поле площади */ .x-arearow{margin:6px 0 12px} .x-arealbl{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px} .x-area{width:100%;border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 16px; font-size:15px;background:var(--bg-soft);outline:none} .x-area:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)} /* «Почему» — пункты рекомендации */ .x-whylbl{font-size:12px;color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:.03em} .x-why{margin:0 0 6px;padding-left:20px} .x-why li{font-size:14px;line-height:1.5;margin:4px 0;color:var(--ink)} .x-why li::marker{color:var(--accent)} /* Расчёт количества */ .x-qty{background:var(--bg-soft);border-radius:var(--r-md);padding:12px 14px;margin:10px 0} .x-qty-n{font-size:16px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .x-qty-note{color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:3px} /* Экспертная оговорка */ .x-note{background:var(--accent-tint);color:var(--ink-soft);border-radius:var(--r-md); padding:10px 13px;font-size:12.5px;line-height:1.5;margin:8px 0} /* Альтернативы */ .x-alt{cursor:pointer;margin-top:8px} .x-alt-note{color:var(--warn);font-size:12.5px;line-height:1.45;margin-top:4px} /* Жёлтая плашка-предупреждение (guardrail — предупреждает, не блокирует) */ .x-warn{background:var(--warn-tint);border-radius:var(--r-md);padding:14px 15px;margin-top:14px; box-shadow:inset 0 0 0 1px rgba(154,101,0,.16)} .x-warn-t{color:var(--warn);font-weight:700;font-size:15px;letter-spacing:-.01em;margin-bottom:5px} .x-warn-b{color:var(--warn);font-size:13.5px;line-height:1.5} /* «Подходит для / Не подходит» в карточке товара */ .pass{margin:4px 0 8px;display:flex;flex-direction:column;gap:7px} .pass-row{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5; border-radius:var(--r-sm);padding:9px 11px} .pass-row .pass-ic{flex:0 0 auto;font-weight:700;margin-top:1px} .pass-row .pass-lbl{font-weight:600} .pass-row.good{background:#eaf7ef;color:#1d6b3c} .pass-row.bad{background:var(--warn-tint);color:var(--warn)}