/* ═══════════════════════════════════════════════════════════ НОРМА · UX-маршруты v2 — флоу-борд Визуальная система: «Полярный протокол» (токены без изменений) Продуктовая логика: FLOWS.md — короткий маршрутизатор жалоба → проблема → уточнения → оценка (→ документ) ═══════════════════════════════════════════════════════════ */ /* Токены вынесены в norma-tokens.css (единый источник) — подключён в */ *,*::before,*::after{box-sizing:border-box} html{transition:background 260ms var(--e)} body{ margin:0;font-family:var(--f-ui);background:var(--stage);color:var(--tx-1); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-size:0.9375rem;line-height:1.45; } button,input,textarea{font:inherit;color:inherit;background:none;border:0;margin:0} button{cursor:pointer;-webkit-tap-highlight-color:transparent} :focus{outline:none} :focus-visible{outline:2px solid var(--au);outline-offset:2px;border-radius:4px} ul,ol{margin:0;padding:0;list-style:none} h1,h2,h3,h4,p{margin:0} img,svg{display:block} .ic{width:22px;height:22px;flex:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none} .ic-sm{width:18px;height:18px} .mono{font-family:var(--f-mono);font-variant-ligatures:none} .topbar{ flex:none;position:relative;z-index:6; padding-top:env(safe-area-inset-top,0px); background:linear-gradient(180deg,var(--ink-900) 62%,var(--bar-fade)); } .topbar-row{height:56px;display:flex;align-items:center;gap:4px;padding:10px 8px 0} .tb-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--tx-2)} .tb-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 8px} .tb-title b{ display:block;font-weight:600;font-size:0.9375rem;letter-spacing:-.015em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } .tb-eyebrow{ display:block;font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em; text-transform:uppercase;color:var(--au);opacity:.85;margin-bottom:1px; } .meter{flex:none;display:block;width:100%;height:9px;position:relative;z-index:6;overflow:hidden} .meter::before{content:'';position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line-soft)} .meter::after{transition:width var(--dur-meter) var(--e); content:'';position:absolute;left:0;top:6px;height:2px;width:var(--p,0%);border-radius:0 2px 2px 0; background:linear-gradient(90deg,color-mix(in srgb,var(--au) 22%,transparent),var(--au) 62%,color-mix(in srgb,var(--au) 90%,var(--au-hi))); box-shadow:0 0 14px 1px color-mix(in srgb,var(--au) 50%,transparent); } .meter.live::after{animation:breathe 1.8s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}} .view{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column} .view.scroll{overflow-y:auto;scrollbar-width:none} .view.scroll::-webkit-scrollbar{display:none} .pad{padding-left:var(--gut);padding-right:var(--gut)} .eyebrow{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--tx-3);display:flex;align-items:center;gap:11px; } .eyebrow::after{content:'';flex:1;height:1px;background:var(--line-soft)} .h-md{font-size:1.1875rem;line-height:1.2;font-weight:600;letter-spacing:-.024em} /* кнопки, чипы, сегменты */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:0 19px;border-radius:12px; font-size:0.9375rem;font-weight:500;letter-spacing:-.01em; } .btn-p{background:var(--solid);color:var(--solid-tx);font-weight:600} .btn-p[disabled]{opacity:.35;cursor:default} .btn-g{border:1px solid var(--line);color:var(--tx-1);background:var(--ink-800)} .btn-q{color:var(--tx-2)} .btn-full{display:flex;width:100%} .btn .ic{width:18px;height:18px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{ display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:999px; border:1px solid var(--line);background:var(--ink-800);font-size:0.8438rem;color:var(--tx-2); } .chip.sel{ border-color:color-mix(in srgb,var(--au) 45%,transparent); color:var(--tx-1);background:color-mix(in srgb,var(--au) 9%,var(--ink-800)); } .chip .ic{width:15px;height:15px;color:var(--au)} /* в светлой теме tx-2 на чипах читается слишком блёкло — поднимаем на ступень */ [data-theme="light"] .chip{color:#39434F} [data-theme="light"] .chip:hover,[data-theme="light"] .chip.sel{color:var(--tx-1)} /* «зачем это» — юридическая значимость вопроса */ .why{display:flex;gap:8px;align-items:flex-start;margin-top:13px;font-size:0.75rem;line-height:1.5;color:var(--tx-3)} .why .ic{width:14px;height:14px;flex:none;margin-top:1px;color:color-mix(in srgb,var(--au) 70%,var(--tx-3))} /* расчёт в карточке оценки */ .calc{margin:0 16px 16px;border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--ink-850);overflow:hidden} .calc-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 13px;border-top:1px solid var(--line-soft)} .calc-r:first-child{border-top:0} .calc-r span{font-size:0.75rem;color:var(--tx-2);line-height:1.4} .calc-r b{font-family:var(--f-mono);font-size:0.75rem;font-weight:400;color:var(--tx-1);white-space:nowrap} .calc-r em{display:block;font-style:normal;font-size:0.6875rem;color:var(--tx-4);margin-top:1px} .calc-r.total{background:var(--ink-750)} .calc-r.total span{color:var(--tx-1);font-weight:500;font-size:0.75rem} .calc-r.total b{color:var(--au);font-weight:500} .seg{display:flex;padding:3px;gap:2px;background:var(--seg-bg);border:1px solid var(--line-soft);border-radius:11px} .seg button{ flex:1;height:32px;border-radius:8px;font-size:0.75rem;color:var(--tx-3); display:flex;align-items:center;justify-content:center;gap:6px; } .seg button[aria-selected="true"]{background:var(--seg-on);color:var(--tx-1);font-weight:500;box-shadow:var(--seg-sh)} /* точки стадий и строки диалогов */ .dot{width:5px;height:5px;border-radius:50%;background:var(--tx-4);flex:none} .dot.wait{background:var(--au-dispute);animation:blink 1.9s var(--e) infinite} .dot.ready{background:var(--au);box-shadow:0 0 7px color-mix(in srgb,var(--au) 70%,transparent)} .dot.done{background:var(--solid);opacity:.5} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} .dl-group{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--tx-3);padding:28px var(--gut) 8px;display:flex;align-items:center;gap:8px; } .dl-group em{font-style:normal;margin-left:auto;color:var(--tx-4)} .row{ position:relative;display:flex;gap:13px;align-items:flex-start; padding:15px var(--gut) 15px calc(var(--gut) - 4px); text-align:left;width:100%; } .row::before{ content:'';position:absolute;left:0;top:13px;bottom:13px;width:2px;border-radius:2px; background:var(--au);opacity:.75; } .row-b{flex:1;min-width:0} .row-t{display:flex;align-items:baseline;gap:10px} .row-t b{ flex:1;min-width:0;font-size:0.9375rem;font-weight:500;letter-spacing:-.012em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .row-t time{font-family:var(--f-mono);font-size:0.6875rem;color:var(--tx-3);flex:none;letter-spacing:.02em} .row-s{display:flex;align-items:center;gap:10px;margin-top:7px} .row-s .pv{ flex:1;min-width:0;font-size:0.75rem;color:var(--tx-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .row-tag{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--tx-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;flex:none; } .srch{ display:flex;align-items:center;gap:9px;height:46px;padding:0 14px; background:var(--ink-800);border:1px solid var(--line-soft);border-radius:11px; } .srch .ic{width:17px;height:17px;color:var(--tx-4)} .srch span{color:var(--tx-4);font-size:0.8438rem} /* ───────── чат ───────── */ .thread{padding:22px var(--gut) 24px;display:flex;flex-direction:column;gap:28px} .time-sep{ display:flex;align-items:center;gap:10px; font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-4); } .time-sep::before,.time-sep::after{content:'';flex:1;height:1px;background:var(--line-soft)} .msg-u{ align-self:flex-end;max-width:86%; background:var(--ink-700);border:1px solid var(--line); border-radius:16px 16px 5px 16px;padding:13px 16px; font-size:0.9375rem;line-height:1.5; } .msg-a{max-width:100%;position:relative;padding-left:15px} .msg-a::before{ content:'';position:absolute;left:0;top:3px;bottom:3px;width:1.5px;border-radius:2px; background:linear-gradient(180deg,var(--au),color-mix(in srgb,var(--au) 10%,transparent)); } .msg-a .who{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--au);margin-bottom:8px;display:flex;align-items:center;gap:7px; } .msg-a p{font-size:0.9375rem;line-height:1.62;color:var(--tx-1)} .msg-a p + p{margin-top:12px} .msg-a strong{font-weight:600} .msg-a .note{font-size:0.75rem;color:var(--tx-3);margin-top:10px} /* уточняющий вопрос */ .ask{ border:1px solid color-mix(in srgb,var(--au) 30%,var(--line)); border-radius:var(--r-md);padding:19px; background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--au) 7%,transparent),transparent 60%),var(--ink-800); } .ask .q{font-size:0.9375rem;font-weight:500;letter-spacing:-.012em;margin-bottom:4px} .ask .n{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--au);margin-bottom:9px; } .ask .chips{margin-top:16px} /* цитата нормы */ .norm{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);overflow:hidden} .norm + .norm{margin-top:12px} .norm-h{ display:flex;align-items:center;gap:8px;padding:10px 14px; border-bottom:1px solid var(--line-soft);background:var(--ink-750); } .norm-h b{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.02em;color:var(--tx-1);font-weight:500} .norm-h .ic{width:14px;height:14px;color:var(--tx-3)} .norm p{font-family:var(--f-doc);font-size:0.8438rem;line-height:1.55;color:var(--tx-2);padding:12px 16px} /* «Дословно»: той же антиквой, что текст нормы, чуть ярче и с пунктирным подчёркиванием — читается как разворачиваемый элемент, а не кнопка. */ .norm details summary{ font-family:var(--f-doc);font-size:0.8438rem;line-height:1.55;color:var(--tx-1); padding:0 16px 12px;cursor:pointer; text-decoration:underline dotted var(--tx-3);text-underline-offset:3px; } .norm details summary::marker{color:var(--tx-3)} /* «Поделиться» под терминальной справкой: тихая строчная кнопка. */ .msg-share{ display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-family:var(--f-ui);font-size:0.75rem;color:var(--tx-3); } .msg-share .ic{width:13px;height:13px} .msg-share:hover{color:var(--tx-1)} .norm .apply{ display:flex;gap:8px;align-items:flex-start;padding:0 16px 12px; font-size:0.75rem;line-height:1.5;color:var(--tx-2); } .norm .apply i{font-style:normal;color:var(--au);flex:none;font-family:var(--f-mono);font-size:0.6875rem;padding-top:1px} /* ───────── ОЦЕНКА (вердикт) ───────── */ .verdict{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-800); overflow:hidden;position:relative; } .verdict::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--au),transparent); } .v-h{display:flex;align-items:center;gap:9px;padding:16px 16px 0} .v-k{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-4); } .v-tag{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; padding:3px 8px;border-radius:5px;border:1px solid; } .v-tag.viol{color:var(--v-bad);border-color:color-mix(in srgb,var(--v-bad) 50%,transparent);background:color-mix(in srgb,var(--v-bad) 10%,transparent)} .v-tag.disp{color:var(--v-warn);border-color:color-mix(in srgb,var(--v-warn) 50%,transparent);background:color-mix(in srgb,var(--v-warn) 10%,transparent)} .v-tag.none{color:var(--v-ok);border-color:color-mix(in srgb,var(--v-ok) 45%,transparent);background:color-mix(in srgb,var(--v-ok) 8%,transparent)} .v-q{ margin-left:auto;width:26px;height:26px;border-radius:50%;flex:none; border:1.5px solid color-mix(in srgb,var(--au) 55%,var(--line)); color:var(--au);display:grid;place-items:center; font-family:var(--f-doc);font-size:0.8438rem;font-weight:600;line-height:1;position:relative; } .v-q::after{content:'';position:absolute;inset:-9px} .v-share{ margin-left:auto;width:26px;height:26px;border-radius:50%;flex:none; border:1.5px solid var(--line);color:var(--tx-3);display:grid;place-items:center;position:relative; } .v-share .ic{width:13px;height:13px} .v-share::after{content:'';position:absolute;inset:-9px} .v-share + .v-q{margin-left:0} .v-b{padding:11px 16px 17px;font-size:0.9375rem;line-height:1.62} .v-b strong{font-weight:600} .v-b .amount{font-family:var(--f-mono);font-size:0.8438rem;white-space:nowrap} .v-sep{height:1px;background:var(--line-soft)} .v-steps{padding:5px 16px 17px;display:flex;flex-direction:column;gap:12px} .v-steps li{display:flex;gap:11px;font-size:0.8438rem;line-height:1.55;color:var(--tx-1)} .v-steps li i{ font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--au); flex:none;padding-top:3px;min-width:16px; } .v-steps li span{flex:1} .v-cta{display:flex;gap:10px;padding:0 16px 16px} .v-cta .btn{flex:1;min-height:46px;font-size:0.8438rem} .v-cta .btn-q{flex:0 0 auto} /* ───────── нижний лист «На чём основано» ───────── */ .sheet-scrim{position:absolute;inset:0;z-index:30;background:var(--scrim);backdrop-filter:blur(3px)} .sheet{ position:absolute;left:0;right:0;bottom:0;z-index:31;max-height:82%; background:var(--ink-850);border:1px solid var(--line);border-bottom:0; border-radius:22px 22px 0 0;box-shadow:var(--pop-sh); display:flex;flex-direction:column; } .sheet-grab{width:36px;height:4px;border-radius:4px;background:var(--line);margin:10px auto 2px;flex:none} .sheet-h{flex:none;display:flex;align-items:center;gap:10px;padding:8px 22px 13px} .sheet-h b{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;flex:1} .sheet-h .tb-btn{width:36px;height:36px;color:var(--tx-3)} .sheet-b{flex:1;min-height:0;overflow:hidden;padding:0 22px} .sheet-g{ font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--tx-4);margin:14px 0 9px;display:flex;align-items:center;gap:9px; } .sheet-g:first-child{margin-top:2px} .sheet-g::after{content:'';flex:1;height:1px;background:var(--line-soft)} .sheet-foot{ flex:none;display:flex;gap:9px;align-items:flex-start; padding:14px 22px calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft);margin-top:16px; } .sheet-foot .ic{width:15px;height:15px;color:var(--tx-3);flex:none;margin-top:1px} .sheet-foot p{font-size:0.6875rem;line-height:1.5;color:var(--tx-3)} .phone .sheet[hidden],.phone .sheet-scrim[hidden]{display:none} /* ───────── выбор проблемы (мультитема) ───────── */ .pick{display:flex;flex-direction:column;gap:10px;margin-top:15px} .pick-i{ display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%; padding:15px 16px;border:1px solid var(--line);border-radius:var(--r-md); background:var(--ink-800); } .pick-i i{ font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--au); flex:none;padding-top:3px; } .pick-i .tt{flex:1;min-width:0} .pick-i b{display:block;font-size:0.9375rem;font-weight:500;letter-spacing:-.012em;line-height:1.35} .pick-i span{display:block;font-size:0.75rem;color:var(--tx-3);margin-top:4px;line-height:1.45} .pick-i .go{color:var(--tx-4);width:16px;height:16px;margin-top:4px} /* ───────── граница области ───────── */ .bound{ border:1px solid var(--line);border-radius:var(--r-md);padding:18px; background:var(--ink-800); } .bound.crit{ border-color:color-mix(in srgb,var(--au-dispute) 38%,var(--line)); background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--au-dispute) 7%,transparent),transparent 60%),var(--ink-800); } .bound-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px} .bound-h .ic{width:19px;height:19px;color:var(--tx-2);flex:none;margin-top:1px} .bound.crit .bound-h .ic{color:var(--au-dispute)} .bound-h b{font-size:0.9375rem;font-weight:600;letter-spacing:-.015em;line-height:1.35} .bound p{font-size:0.8438rem;line-height:1.55;color:var(--tx-2)} .bound .one{ margin-top:13px;padding-top:13px;border-top:1px solid var(--line-soft); display:flex;gap:11px;font-size:0.8438rem;line-height:1.5;color:var(--tx-1); } .bound .one i{font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--au-dispute);flex:none;padding-top:2px} /* ───────── форма документа ───────── */ .form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-800);overflow:hidden} .form-h{padding:17px 18px 13px;display:flex;align-items:baseline;gap:10px} .form-h b{flex:1;font-size:0.9375rem;font-weight:600;letter-spacing:-.015em} .form-h em{font-style:normal;font-family:var(--f-mono);font-size:0.6875rem;color:var(--tx-3);letter-spacing:.06em} .f-row{padding:11px 18px 13px;border-top:1px solid var(--line-soft)} .f-row label{ display:flex;gap:4px;font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em; text-transform:uppercase;color:var(--tx-4);margin-bottom:5px; } .f-row label b{color:var(--au);font-weight:400} .f-val{font-size:0.9375rem;line-height:1.4} .f-val.mono{font-family:var(--f-mono);font-size:0.8438rem} .f-val.empty{color:var(--tx-4)} .f-row .chips{margin-top:8px} .f-row .chips .chip{min-height:34px;font-size:0.75rem} .form-cta{padding:15px 18px 17px;border-top:1px solid var(--line-soft)} .form-cta .hint{ display:flex;gap:7px;align-items:center;margin-top:10px; font-size:0.75rem;color:var(--tx-3); } .form-cta .hint .ic{width:14px;height:14px;color:var(--au-dispute)} /* ───────── композер и навигация ───────── */ .dock{flex:none;position:relative;z-index:7;margin-top:auto} .dock::before{ content:'';position:absolute;left:-10%;right:-10%;bottom:0;height:150px; background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--au) var(--dock-glow),transparent),transparent 72%); pointer-events:none; } .comp{position:relative;margin:0 14px 10px;border:1px solid var(--line);border-radius:18px;background:var(--ink-800)} .comp-in{display:flex;align-items:flex-end;gap:6px;padding:8px 8px 8px 16px} .comp .ph{flex:1;min-width:0;font-size:0.9375rem;line-height:1.45;padding:11px 0;color:var(--tx-4)} .comp-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--tx-3);flex:none} .comp-send{background:var(--solid);color:var(--solid-tx)} .comp-rail{display:flex;gap:7px;overflow:hidden;padding:0 14px 12px} .comp-rail .chip{min-height:32px;font-size:0.75rem;white-space:nowrap;flex:none} .nav{ flex:none;display:flex;border-top:1px solid var(--line-soft); background:var(--bar-solid);padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); } .nav button{ flex:1;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; color:var(--tx-4);position:relative; } .nav button span{font-size:0.6875rem;letter-spacing:.01em} .nav button[aria-current="page"]{color:var(--tx-1)} .nav button[aria-current="page"]::before{ content:'';position:absolute;top:-1px;width:22px;height:2px;border-radius:2px; background:var(--au);box-shadow:0 0 10px var(--au); } /* ───────── старт ───────── */ .aurora{ position:absolute;left:0;right:0;top:-54px;height:330px;z-index:0;pointer-events:none;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000,#000 38%,transparent); mask-image:linear-gradient(180deg,#000,#000 38%,transparent); } .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(56px)} .aurora i:nth-child(1){left:-16%;top:-46%;width:76%;height:150%;background:var(--au-work);opacity:var(--au-op1)} .aurora i:nth-child(2){left:24%;top:-58%;width:68%;height:154%;background:var(--au-tax);opacity:var(--au-op2)} .aurora i:nth-child(3){left:56%;top:-38%;width:62%;height:132%;background:var(--au-contract);opacity:var(--au-op3)} .hello{position:relative;z-index:1;padding:18px var(--gut) 0} /* v1.2: без пустоты под кнопками */ .hello h1{font-size:1.8125rem;line-height:1.13;font-weight:600;letter-spacing:-.036em;text-wrap:balance;margin-bottom:14px} .hello h1 em{font-family:var(--f-doc);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--au)} .hello p{font-size:0.9375rem;line-height:1.55;color:var(--tx-2);max-width:31ch} .scen{display:flex;flex-direction:column;margin-top:30px;position:relative;z-index:1} .scen-i{ display:flex;align-items:center;gap:14px;text-align:left;width:100%; padding:16px var(--gut);border-top:1px solid var(--line-soft); } .scen-i:last-child{border-bottom:1px solid var(--line-soft)} .scen-i .ic{color:var(--tx-3);width:20px;height:20px} .scen-i b{flex:1;font-size:0.9375rem;font-weight:400;letter-spacing:-.01em;line-height:1.35} .scen-i .go{color:var(--tx-4);width:16px;height:16px} /* ───────── вступление ───────── */ .intro-art{flex:none;position:relative;aspect-ratio:1.3/1;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.55) 76%,transparent); mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.55) 76%,transparent); background:var(--ink-850);display:grid;place-items:center; } .intro-art::before{ content:'';position:absolute;left:50%;top:52%;width:150%;height:230%; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,var(--au),transparent 72%); opacity:.28;filter:blur(30px); } .intro-art .ic{position:relative;width:64px;height:64px;stroke-width:1;color:var(--tx-1);opacity:.42} .intro-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px var(--gut) 0} .intro-body .eyebrow{margin-bottom:16px} .intro-body h1{font-size:1.6875rem;line-height:1.14;font-weight:600;letter-spacing:-.034em;text-wrap:balance;margin-bottom:15px} .intro-body p{font-size:0.9375rem;line-height:1.6;color:var(--tx-2);max-width:34ch} .intro-note{ margin-top:auto;padding-bottom:6px; font-size:0.6875rem;line-height:1.5;color:var(--tx-3);display:flex;gap:9px;align-items:flex-start; } .intro-note .ic{width:15px;height:15px;color:var(--au);flex:none;margin-top:1px} .intro-foot{flex:none;padding:20px var(--gut) 26px;display:flex;align-items:center;gap:16px} .intro-dots{display:flex;gap:6px;flex:1} .intro-dots i{display:block;width:20px;height:2px;border-radius:2px;background:var(--line)} .intro-dots i.on{width:34px;background:var(--au);box-shadow:0 0 10px color-mix(in srgb,var(--au) 60%,transparent)} .intro-foot .btn-q{padding:0 4px} /* ───────── лист-документ ───────── */ .deskbg{flex:1;min-height:0;overflow:hidden;background:var(--desk);padding:var(--paper-pad)} .paper{ background:var(--paper);color:var(--paper-ink);min-height:100%;position:relative; padding:0 0 28px;border-radius:var(--paper-r);box-shadow:var(--paper-sh);overflow:hidden; } .paper::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--au-work),var(--au-tax) 55%,var(--au-contract)); } .paper-h{padding:26px 26px 20px;border-bottom:1px solid var(--paper-line)} .paper-org{display:flex;align-items:center;gap:9px;margin-bottom:18px} .mark{ width:30px;height:30px;border-radius:9px;flex:none;position:relative;overflow:hidden; background:var(--ink-700);display:grid;place-items:center; } .mark::after{ content:'';position:absolute;left:0;right:0;top:0;height:2px; background:linear-gradient(90deg,var(--au-work),var(--au-tax),var(--au-contract)); } .mark b{font-size:0.8438rem;font-weight:700;letter-spacing:-.04em;color:var(--tx-1)} .mark svg{width:17px;height:17px;display:block} .mark.logo{background:var(--ink-750);border:1px solid var(--line-soft)} .mark.logo::after{display:none} .paper-org .mark{background:var(--paper-ink)} .paper-org .mark b{color:var(--paper)} .paper-org div{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--paper-tx2)} .paper-org div b{display:block;font-family:var(--f-ui);font-size:0.8438rem;letter-spacing:-.01em;text-transform:none;color:var(--paper-ink);font-weight:600} .paper h1{ font-family:var(--f-doc);font-size:1.4375rem;line-height:1.2;font-weight:500; letter-spacing:-.012em;margin-bottom:16px;text-wrap:balance; } .paper-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:0.75rem} .paper-meta dt{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--paper-tx2);padding-top:2px} .paper-meta dd{margin:0;font-size:0.75rem} .paper-meta dd.mono{font-family:var(--f-mono);font-size:0.6875rem} .paper-s{padding:22px 26px 0} .paper-s p{font-family:var(--f-doc);font-size:0.9375rem;line-height:1.58} .paper-s p + p{margin-top:11px} .paper-s .sum{font-family:var(--f-mono);font-size:0.8438rem;white-space:nowrap} .paper-f{ margin:24px 26px 0;padding-top:16px;border-top:1px solid var(--paper-line); display:flex;gap:18px;align-items:flex-start; } .paper-f p{font-size:0.6875rem;line-height:1.5;color:var(--paper-tx2)} .seal{ width:58px;height:58px;flex:none;border-radius:50%; border:1.5px solid var(--paper-ink);display:grid;place-items:center; font-family:var(--f-mono);font-size:0.4688rem;letter-spacing:.1em;text-align:center; line-height:1.35;opacity:.55;transform:rotate(-7deg);color:var(--paper-ink); } .paper-act{display:flex;gap:10px;padding:22px 26px 0} .paper-act .btn{flex:1;background:var(--paper-ink);color:var(--paper);min-height:44px;font-size:0.8438rem} .paper-act .btn.alt{flex:0 0 52px;padding:0;background:transparent;color:var(--paper-ink);border:1px solid var(--paper-line)} /* ───────── оболочка приложения ───────── */ .stage{min-height:100dvh;display:grid;place-items:center;padding:0;background: radial-gradient(900px 500px at 50% -10%,var(--stage-glow),transparent 70%),var(--stage)} .frame{ width:100%;max-width:none;height:100dvh;position:relative;overflow:hidden;background:var(--ink-900); transition:background-color 260ms var(--e),border-color 260ms var(--e); } @media(min-width:760px){ .stage{padding:28px} .frame{width:402px;height:calc(100dvh - 56px);max-height:880px; border-radius:38px;border:1px solid var(--frame-b); box-shadow:var(--frame-sh);} } .app{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;isolation:isolate} .meter{cursor:pointer} .tracker{ flex:none;overflow:hidden;max-height:0;border-bottom:1px solid transparent; transition:max-height var(--t-slow) var(--e);background:var(--ink-850);position:relative;z-index:5; } .app[data-tracker="1"] .tracker{max-height:96px;border-bottom-color:var(--line-soft)} .tracker-in{display:flex;padding:14px var(--gut) 16px;gap:2px} .stg{flex:1;min-width:0} .stg i{display:block;height:2px;border-radius:2px;background:var(--ink-700);margin-bottom:8px} .stg.done i{background:color-mix(in srgb,var(--au) 55%,transparent)} .stg.now i{background:var(--au);box-shadow:0 0 10px color-mix(in srgb,var(--au) 60%,transparent)} .stg span{display:block;font-size:0.6875rem;letter-spacing:.02em;color:var(--tx-4); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px} .stg.done span{color:var(--tx-3)} .stg.now span{color:var(--tx-1);font-weight:500} .view{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;position:relative;display:block} .view::-webkit-scrollbar{display:none} .screen{display:none;padding:0 0 8px;min-height:100%} .screen.on{display:block;animation:scrIn var(--dur-screen) var(--e)} @keyframes scrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* шаг сценария — тот же ритм 28px, что и между шагами */ .step{display:flex;flex-direction:column;gap:28px} .step[hidden]{display:none!important} .ask.answered{opacity:.6} .thread[hidden]{display:none} /* панель диалогов */ .scrim{ position:absolute;inset:0;z-index:20;background:var(--scrim); backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--t); } .app[data-drawer="1"] .scrim{opacity:1;pointer-events:auto} .drawer{ position:absolute;z-index:21;top:0;bottom:0;left:0;width:88%;max-width:330px; background:var(--ink-850);border-right:1px solid var(--line); display:flex;flex-direction:column; transform:translateX(-102%);transition:transform var(--t-slow) var(--e); } /* тень — только у открытой панели, иначе она торчит из-за края экрана */ .app[data-drawer="1"] .drawer{transform:none;box-shadow:24px 0 60px -20px rgba(0,0,0,.35)} .dw-top{flex:none;padding:16px 16px 12px;border-bottom:1px solid var(--line-soft)} .dw-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px} .dw-brand strong{font-size:0.9375rem;font-weight:600;letter-spacing:-.025em} .dw-brand span{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase; color:var(--tx-4);display:block;margin-top:-1px} /* .dw-brand span перебивал grid у знака — возвращаем центрирование */ .dw-brand span.mark{display:grid;place-items:center;margin-top:0} .dw-brand .tb-btn{margin-left:auto} .dw-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:8px} .dw-list::-webkit-scrollbar{display:none} .dw-bot{flex:none;border-top:1px solid var(--line-soft);padding:10px 12px 12px;display:flex;gap:8px} .dw-bot .btn{flex:1;min-height:46px;font-size:0.8438rem} .sw-all{ display:flex;align-items:center;gap:9px;width:100%;padding:13px 16px; border-top:1px solid var(--line-soft);font-size:0.8438rem;color:var(--tx-2); } .sw-all .ic{width:17px;height:17px;margin-left:auto} /* каталог «Право» */ .cat{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--gut)} .cat-i{ text-align:left;padding:12px 13px 11px;border-radius:var(--r-md); border:1px solid var(--line-soft);background:var(--ink-850); position:relative;overflow:hidden;isolation:isolate; } /* линия уходит в закругления карточки, не выходя за периметр */ .cat-i::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--au);opacity:.7} /* мягкое свечение цвета темы из левого верхнего угла */ .cat-i::after{ content:'';position:absolute;left:-28%;top:-60%;width:95%;height:130%;border-radius:50%; background:radial-gradient(closest-side,var(--au),transparent 72%); opacity:.12;filter:blur(16px);pointer-events:none; } [data-theme="light"] .cat-i::after{opacity:.08} .cat-i.sel{border-color:color-mix(in srgb,var(--au) 45%,var(--line));background:var(--ink-800)} /* v1.1: заголовок ОБТЕКАЕТ иконку (float) — вторая строка уходит под неё на всю ширину плашки, «пустой колонки» слева больше нет */ .cat-t{display:block;position:relative} .cat-t .ic{color:var(--au);width:20px;height:20px;float:left;margin:1px 8px 3px 0} .cat-t b{font-size:0.8438rem;font-weight:500;letter-spacing:-.014em;line-height:1.25} .cat-i .tags{display:block;position:relative;clear:both;margin-top:7px;font-size:0.6875rem;line-height:1.5;color:var(--tx-3)} .plate-gen{ position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2.4/1;background:var(--ink-850); display:grid;place-items:center; -webkit-mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.55) 74%,transparent); mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.55) 74%,transparent); } .plate-gen::before{ content:'';position:absolute;left:50%;top:52%;width:150%;height:280%; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(closest-side,var(--au),transparent 72%); opacity:.30;filter:blur(26px); } .plate-gen .ic{position:relative;width:54px;height:54px;stroke-width:1;color:var(--tx-1);opacity:.42} /* «Ещё» */ .set{display:flex;flex-direction:column} .set-i{ display:flex;align-items:center;gap:14px;padding:18px var(--gut); border-top:1px solid var(--line-soft);width:100%;text-align:left; } .set-i:last-child{border-bottom:1px solid var(--line-soft)} .set-i .ic{color:var(--tx-3);width:19px;height:19px} .set-i b{flex:1;font-size:0.9375rem;font-weight:400} .set-i em{font-style:normal;font-size:0.8438rem;color:var(--tx-3)} .set-i .go{color:var(--tx-4);width:16px;height:16px} .set-seg{padding:6px var(--gut) 16px;border-bottom:1px solid var(--line-soft)} /* вступление-оверлей */ .intro{position:absolute;inset:0;z-index:40;background:var(--ink-900);display:flex;flex-direction:column} .intro[hidden]{display:none} .islide{display:none;flex:1;min-height:0;flex-direction:column} .islide.on{display:flex;animation:introIn 420ms var(--e)} @keyframes introIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* карточка готового документа в ленте */ .doccard{ display:flex;gap:13px;align-items:center;width:100%;text-align:left; padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800); } .doccard .ic{color:var(--au)} .doccard .tt{flex:1;min-width:0} .doccard b{display:block;font-size:0.8438rem;font-weight:500;letter-spacing:-.012em} .doccard span{display:block;font-family:var(--f-mono);font-size:0.6875rem;color:var(--tx-3);margin-top:3px;letter-spacing:.04em} .doccard .go{color:var(--tx-4);width:16px;height:16px} /* тост */ .toast{ position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px); z-index:50;max-width:86%;padding:11px 18px;border-radius:999px; background:var(--ink-700);border:1px solid var(--line);color:var(--tx-1); font-size:0.8438rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; opacity:0;pointer-events:none;transition:opacity var(--t),transform var(--t); box-shadow:var(--pop-sh); } .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* лист внутри экрана */ .deskbg{min-height:100%;background:var(--desk);padding:var(--paper-pad)} .paper-doc[hidden]{display:none} /* главная: выбранный вариант В1 */ .hello.small{padding-top:6px} /* v1.2: заголовок сразу под кнопками */ .hello.small h1{font-size:1.6875rem;margin-bottom:10px} .hello.small p{font-size:0.8438rem} .ex{display:flex;gap:12px;align-items:center;width:100%;text-align:left; padding:14px var(--gut);border-top:1px solid var(--line-soft)} .ex:last-of-type{border-bottom:1px solid var(--line-soft)} .ex .ic{width:18px;height:18px;flex:none;color:var(--au);stroke-width:1.5} .ex b{flex:1;font-size:0.8438rem;font-weight:400;letter-spacing:-.01em;line-height:1.35} .ex em{font-style:normal;font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.09em; text-transform:uppercase;color:var(--tx-4);flex:none} /* факты, извлечённые из жалобы */ .facts{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);overflow:hidden;margin-top:15px} .facts-h{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--ink-750); font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3)} .facts-h .ic{width:13px;height:13px;color:var(--au)} .facts-r{display:flex;gap:10px;align-items:baseline;padding:9px 14px;border-top:1px solid var(--line-soft)} .facts-r b{font-size:0.75rem;font-weight:400;color:var(--tx-2);flex:1;min-width:0} .facts-r span{font-family:var(--f-mono);font-size:0.75rem;color:var(--tx-1);white-space:nowrap} /* ───────── отрасль и разбор ───────── */ .art{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left; padding:16px var(--gut);border-top:1px solid var(--line-soft)} .art:last-of-type{border-bottom:1px solid var(--line-soft)} .art i{font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--tx-4);flex:none;padding-top:2px;letter-spacing:.03em;min-width:56px} .art > span{flex:1;min-width:0} .art b{display:block;font-size:0.8438rem;font-weight:400;letter-spacing:-.01em;line-height:1.4} .art .pv{display:block;font-size:0.75rem;color:var(--tx-3);margin-top:3px} .doc-top{padding:22px var(--gut) 0} .doc-top .eyebrow{margin-bottom:14px} .doc-top h1{font-size:1.4375rem;line-height:1.18;font-weight:600;letter-spacing:-.03em;text-wrap:balance} .doc-top p{margin-top:9px;font-size:0.8438rem;line-height:1.55;color:var(--tx-2)} .keyp{margin:20px var(--gut) 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);padding:16px;position:relative;overflow:hidden} .keyp::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--au),transparent)} .keyp .n{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--au);margin-bottom:12px} .keyp ol{display:flex;flex-direction:column;gap:11px} .keyp li{display:flex;gap:11px;font-size:0.8438rem;line-height:1.5;color:var(--tx-1)} .keyp li i{font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--au);flex:none;padding-top:2px;min-width:16px} .keyp li span{flex:1} .case{margin:18px var(--gut) 0;padding:13px 16px;border-left:2px solid color-mix(in srgb,var(--au) 60%,transparent);background:var(--ink-850);border-radius:0 12px 12px 0} .case b{display:block;font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--tx-3);margin-bottom:7px} .case p{font-size:0.8438rem;line-height:1.55;color:var(--tx-2);font-style:italic;font-family:var(--f-doc)} .doc-g{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase; color:var(--tx-4);margin:24px var(--gut) 12px;display:flex;align-items:center;gap:9px} .doc-g::after{content:'';flex:1;height:1px;background:var(--line-soft)} .doc-steps{padding:0 var(--gut);display:flex;flex-direction:column;gap:12px} .doc-steps li{display:flex;gap:11px;font-size:0.8438rem;line-height:1.5;color:var(--tx-1)} .doc-steps li i{font-family:var(--f-mono);font-style:normal;font-size:0.6875rem;color:var(--au);flex:none;padding-top:2px;min-width:16px} .doc-steps li span{flex:1} .doc-norm{margin:0 var(--gut)} .go-dialog{margin:22px var(--gut) 20px;border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden; border:1px solid color-mix(in srgb,var(--au) 35%,var(--line)); background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--au) 8%,transparent),transparent 60%),var(--ink-800)} .go-dialog b{display:block;font-size:0.9375rem;font-weight:600;letter-spacing:-.015em;margin-bottom:6px} .go-dialog p{font-size:0.75rem;line-height:1.55;color:var(--tx-2);margin-bottom:14px} .go-dialog .btn{width:100%} /* согласие в интро и правовые документы */ .consent{font-size:0.6875rem;line-height:1.5;color:var(--tx-4);padding:0 var(--gut) 8px} .consent u{text-underline-offset:2px;text-decoration-color:var(--tx-4)} /* Ссылки на документы — настоящие кнопки в строке текста. */ .consent-link{ display:inline;font:inherit;color:inherit;padding:0; text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--tx-4); } .consent-link:hover{color:var(--tx-2)} .ldoc{padding:4px var(--gut) 26px} .ldoc h4{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w);letter-spacing:.07em;text-transform:uppercase;color:var(--au);margin:20px 0 8px;font-weight:500} .ldoc p{font-size:0.8438rem;line-height:1.6;color:var(--tx-2)} .ldoc p+p{margin-top:8px} .about-op{margin:18px var(--gut) 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);padding:15px 16px} .about-op .e{font-family:var(--f-mono);font-size:0.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);display:block;margin-bottom:7px} .about-op b{display:block;font-size:0.8438rem;font-weight:600;margin-bottom:4px} .about-op p{font-size:0.75rem;line-height:1.5;color:var(--tx-2)} .about-op .mono{font-size:0.6875rem;color:var(--tx-3)} /* атрибут hidden сильнее любых display у компонентов */ [hidden]{display:none!important} /* композер: живое поле, растёт по мере ввода */ .comp textarea{flex:1;min-width:0;resize:none;font-size:0.9375rem;line-height:1.45;padding:11px 0;max-height:8.25rem;background:none;overflow-y:auto;scrollbar-width:none} .comp textarea::-webkit-scrollbar{display:none} .comp textarea::placeholder{color:var(--tx-4)} .comp-ctl{display:flex;gap:2px;align-items:flex-end;flex:none} /* служебные кнопки визуально компактнее, зона нажатия остаётся 44px */ .comp-ctl .comp-btn{width:38px;position:relative} .comp-ctl .comp-btn::after{content:'';position:absolute;inset:-3px} .comp-ctl .comp-send{width:44px} /* пока текста нет — «отправить» контурная и неактивная */ .comp-send[disabled]{background:transparent;border:1px solid var(--line);color:var(--tx-4);pointer-events:none} /* больше двух строк — поле раскладывается во всю ширину, кнопки уходят вниз */ .comp.tall .comp-in{flex-direction:column;align-items:stretch;gap:10px} .comp.tall textarea{flex:0 0 auto;width:100%;padding:6px 8px 0 0} /* фокус показывает рамка композера, а не жирный контур вокруг поля */ .comp textarea:focus,.comp textarea:focus-visible{outline:none} .comp:focus-within{border-color:color-mix(in srgb,var(--au) 30%,var(--line))} .comp.tall .comp-ctl{width:100%} .comp.tall .comp-ctl .comp-send{margin-left:auto} /* iOS Safari: фокус на поле с кеглем <16px включает принудительный зум всей страницы (кадр уезжает вправо, зум не снимается после ввода). Только на iOS поднимаем кегль полей ввода до 16px — авторост считает пороги от фактических метрик поля (см. fitFactory), поведение не меняется. Остальные платформы — фирменные 15px. Сознательная платформенная адаптация, не отход от freeze. */ @supports (-webkit-touch-callout: none){ .comp textarea,.f-in{font-size:1rem} } /* чипы-подсказки: переносятся, а не уезжают за край */ .comp-rail{flex-wrap:wrap;overflow:visible;padding:12px 14px 2px} /* ── тёмный арт-сет «Хрусталь» + живой свет (2x быстрее slow-aurora) ── */ .artfx{position:absolute;inset:0;display:none;pointer-events:none} .artfx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .artfx .fx{position:absolute;display:block;mix-blend-mode:screen} .artfx .gT{left:6%;top:8%;width:54%;height:80%;filter:blur(26px); background:radial-gradient(45% 50% at 42% 52%,rgba(63,224,198,.36),transparent 70%); animation:artMigr 9s ease-in-out infinite} .artfx .gV{left:40%;top:8%;width:54%;height:80%;filter:blur(26px); background:radial-gradient(45% 50% at 58% 52%,rgba(139,124,246,.34),transparent 70%); animation:artMigr 9s ease-in-out infinite reverse} @keyframes artMigr{0%,100%{opacity:.75}50%{opacity:.15}} .artfx .ra{inset:-16%;filter:blur(30px); background:linear-gradient(108deg,transparent 30%,rgba(63,224,198,.20) 46%,transparent 62%); animation:artSwayA 8s ease-in-out infinite alternate} .artfx .rb{inset:-16%;filter:blur(30px); background:linear-gradient(72deg,transparent 36%,rgba(139,124,246,.18) 52%,transparent 68%); animation:artSwayB 11s ease-in-out infinite alternate-reverse} @keyframes artSwayA{from{transform:translateX(-5%) rotate(-1.4deg);opacity:.5}to{transform:translateX(5%) rotate(1.2deg);opacity:.95}} @keyframes artSwayB{from{transform:translateX(4%);opacity:.45}to{transform:translateX(-4%);opacity:.9}} .artfx .pool{left:16%;right:16%;bottom:0;height:26%;filter:blur(14px); background:radial-gradient(50% 90% at 50% 100%,rgba(77,166,255,.30),rgba(63,224,198,.12) 55%,transparent 75%); animation:artPool 4.5s ease-in-out infinite alternate} @keyframes artPool{from{opacity:.35}to{opacity:.85}} .artfx{display:block} .has-art>.ic{display:none} .intro-art.has-art::before, .plate-gen.has-art::before{opacity:0} /* пер-тематические кадры */ .artfx .al{display:none} [data-theme="light"] .artfx .ad{display:none} [data-theme="light"] .artfx .al{display:block} /* тёмные световые слои в светлой теме не нужны (screen-blend на белом невидим) */ [data-theme="light"] .artfx .gT,[data-theme="light"] .artfx .gV, [data-theme="light"] .artfx .ra,[data-theme="light"] .artfx .rb, [data-theme="light"] .artfx .pool{display:none} /* светлый живой свет: дрейф дневного света + перелив каустики (multiply) */ .artfx .lcloud,.artfx .lcaus{display:none} [data-theme="light"] .artfx .lcloud{display:block;inset:0;mix-blend-mode:multiply; background:linear-gradient(100deg,transparent 30%,rgba(96,116,148,.11) 46%,rgba(96,116,148,.07) 55%,transparent 66%); background-size:240% 100%;animation:lcloud 13s ease-in-out infinite alternate} @keyframes lcloud{from{background-position:0% 0}to{background-position:100% 0}} [data-theme="light"] .artfx .lcaus{display:block;left:29%;top:26%;width:42%;aspect-ratio:1;border-radius:50%; mix-blend-mode:multiply;filter:blur(26px); background:conic-gradient(rgba(63,224,198,.55),rgba(139,124,246,.5),rgba(77,166,255,.55),rgba(63,224,198,.55)); animation:lcaus 21s linear infinite,lcausOp 6.5s ease-in-out infinite alternate} @keyframes lcaus{to{transform:rotate(360deg)}} @keyframes lcausOp{from{opacity:.09}to{opacity:.2}} /* «Спросить по теме» — тихое стекло с акцентной каймой (не белое пятно) */ .btn-ask{position:relative;font-weight:600;color:var(--tx-1); border:1px solid color-mix(in srgb,var(--au) 42%,var(--line)); background: radial-gradient(120% 160% at 50% -30%,color-mix(in srgb,var(--au) 16%,transparent),transparent 60%), var(--ink-800); box-shadow:0 0 0 1px transparent,0 10px 26px -18px color-mix(in srgb,var(--au) 55%,transparent)} .btn-ask:active{transform:translateY(1px)} /* всполох по верхней кромке свежего вердикта */ .verdict::before{background-size:60% 100%;background-repeat:no-repeat; animation:vflare var(--dur-flare) cubic-bezier(.22,.8,.3,1) 1 both} @keyframes vflare{0%{background-position:-60% 0;opacity:0}45%{opacity:1}100%{background-position:50% 0;opacity:.5}} /* ── эффект нажатия: блик (по умолчанию) / волна — переключатель в «Инфо» ── */ .fx-host{position:relative} .fx-clip{overflow:hidden} .fxg{position:absolute;top:-45%;bottom:-45%;width:55%;left:-65%;pointer-events:none;z-index:3; background:linear-gradient(105deg,transparent,rgba(235,245,255,.24) 50%,transparent); filter:blur(6px);mix-blend-mode:screen;animation:fxg var(--dur-glint) ease-out forwards} [data-theme="light"] .fxg{background:linear-gradient(105deg,transparent,rgba(120,140,255,.19) 50%,transparent);mix-blend-mode:multiply} @keyframes fxg{to{left:135%}} .fxpress{animation:fxpr var(--dur-press) var(--e)} @keyframes fxpr{0%{transform:scale(1)}35%{transform:scale(.982)}100%{transform:scale(1)}} .fxr{position:absolute;border-radius:50%;pointer-events:none;z-index:3; transform:translate(-50%,-50%) scale(0);opacity:.9;mix-blend-mode:screen; background:radial-gradient(circle,color-mix(in srgb,var(--au) 40%,transparent) 0%,color-mix(in srgb,var(--au) 14%,transparent) 45%,transparent 70%); animation:fxr var(--dur-ripple) var(--e) forwards} [data-theme="light"] .fxr{mix-blend-mode:multiply;opacity:.55} @keyframes fxr{to{transform:translate(-50%,-50%) scale(1);opacity:0}} /* ── «Норма думает»: пауза перед раскрытием шага ── */ /* Приветствие раздела: показывается, пока человек не написал первую реплику. Подсказка — пример начала фразы, отсюда приглушённый тон: её не должны прочесть как чужой ответ за себя. */ .greet{padding:var(--sp-2) 0 var(--sp-3)} .greet-say{margin:0;font-family:var(--f-txt);font-size:var(--fs-300);line-height:1.5;color:var(--tx-1)} .greet-hint{margin:var(--sp-2) 0 0;font-family:var(--f-ui);font-size:var(--fs-100);color:var(--tx-3)} .think{position:relative;padding-left:15px;display:flex;align-items:center;gap:10px;min-height:22px} .think::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:1.5px;border-radius:2px; background:linear-gradient(180deg,var(--au),transparent)} .think .tw{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w); letter-spacing:.07em;text-transform:uppercase;color:var(--au)} .think .td{display:inline-flex;gap:5px} /* Обратный отсчёт: ход движка занимает около 70 секунд, и без счётчика человек решает, что сервис завис. Кегль и цвет — те же, что у подписи рядом, чтобы отсчёт читался как часть индикатора, а не как ошибка. */ .think .tc{font-family:var(--f-ui);font-size:0.6875rem;font-weight:var(--lbl-w); letter-spacing:.04em;color:var(--tx-3);font-variant-numeric:tabular-nums} .think .td i{width:5px;height:5px;border-radius:50%;background:var(--tx-3);animation:tdp 1s ease-in-out infinite} .think .td i:nth-child(2){animation-delay:.16s} .think .td i:nth-child(3){animation-delay:.32s} @keyframes tdp{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}} /* ── служебные паттерны состояний (scr-states) ── */ .skel{border-radius:7px;background:linear-gradient(90deg,var(--ink-750) 25%,var(--ink-700) 38%,var(--ink-750) 62%); background-size:300% 100%;animation:skel 1.4s linear infinite} @keyframes skel{from{background-position:120% 0}to{background-position:-80% 0}} .netbar{display:flex;gap:9px;align-items:center;padding:11px 15px;border-radius:12px; border:1px solid color-mix(in srgb,var(--v-warn) 40%,var(--line)); background:color-mix(in srgb,var(--v-warn) 8%,var(--ink-800)); font-size:0.8438rem;line-height:1.45;color:var(--tx-1)} .netbar .ic{width:17px;height:17px;color:var(--v-warn);flex:none} .retry{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-800);padding:16px} .retry b{display:block;font-size:0.9375rem;font-weight:600;letter-spacing:-.015em;margin-bottom:5px} .retry p{font-size:0.8438rem;line-height:1.5;color:var(--tx-2);margin-bottom:12px} .empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 26px;gap:6px} .empty .ic{width:34px;height:34px;stroke-width:1.2;color:var(--tx-4);margin-bottom:6px} .empty b{font-size:0.9375rem;font-weight:600;letter-spacing:-.015em} .empty p{font-size:0.8438rem;line-height:1.5;color:var(--tx-3);max-width:30ch} /* CTA внутри контента (вердикт, форма, разбор): «хрустальное стекло» — заметнее .btn-ask, но без белой пилюли. Белая .btn-p остаётся только у корневых действий (интро, «Новый»). */ .btn-cta{position:relative;font-weight:600;color:var(--tx-1); border:1px solid color-mix(in srgb,var(--au) 52%,var(--line)); background:linear-gradient(180deg, color-mix(in srgb,var(--au) 20%,var(--ink-750)), color-mix(in srgb,var(--au) 7%,var(--ink-800))); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px -18px color-mix(in srgb,var(--au) 60%,transparent)} .btn-cta[disabled]{opacity:.4;cursor:default} [data-theme="light"] .btn-cta{color:var(--tx-1); background:linear-gradient(180deg, color-mix(in srgb,var(--au) 14%,#FFFFFF), color-mix(in srgb,var(--au) 6%,#FFFFFF)); border-color:color-mix(in srgb,var(--au) 45%,var(--line)); box-shadow:0 1px 2px rgba(16,21,28,.08)} /* при поднятой клавиатуре: таб-бар прячем, safe-area не дублируем */ #app.kb .nav{display:none} #app.kb .dock::before{display:none} /* ── боевая форма (эталон, форма fm-*): поля, ошибки, автосейв ── */ .f-in{display:block;width:100%;font-size:0.9375rem;line-height:1.4;padding:9px 11px;margin-top:2px; border:1px solid var(--line);border-radius:9px;background:var(--ink-850);color:var(--tx-1); transition:border-color var(--dur-fast) var(--e)} .f-in:focus{border-color:color-mix(in srgb,var(--au) 55%,var(--line))} .f-in::placeholder{color:var(--tx-4)} input[type="date"].f-in{font-family:var(--f-mono);font-size:0.8438rem;color-scheme:dark} [data-theme="light"] input[type="date"].f-in{color-scheme:light} .f-row.err .f-in{border-color:color-mix(in srgb,var(--v-bad) 55%,var(--line))} .f-msg{display:none;margin-top:6px;font-size:0.75rem;line-height:1.4;color:var(--v-bad)} .f-row.err .f-msg{display:block} .f-save{display:flex;gap:7px;align-items:center;margin-top:11px;font-size:0.6875rem;color:var(--tx-4)} /* ── доработки по UX-аудиту 03.08.2026 ── */ .chip{position:relative} .chip::after{content:'';position:absolute;inset:-5px;border-radius:inherit} .chip.quiet{background:transparent;border-color:var(--line-soft);color:var(--tx-3)} .seg button{position:relative} .seg button::after{content:'';position:absolute;inset:-6px -2px} .v-note{padding:0 16px 15px;font-size:0.75rem;line-height:1.55;color:var(--tx-3)} .v-src{display:inline;padding:0;color:var(--au);font-size:inherit; text-decoration:underline;text-underline-offset:3px; text-decoration-color:color-mix(in srgb,var(--au) 45%,transparent)} .comp-send[disabled]{background:transparent;border:1.5px solid var(--line);color:var(--tx-4)} [data-theme="light"] .comp{border-color:#C7D0DC} .paper-disc{font-family:var(--f-ui);font-size:0.6875rem;line-height:1.5;color:var(--paper-tx2);margin-top:10px} .paper-tools{display:none;justify-content:flex-end;padding:10px var(--gut) 0;background:var(--desk)} html[data-theme="dark"] .paper-tools{display:flex} [data-print="1"] .paper{--paper:#EFEEE9;--paper-2:#E6E4DC;--paper-line:#D3D0C6} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }