/* Valuta — кабинет: каркас, главная, мастер перевода, документ заявки, история, получатели, верификация, чат, профиль, демо-панель. */

/* ---------- Каркас ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 30px); }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px 18px; border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 55%, var(--paper));
}
.side-top { padding: 2px 8px 6px; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: var(--r); font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background var(--d-1), color var(--d-1); }
.side-nav a .i { color: var(--muted); transition: color var(--d-1); }
.side-nav a:hover { background: var(--line-2); }
.side-nav a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1), 0 0 0 1px var(--line-2); }
.side-nav a[aria-current="page"] .i { color: var(--violet); }
.side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -16px; top: 11px; bottom: 11px; width: 3px; border-radius: 0 3px 3px 0; background: var(--violet); }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--serial); color: #fff; font: 600 11px/20px var(--f-mono); text-align: center; }
.side-sep { height: 1px; margin: 10px 12px; background: var(--line); }
.side-rate { margin-top: auto; display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.side-rate .lbl { font-size: 9.5px; }
.side-rate b { font-size: 44px; line-height: 0.85; }
.side-rate .micro { font-size: 6.5px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; border-top: 1px solid var(--line); }
.side-user-name { flex: 1; min-width: 0; }
.side-user-name b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user-name small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Аватар — личная гильош-печать с инициалами */
.ava { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.ava .seal { position: absolute; inset: 0; width: 100%; height: 100%; }
span.ava > b { position: relative; display: grid; place-items: center; width: 58%; height: 58%; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--line-2); font: 600 11.5px/1 var(--f-text); color: var(--ink); letter-spacing: 0.02em; }
.ava-lg { width: 56px; height: 56px; }
span.ava-lg > b { font-size: 14px; }
.ava-xl { width: 116px; height: 116px; }
span.ava-xl > b { font: 300 34px/1 var(--f-display); font-variation-settings: "wdth" 80; }

.app-main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: flex-end; gap: 16px; padding: 26px clamp(20px, 3vw, 44px) 18px; border-bottom: 1px solid transparent; transition: padding var(--d-2), background var(--d-2), border-color var(--d-2); }
.topbar.scrolled { padding-top: 12px; padding-bottom: 12px; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
.m-logo { display: none; }
.tb-title { flex: 1; min-width: 0; display: grid; gap: 8px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: 0.5; }
.topbar h1 { font: 300 34px/0.95 var(--f-display); font-variation-settings: "wdth" 78; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size var(--d-2); }
.topbar.scrolled h1 { font-size: 26px; }
.tb-end { display: flex; gap: 6px; }
.screen { width: 100%; max-width: 1260px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; padding: 10px clamp(20px, 3vw, 44px) 96px; }

/* ---------- Общие блоки кабинета ---------- */
.panel { min-width: 0; padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font: 400 24px/1.1 var(--f-display); font-variation-settings: "wdth" 82; letter-spacing: -0.01em; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lnk { color: var(--ink-2); font-size: 14px; }
.lnk:hover { color: var(--violet); }
button.lnk { color: var(--violet); }
.leaders.big li { font-size: 14.5px; padding: 3px 0; }
.leaders li span { color: var(--muted); }
.leaders li b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.leaders li.minus b { color: var(--serial); }
.leaders li.total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.leaders li.total span, .leaders li.total b { color: var(--ink); font-weight: 600; }
.empty { display: grid; justify-items: center; gap: 10px; padding: 40px 16px; text-align: center; }
.empty .seal { width: 84px; height: 84px; opacity: 0.6; }
.empty h3 { font: 400 24px/1.1 var(--f-display); }
.empty p { color: var(--muted); font-size: 14px; }

.banner { --tone: var(--wait); display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--tone) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent); }
.banner.go { --tone: var(--violet); } .banner.bad { --tone: var(--bad); } .banner.ok { --tone: var(--ok); }
.banner-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--tone); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 25%, transparent); }
.banner b { display: block; font-size: 15px; }
.banner p { font-size: 13.5px; color: var(--muted); }
.banner .btn { margin-left: auto; }

/* ---------- Главная ---------- */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.hello > div { display: grid; gap: 18px; justify-items: start; }
.hello .eyebrow { text-transform: uppercase; }
.hello-stats { display: flex; border-top: 1px solid var(--line-3); }
.hello-stats > div { padding: 16px 28px 0 0; margin-right: 28px; border-right: 1px solid var(--line); }
.hello-stats > div:last-child { margin: 0; padding-right: 0; border: 0; }
.hello-stats dt { font-size: 40px; line-height: 0.9; white-space: nowrap; }
.hello-stats dd { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.todo { display: grid; gap: 10px; }
.todo-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding-right: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; transition: transform var(--d-2) var(--ease), box-shadow var(--d-2); }
.todo-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.todo-stub { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--serial-soft); border-right: 2px dashed color-mix(in srgb, var(--serial) 35%, transparent); }
.todo-stub .seal { width: 40px; height: 40px; }
.todo-stub .serial { font-size: 12px; }
.todo-body b { display: block; font: 400 22px/1.15 var(--f-display); font-variation-settings: "wdth" 82; }
.todo-body small { font-size: 13.5px; color: var(--muted); }
.todo-timer { display: grid; justify-items: end; gap: 4px; }
.todo-timer b { font-size: 36px; line-height: 0.85; color: var(--serial); }
.dash-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 48px; align-items: center; padding: clamp(24px, 3.4vw, 48px); border-radius: 24px; background: color-mix(in srgb, var(--paper-2) 60%, var(--paper)); border: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.dash-hero > canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.dash-hero-copy { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.dash-hero-copy p { color: var(--muted); max-width: 30em; }
.quick { display: grid; gap: 10px; margin-top: 10px; }
.quick-row { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-r { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: left; transition: transform var(--d-2) var(--ease), border-color var(--d-1); }
.quick-r:hover { transform: translateY(-2px); border-color: var(--ink); }
.quick-r .ava { width: 36px; height: 36px; }
.quick-r span.ava > b { font-size: 10px; }
.quick-r b { display: block; font-size: 13.5px; font-weight: 600; }
.quick-r small { display: block; font-size: 11.5px; color: var(--muted); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }

/* Строки журнала переводов */
.ledger { display: grid; }
.ledger-head, .lrow { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 170px; gap: 16px; align-items: center; }
.ledger-head { padding: 4px 10px 12px; border-bottom: 1px solid var(--line-3); font: 500 var(--t-micro)/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ledger-head span:last-child { text-align: right; }
.lrow { padding: 14px 10px; border-bottom: 1px solid var(--line-2); border-radius: var(--r); transition: background var(--d-1); animation: fade-up 0.6s var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
.lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--paper-2); }
.lrow-seal .seal { width: 44px; height: 44px; transition: transform 1.2s var(--ease); }
.lrow:hover .lrow-seal .seal { transform: rotate(90deg); }
.lrow-who { min-width: 0; }
.lrow-who b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-who small, .lrow-amt small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-who .serial { font-size: 11px; }
.lrow-amt b { display: block; font-size: 25px; line-height: 1; white-space: nowrap; }
.lrow-amt.from b { color: var(--ink-2); }
.lrow-st { justify-self: end; }
.ledger-panel { padding: 14px 16px; }
.dash-grid .ledger-head, .dash-grid .lrow { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) auto; }
.dash-grid .lrow-amt.from { display: none; }
.dash-grid .lrow-seal .seal { width: 40px; height: 40px; }
.dash-grid .lrow-amt b { font-size: 22px; }
.rlist-row { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line-2); border-radius: var(--r); transition: background var(--d-1); }
.rlist-row:last-child { border-bottom: 0; }
.rlist-row:hover { background: var(--paper-2); }
.rlist-who { flex: 1; min-width: 0; }
.rlist-who b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlist-who small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Мастер перевода ---------- */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 40px; align-items: start; }
.wiz-main { min-width: 0; display: grid; gap: 26px; }
.stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; }
.stepper li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.stepper li + li::before { content: ""; width: 40px; height: 1px; margin: 0 14px; background: var(--line-3); }
.stepper .amount { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-3); font-size: 20px; line-height: 1; font-style: normal; }
.stepper em { font-style: normal; font-size: 14px; font-weight: 500; }
.stepper li.on { color: var(--ink); }
.stepper li.on .amount { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stepper li.done .amount { color: var(--violet); border-color: var(--violet); }
.calc-flat { max-width: 560px; box-shadow: var(--shadow-2); }
.wdoc {
  position: sticky; top: 104px; display: grid; gap: 18px; padding: 24px 24px 48px;
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--shadow-3);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.wdoc-head { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.wdoc-head .seal { width: 52px; height: 52px; }
.wdoc-head > div { display: grid; gap: 6px; }
.wdoc-head .serial { font-size: 15px; }
.wdoc-stamp { position: absolute; right: 0; top: 2px; font-size: 10px; opacity: 0.55; }
.wdoc-amt { display: grid; gap: 6px; }
.wdoc-amt b { font-size: 46px; line-height: 0.9; }
.wdoc-amt.to b { color: var(--violet); }
.wdoc .cx-how { margin-top: 0; }
.wdoc .cx-how summary { justify-content: flex-start; padding: 0; }
.wdoc-micro { position: absolute; left: 24px; right: 24px; bottom: 22px; }
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pick-card { position: relative; display: grid; gap: 12px; justify-items: start; align-content: start; padding: 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); text-align: left; transition: border-color var(--d-1), box-shadow var(--d-2), transform var(--d-2) var(--ease); }
.pick-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
.pick-card[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.pick-who { display: grid; gap: 3px; min-width: 0; max-width: 100%; }
.pick-who b { font-size: 15px; font-weight: 600; }
.pick-who small { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.pick-tag { font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-2); }
.pick-check { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--violet); color: #fff; transform: scale(0); transition: transform 0.35s var(--spring); }
.pick-card[aria-pressed="true"] .pick-check { transform: scale(1); }
.pick-new { border-style: dashed; border-color: var(--line-3); justify-items: center; align-content: center; text-align: center; min-height: 160px; color: var(--muted); }
.pick-new b { color: var(--ink); font-size: 14.5px; }
.pick-new small { font-size: 12.5px; }
.pick-plus { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--line-3); }
.rcp-line { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.rcp-line b { display: block; font-size: 15px; font-weight: 600; }
.rcp-line small { display: block; font-size: 12.5px; color: var(--muted); }
.rcp-acc { margin-left: auto; padding: 7px 11px; border-radius: var(--r-sm); background: var(--paper-2); font-size: 13px; letter-spacing: 0.03em; }
.method { display: grid; gap: 10px; }
.method label { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: var(--r); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--d-1), background var(--d-1); }
.method label:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); }
.method input { margin: 3px 0 0; accent-color: var(--violet); }
.method b { display: block; font-size: 14.5px; font-weight: 600; }
.method small { display: block; font-size: 13px; color: var(--muted); }
.method .off { opacity: 0.55; cursor: not-allowed; }
.soon { margin-left: auto; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-3); font: 500 9.5px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Документ заявки ---------- */
.deal-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.deal-bar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--muted); }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ddoc {
  position: relative; display: grid; grid-template-columns: 176px minmax(0, 1fr); overflow: hidden; isolation: isolate;
  border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-3);
}
.ddoc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 60%), repeating-linear-gradient(-32deg, transparent 0 7px, var(--line-2) 7px 8px); opacity: 0.8; }
.ddoc-stub { position: relative; display: grid; justify-items: center; align-content: space-between; gap: 18px; padding: 26px 0; border-right: 2px dashed var(--line-3); background: color-mix(in srgb, var(--paper-2) 45%, var(--card)); }
.ddoc-stub::before, .ddoc-stub::after { content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ddoc-stub::before { top: -13px; } .ddoc-stub::after { bottom: -13px; }
.ddoc-seal .seal { width: 128px; height: 128px; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ddoc-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; letter-spacing: 0.22em; }
.ddoc-micro { writing-mode: vertical-rl; height: 80px; font-size: 6.5px; }
.ddoc-main { position: relative; min-width: 0; display: grid; gap: 22px; padding: 28px 54px 26px 36px; }
.ddoc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ddoc-top .serial { font-size: 14px; }
.ddoc-amts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 150px) minmax(0, 1fr); align-items: end; gap: 16px; }
.ddoc-amts > div { display: grid; gap: 8px; min-width: 0; }
.ddoc-amts b { font-size: clamp(38px, 4.4vw, 70px); line-height: 0.85; white-space: nowrap; }
.ddoc-amts small { font-size: 13px; color: var(--muted); }
.ddoc-amts .to { justify-items: end; text-align: right; }
.ddoc-amts .to b { color: var(--violet); }
.ddoc-rate { justify-items: center; padding-bottom: 12px; }
.ddoc-rate small { font: 500 11px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.ddoc-arrow { position: relative; width: 100%; height: 1px; background: var(--line-3); }
.ddoc-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--line-3); border-right: 1px solid var(--line-3); transform: rotate(45deg); }
.rail { position: relative; height: 58px; margin: 34px 14px 0; }
.rail-line { position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rail-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width 1.3s var(--ease); }
.st { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; }
.st i { width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-3); transition: all 0.5s; }
.st.done i { background: var(--ink); border-color: var(--ink); }
.st.now i { border-color: var(--violet); }
.st em { font: normal 500 9.5px/1 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st.now em { color: var(--ink); }
.marker { --m: var(--violet); position: absolute; top: 7px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; background: var(--m); border: 4px solid var(--card); box-shadow: 0 0 0 1px var(--m); transform: translate(-50%, -50%); transition: left 1.3s var(--ease); }
.marker::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--m); animation: ring 1.8s infinite; }
.marker-tip { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 6px 11px; border-radius: 8px; background: var(--m); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; }
.marker-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: inherit; transform: rotate(45deg); }
.marker-tip.start { left: -10px; transform: none; }
.marker-tip.start::after { left: 18px; }
.marker-tip.end { left: auto; right: -10px; transform: none; }
.marker-tip.end::after { left: auto; right: 14px; }
:root[data-theme="dark"] .marker-tip { color: #0d0e12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marker-tip { color: #0d0e12; } }
.ddoc.is-mine .marker { --m: var(--serial); }
.ddoc.is-side .marker { --m: var(--bad); }
.ddoc.is-done .marker { --m: var(--ok); }
.ddoc.is-done .marker::before, .ddoc.is-side .marker::before { animation: none; opacity: 0; }
.ddoc-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; min-height: 76px; padding: 18px 4px 4px; border-top: 1px dashed var(--line-3); }
.ddoc-stamps .stamp { font-size: 10.5px; }
.stamp.big { font-size: 15px !important; padding: 10px 18px 9px; }
.stamp.bad { --c: var(--bad); }
.ddoc-thread { position: absolute; top: 0; bottom: 0; right: 18px; width: 14px; opacity: 0.6; }
.deal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.deal-col { min-width: 0; display: grid; gap: 24px; }
.deal-tl { position: sticky; top: 104px; }

/* Карточка действия: чей ход и что делать */
.act { --tone: var(--violet); position: relative; display: grid; gap: 22px; padding: 26px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; isolation: isolate; }
.act::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
.act.wait { --tone: var(--serial); }
.act.ok { --tone: var(--ok); }
.act.bad { --tone: var(--bad); }
.act-head { display: flex; align-items: flex-start; gap: 16px; }
.act-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); }
.act-head h3 { margin: 10px 0 8px; font: 300 34px/1.02 var(--f-display); font-variation-settings: "wdth" 80; letter-spacing: -0.015em; }
.act-head p { max-width: 54ch; font-size: 15px; color: var(--muted); }
.act.op { padding-right: 230px; min-height: 210px; }
.act-wait { position: absolute; z-index: -1; right: -30px; top: 50%; width: 250px; height: 250px; transform: translateY(-50%); }
.act-wait canvas { width: 100%; height: 100%; }
.pay-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.deadline { position: relative; flex: none; width: 124px; height: 124px; display: grid; place-items: center; }
.deadline svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.deadline circle { fill: none; stroke-width: 2.5; }
.deadline .bg { stroke: var(--line); }
.deadline .fg { stroke: var(--serial); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.deadline > div { display: grid; justify-items: center; gap: 4px; text-align: center; }
.deadline b { font-size: 36px; line-height: 0.85; }
.deadline small { max-width: 74px; font-size: 10.5px; line-height: 1.2; color: var(--muted); }
.voucher { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; padding: 8px 20px; border-radius: var(--r-lg); background: var(--paper); border: 1px dashed var(--line-3); }
.voucher-rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr) 34px; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dotted var(--line-3); }
.voucher-rows > div:last-child { border-bottom: 0; }
.voucher-rows b { font-size: 15px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.voucher-rows b.mono { font-size: 14px; letter-spacing: 0.02em; }
.voucher-rows .v-big b { font-size: 42px; line-height: 0.9; font-weight: 300; }
.copy { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--muted); transition: all var(--d-1); }
.copy:hover { color: var(--ink); border-color: var(--ink); }
.copy.done { color: var(--ok); border-color: var(--ok); }
.qr { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 12px 0; }
.qr canvas { width: 145px; height: 145px; padding: 8px; box-sizing: content-box; border-radius: var(--r-sm); background: #fbfaf6; box-shadow: 0 0 0 1px var(--line); }
.qr small { font-size: 11px; line-height: 1.3; color: var(--muted); text-align: center; }
.drop { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-3); cursor: pointer; transition: border-color var(--d-1), background var(--d-1); }
.drop:hover, .drop.over { border-color: var(--violet); background: var(--violet-soft); }
.drop input { display: none; }
.drop-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); }
.drop b { display: block; font-size: 14.5px; }
.drop small { display: block; font-size: 13px; color: var(--muted); }
.file-chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 14px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: 13.5px; }
.done-act { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 28px; }
.done-art { position: relative; width: 180px; height: 180px; display: grid; place-items: center; }
.done-art .seal { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; animation: spin 90s linear infinite; }
.done-art .stamp { position: relative; font-size: 17px !important; }
.done-copy { display: grid; gap: 12px; justify-items: start; }
.done-copy h3 { font: 300 36px/1.02 var(--f-display); font-variation-settings: "wdth" 80; letter-spacing: -0.015em; }
.done-copy p { color: var(--muted); max-width: 48ch; }

/* Лента статусов */
.tl { display: grid; }
.tl li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding-bottom: 20px; }
.tl li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line); }
.tl li:last-child { padding-bottom: 0; }
.tl li:last-child::before { display: none; }
.tl li.done::before { background: var(--ink); }
.tl-dot { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-3); background: var(--card); color: var(--paper); }
.tl .done .tl-dot { background: var(--ink); border-color: var(--ink); }
.tl .now .tl-dot { border-color: var(--violet); box-shadow: 0 0 0 5px var(--violet-soft); }
.tl .now .tl-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--violet); animation: blink 1.4s infinite; }
.tl .bad .tl-dot { background: var(--bad); border-color: var(--bad); }
.tl b { display: block; padding-top: 3px; font-size: 14.5px; font-weight: 500; }
.tl .todo b { color: var(--muted); font-weight: 400; }
.tl small { display: block; font-size: 12px; color: var(--muted); }
.tl .who { margin-top: 8px; }

/* ---------- История и получатели ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.toolbar-end { display: flex; flex-wrap: wrap; gap: 8px; }
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-3); background: var(--card); color: var(--muted); transition: border-color var(--d-1); }
.search:focus-within { border-color: var(--violet); }
.search input { width: 220px; border: 0; outline: 0; background: none; font-size: 14px; color: var(--ink); }
.chip-n { opacity: 0.55; font-size: 12px; }
.rcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.rcp { position: relative; display: grid; gap: 14px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate; transition: transform var(--d-2) var(--ease), box-shadow var(--d-2); animation: fade-up 0.7s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.rcp:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.rcp-art { position: absolute; z-index: -1; right: -56px; top: -56px; width: 200px; height: 200px; opacity: 0.35; transition: transform 1.4s var(--ease); }
.rcp-art .seal { width: 100%; height: 100%; }
.rcp:hover .rcp-art { transform: rotate(60deg); }
.rcp-top { display: flex; justify-content: space-between; align-items: flex-start; }
.rcp-top .serial { font-size: 11px; }
.rcp-name { display: block; font: 400 23px/1.1 var(--f-display); font-variation-settings: "wdth" 84; }
.rcp small { display: block; margin-top: 4px; font-size: 13px; }
.rcp .rcp-acc { margin: 0; padding: 10px 12px; font-size: 13px; overflow-wrap: anywhere; }
.rcp-acts { display: flex; align-items: center; gap: 8px; }
.rcp-cnt { margin-left: auto; font-size: 12.5px; }

/* ---------- Верификация ---------- */
.kyc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.kyc-main { display: grid; gap: 24px; padding: 28px; }
.kyc-side { position: sticky; top: 104px; display: grid; gap: 14px; }
.kyc-side p { font-size: 14px; }
.doc-drop { position: relative; display: grid; justify-items: center; gap: 8px; padding: 52px 24px; border-radius: var(--r-lg); background: var(--paper-2); text-align: center; cursor: pointer; transition: background var(--d-2); }
.doc-drop input { display: none; }
.doc-drop b { font-size: 15px; }
.doc-drop small { font-size: 13px; }
.corners { position: absolute; inset: 16px; opacity: 0.45; transition: inset var(--d-3) var(--ease), opacity var(--d-2); background:
  linear-gradient(var(--ink), var(--ink)) top left / 24px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) top left / 2px 24px no-repeat,
  linear-gradient(var(--ink), var(--ink)) top right / 24px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) top right / 2px 24px no-repeat,
  linear-gradient(var(--ink), var(--ink)) bottom left / 24px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom left / 2px 24px no-repeat,
  linear-gradient(var(--ink), var(--ink)) bottom right / 24px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) bottom right / 2px 24px no-repeat; }
.doc-drop:hover .corners, .doc-drop:focus-visible .corners { inset: 10px; opacity: 1; }
.doc-drop.has { background: var(--ok-soft); }
.doc-drop.has .corners { --ink: var(--ok); }
.doc-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-1); }
.doc-drop.has .doc-ico { color: var(--ok); }
.selfie-frame { width: 108px; height: 138px; display: grid; place-items: center; border-radius: 50%; border: 2px dashed var(--line-3); color: var(--muted); margin-bottom: 6px; }
.kyc-result { display: flex; align-items: center; gap: 28px; }
.kyc-art { position: relative; flex: none; width: 160px; height: 160px; display: grid; place-items: center; }
.kyc-art canvas, .kyc-art .seal { position: absolute; inset: 0; width: 100%; height: 100%; }
.kyc-art .seal { opacity: 0.55; }
.kyc-art .stamp { position: relative; }
.kyc-result h3 { margin-bottom: 8px; }

/* ---------- Чат ---------- */
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: min(700px, calc(100vh - 210px)); min-height: 460px; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-head b { display: block; font-size: 15px; }
.chat-head small { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.online { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: live 2s infinite; }
.chat-list { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; overflow: auto; background: var(--paper); }
.msg { max-width: min(540px, 82%); align-self: flex-start; padding: 12px 16px; border-radius: 18px; border-bottom-left-radius: 4px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; animation: pop 0.35s var(--ease) both; }
.msg small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.msg.me { align-self: flex-end; background: var(--ink); color: var(--paper); border-color: var(--ink); border-radius: 18px; border-bottom-right-radius: 4px; }
.msg.me small { color: color-mix(in srgb, var(--paper) 60%, transparent); }
.typing { display: flex; gap: 4px; padding: 16px 18px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
.quick-q { display: flex; gap: 8px; padding: 12px 20px 0; overflow-x: auto; scrollbar-width: none; }
.quick-q::-webkit-scrollbar { display: none; }
.chat-form { display: flex; align-items: center; gap: 8px; padding: 12px 16px 16px; }
.chat-form input:not([type="file"]) { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-3); background: var(--paper); outline: none; transition: border-color var(--d-1); }
.chat-form input:focus { border-color: var(--violet); }
.chat-form label { cursor: pointer; }
.guest-chat { padding-bottom: 120px; }
.guest-chat .chat { max-width: 780px; }

/* ---------- Профиль ---------- */
.pcard { position: relative; display: flex; align-items: center; gap: 28px; padding: 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; isolation: isolate; }
.pcard-art { position: absolute; z-index: -1; right: -90px; top: 50%; width: 400px; height: 400px; transform: translateY(-50%); opacity: 0.45; }
.pcard-art .seal { width: 100%; height: 100%; animation: spin 200s linear infinite; }
.pcard-who { display: grid; gap: 12px; justify-items: start; }
.pcard-who .serial { font-size: 12px; }
.sets .set-row:first-child { border-top: 0; padding-top: 0; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.set-row b { display: block; font-size: 14.5px; font-weight: 500; }
.set-row small { display: block; font-size: 12.5px; color: var(--muted); }

.modal-wide { width: min(620px, 100%); }

/* ---------- Нижняя панель на телефоне ---------- */
.tabbar { display: none; }

/* ---------- Демо-панель ---------- */
.demo-fab { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 8px; border-radius: var(--r-pill); background: var(--night); color: var(--night-ink); font-size: 14px; font-weight: 500; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform var(--d-2) var(--ease); }
.demo-fab:hover { transform: translateY(-2px); }
.demo-fab-seal { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.demo-fab-seal .seal { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
.demo-fab-seal .seal .g-a { stroke: #6c6a80; }
.demo-fab-seal .seal .g-b { stroke: #8d82ff; }
.demo-fab-seal .seal .g-c { stroke: #3ccfb4; }
.demo-fab-seal .i { position: relative; width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--night); }
.drawer {
  --ink: var(--night-ink); --ink-2: #d4d1c8; --muted: var(--night-muted); --paper: var(--night); --paper-2: #1d1e25; --paper-3: #2a2b33; --card: var(--night-2);
  --line: var(--night-line); --line-2: rgba(236, 233, 225, 0.07); --line-3: rgba(236, 233, 225, 0.22);
  --violet: #b8b0ff; --violet-2: #cfc9ff; --violet-soft: rgba(184, 176, 255, 0.14);
  --ok: #5fd39a; --ok-soft: rgba(95, 211, 154, 0.13); --wait: #f2a65a; --wait-soft: rgba(242, 166, 90, 0.13); --bad: #ff7b73; --bad-soft: rgba(255, 123, 115, 0.12); --serial: #ff8063;
  --g-a: #6c6a80; --g-b: #8d82ff; --g-c: #3ccfb4;
  position: fixed; z-index: 70; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: var(--night); color: var(--night-ink); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: drawer-in 0.55s var(--ease) both;
}
@keyframes drawer-in { from { opacity: 0; transform: translateX(24px); } }
.drawer .btn-primary { --fg: #0d0e12; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid var(--line); }
.drawer-head > div { flex: 1; min-width: 0; }
.drawer-head .micro { font-size: 7px; }
.drawer-head b { display: block; margin-top: 10px; font: 300 30px/1 var(--f-display); font-variation-settings: "wdth" 80; }
.drawer-head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.drawer-body { overflow: auto; padding: 0 20px 24px; }
.drawer-body section { display: grid; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.drawer-body section:last-child { border-bottom: 0; }
.drawer-body h4 { display: flex; gap: 10px; font: 500 10.5px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.drawer-body h4 span { color: var(--serial); }
.drawer-body p { font-size: 13px; color: var(--muted); }
.dsel { position: relative; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px 0 9px; border-radius: var(--r); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.dsel .seal { width: 36px; height: 36px; flex: none; }
.dsel select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dsel select option { color: #14161b; }
.dsel:focus-within { border-color: var(--violet); }
.dstate { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dgrid .btn { height: auto; min-height: 38px; padding: 8px 12px; font-size: 12.5px; line-height: 1.2; white-space: normal; }
.drate { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.drate b { display: block; font-size: 14px; }
.drate small { display: block; font-size: 12px; color: var(--muted); }
.drate .amount { font-size: 40px; line-height: 0.85; }
.drawer input[type="range"] { width: 100%; accent-color: var(--violet); }
.dpilot .btn { border-color: var(--violet); color: var(--violet); }

/* ---------- Адаптивность ---------- */
@media (max-width: 1240px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .deal-tl { position: static; }
  .ledger-head, .lrow { grid-template-columns: 44px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 150px; }
}
@media (max-width: 1100px) {
  .dash-hero { grid-template-columns: minmax(0, 1fr); }
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wdoc { position: static; }
  .kyc { grid-template-columns: minmax(0, 1fr); }
  .kyc-side { position: static; }
  .hello { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .m-logo { display: block; }
  .m-logo .logo-word { display: none; }
  .topbar { align-items: center; padding: 12px 16px; gap: 12px; }
  .topbar h1, .topbar.scrolled h1 { font-size: 26px; }
  .crumbs { display: none; }
  .screen { padding: 8px 16px 120px; gap: 22px; }
  .tabbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--line); }
  .tabbar a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: 10.5px; font-weight: 500; color: var(--muted); }
  .tabbar a[aria-current="page"] { color: var(--ink); }
  .tabbar a[aria-current="page"] .i { color: var(--violet); }
  .tabbar a.new .i, .tabbar a.new[aria-current="page"] .i { width: 44px; height: 44px; margin-top: -20px; padding: 11px; border-radius: 50%; background: var(--violet); color: #fff; box-shadow: 0 10px 24px -8px var(--violet), 0 0 0 4px var(--paper); }
  .tabbar .dotb { position: absolute; top: 4px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--serial); }
  .in-app .demo-fab { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .demo-fab { right: 14px; bottom: 14px; padding: 0 7px; height: 50px; }
  .demo-fab > span:last-child { display: none; }
  .ddoc { grid-template-columns: minmax(0, 1fr); }
  .ddoc-stub { display: none; }
  .ddoc-main { padding: 22px 20px; }
  .ddoc-thread { right: 18px; }
}
@media (max-width: 720px) {
  .hello-stats dt { font-size: 30px; }
  .hello-stats > div { padding-right: 14px; margin-right: 14px; }
  .todo-card { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 14px 14px 0; gap: 12px; }
  .todo-stub { display: none; }
  .todo-body { padding-left: 16px; }
  .todo-body b { font-size: 19px; }
  .todo-timer b { font-size: 28px; }
  .dash-hero { padding: 20px 16px; border-radius: 18px; }
  .dash-hero h3 { font-size: 34px; }
  .banner { flex-wrap: wrap; }
  .banner .btn { margin-left: 58px; }
  .ledger-head { display: none; }
  .lrow, .dash-grid .lrow { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 6px; }
  .lrow-seal { grid-row: span 2; }
  .lrow-seal .seal, .dash-grid .lrow-seal .seal { width: 36px; height: 36px; }
  .lrow-amt.from { display: none; }
  .lrow-amt { text-align: right; }
  .lrow-amt b, .dash-grid .lrow-amt b { font-size: 21px; }
  .lrow-st, .dash-grid .lrow-st { display: block; grid-column: 2 / -1; justify-self: start; }
  .lrow-st .status { height: 22px; font-size: 11.5px; }
  .ddoc-amts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ddoc-amts .to { justify-items: start; text-align: left; }
  .ddoc-rate { justify-items: start; padding: 0; }
  .ddoc-arrow { width: 60px; }
  .ddoc-amts b { font-size: 44px; }
  .ddoc-top { flex-wrap: wrap; }
  .rail { margin: 36px 4px 0; }
  .st em { display: none; }
  .st.now em { display: block; }
  .ddoc-stamps { gap: 10px 14px; }
  .stamp.big { font-size: 13px !important; }
  .act { padding: 22px 18px 22px 22px; }
  .act.op { padding-right: 18px; padding-bottom: 140px; }
  .act-wait { top: auto; bottom: -70px; right: 50%; transform: translateX(50%); width: 220px; height: 220px; }
  .act-head { flex-direction: column; gap: 10px; }
  .act-head h3 { font-size: 28px; }
  .pay-top { flex-direction: column-reverse; }
  .deadline { width: 104px; height: 104px; }
  .deadline b { font-size: 30px; }
  .voucher { grid-template-columns: minmax(0, 1fr); padding: 4px 14px; }
  .voucher-rows > div { grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 10px; }
  .voucher-rows .lbl { grid-column: 1 / -1; }
  .voucher-rows .v-big b { font-size: 36px; }
  .done-act { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .done-art { width: 140px; height: 140px; }
  .done-copy h3 { font-size: 28px; }
  .stepper li + li::before { width: 18px; margin: 0 8px; }
  .stepper li:not(.on) em { display: none; }
  .stepper em { font-size: 13px; }
  .fields-2 { grid-template-columns: minmax(0, 1fr); }
  .rcp-line .rcp-acc { margin-left: 0; width: 100%; }
  .kyc-main { padding: 20px; }
  .kyc-result { flex-direction: column; align-items: flex-start; }
  .pcard { flex-direction: column; align-items: flex-start; padding: 24px; }
  .ava-xl { width: 92px; height: 92px; }
  .search input { width: 150px; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .chat { height: calc(100vh - 230px); }
}