:root { --cab-r: 20px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }
@keyframes cab-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } }
@keyframes cab-fade { from { opacity: 0; } }
.is-entering .rise { animation: cab-rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms + 40ms); }
.skeleton { border-radius: var(--r-2); background: var(--surface-2); }
.skeleton::after { background: linear-gradient(90deg, transparent, rgba(244, 243, 238, .05), transparent); }
.cab-skel .cab-side { gap: 14px; }
.sk-me { height: 56px; } .sk-nav { height: 230px; } .sk-bal { height: 92px; }
.cab-skel .cab-body { display: grid; gap: 20px; }
.sk-title { height: 52px; width: 70%; } .sk-kpi { height: 112px; } .sk-focus { height: 150px; } .sk-card { height: 190px; }
.auth-skel .auth-form { gap: 16px; max-width: 460px; }
.sk-logo { width: 56px; height: 56px; border-radius: var(--r-2); } .sk-line { height: 14px; } .sk-btn { height: 58px; border-radius: var(--r-pill); } .sk-field { height: 120px; }
.auth-skel .sk-title { height: 56px; width: 90%; }
@media (max-width: 999px) { .cab-skel .cab-side { display: none; } }
.cab { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.cab-body { min-width: 0; container: cab / inline-size; }
.cab-side { position: sticky; top: calc(var(--header-h) + var(--pv-h) + 24px); display: grid; gap: var(--s-4); padding: 14px; border-radius: var(--r-3); background: linear-gradient(180deg, rgba(244, 243, 238, .025), transparent 40%), var(--surface); border: var(--bw) solid var(--line); min-width: 0; }
.cab-me { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 6px 16px; border-bottom: var(--bw) solid var(--line); }
.cab-me > div { display: grid; gap: 3px; min-width: 0; }
.cab-ava { position: relative; flex: none; display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 50%; background: var(--acid); color: var(--acid-ink); font: 600 var(--f-xl)/1 var(--display); }
.cab-ava::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(199, 255, 61, .35); }
.cab-kicker { font-size: var(--t-micro); color: var(--fg-3); }
.cab-name { font: 600 var(--f-lg)/1.2 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cab-balance { position: relative; display: grid; gap: 6px; padding: 16px; border-radius: var(--r-2); border: var(--bw) solid var(--line-strong); background: var(--bg); text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.cab-balance::before { content: ''; position: absolute; z-index: -1; right: -76px; top: -76px; width: 200px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(199, 255, 61, .18) 0 12%, rgba(199, 255, 61, 0) 46%), repeating-radial-gradient(circle, transparent 0 9px, rgba(244, 243, 238, .07) 9px 10px); transition: transform 1.2s var(--ease-out); }
.cab-balance:hover { border-color: color-mix(in srgb, var(--acid) 60%, transparent); }
.cab-balance:hover::before { transform: rotate(40deg) scale(1.06); }
.cab-balance span { font-size: var(--t-micro); color: var(--fg-3); }
.cab-balance b { font: 600 var(--f-2xl)/1 var(--display); letter-spacing: -.03em; }
.cab-balance i { display: inline-flex; align-items: center; gap: 4px; font: 600 var(--f-sm)/1 var(--font); font-style: normal; color: var(--acid); }
.cab-balance i svg { width: 14px; height: 14px; }
.cab-balance:hover .arrow { transform: translate(2px, -2px); }
.cab-side-foot { display: grid; gap: 2px; padding-top: 10px; border-top: var(--bw) solid var(--line); font-size: var(--t-small); }
.cab-side-foot a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; color: var(--fg-2); text-decoration: none; border-radius: var(--r-1); transition: color var(--dur-1), background var(--dur-1); }
.cab-side-foot a:hover { color: var(--fg); background: rgba(244, 243, 238, .04); }
.cab-side-foot svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-3); }
.cab-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-4) var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); }
.cab-head > div { display: grid; gap: 8px; min-width: 0; }
.cab-date { font: 500 var(--f-xs)/1 var(--font); letter-spacing: 0; color: var(--acid); }
.cab-head h1 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: -.045em; line-height: 1; overflow-wrap: anywhere; }
.cab-sub { color: var(--fg-2); font-size: var(--f-md); max-width: 44em; }
.cab-flash { margin-bottom: var(--s-5); }
.cab-h { font: 600 var(--f-lg)/1.2 var(--display); letter-spacing: -.015em; }
.demo-note { margin-bottom: var(--s-5); border-color: color-mix(in srgb, var(--acid) 40%, transparent); }
.demo-note .spread { width: 100%; }
.cab-fail { margin-top: var(--s-6); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; color: var(--fg-2); text-decoration: none; font-weight: 500; font-size: var(--f-md); white-space: nowrap; border-radius: var(--r-1); isolation: isolate; transition: color var(--dur-2); }
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current='page'] { color: var(--fg); font-weight: 600; }
.tab-ind { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); view-transition-name: cab-tab; }
.tabs svg { display: none; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-2); }
.tabs .t-short { display: none; }
.tabs .count { margin-left: auto; font-size: var(--f-xs); padding: 2px 8px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg-2); }
@media (min-width: 1000px) {
  .cab-side .tabs { display: grid; gap: 2px; }
  .cab-side .tabs a { gap: 12px; padding: 0 12px; }
  .cab-side .tabs svg { display: block; color: var(--fg-3); }
  .cab-side .tabs a:hover:not([aria-current]) { background: rgba(244, 243, 238, .035); }
  .cab-side .tabs a[aria-current='page'] svg { color: var(--acid); }
}
@media (max-width: 999px) {
  .cab { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .cab-side { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3) var(--s-4); padding: 0; border: 0; background: none; }
  .cab-me { padding: 0; border: 0; }
  .cab-side .tabs { grid-column: 1 / -1; grid-row: 2; width: fit-content; max-width: 100%; padding: 5px; border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
  .cab-side .tabs a { border-radius: var(--r-pill); padding: 0 16px; min-height: 42px; }
  .tab-ind { background: var(--fg); box-shadow: none; }
  .cab-side .tabs a[aria-current='page'] { color: var(--bg); }
  .cab-side .tabs .count { margin-left: 8px; background: var(--surface-3); }
  .cab-side .tabs a[aria-current='page'] .count { background: rgba(10, 10, 10, .14); color: inherit; }
  .cab-balance { grid-auto-flow: column; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: var(--r-pill); }
  .cab-balance::before, .cab-balance i { display: none; } .cab-balance b { font-size: var(--f-xl); }
  .cab-side-foot { display: none; }
}
@media (max-width: 720px) {
  body.has-cab-nav { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .cab-head-go { display: none; } .cab-sub { font-size: var(--f-sm); }
  .cab-side .tabs { position: fixed; z-index: 45; inset: auto 0 0; width: auto; margin: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px; overflow: visible; border: 0; border-top: var(--bw) solid var(--line-strong); border-radius: 0; background: rgba(16, 16, 17, .88); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
  .cab-side .tabs a { flex: 1 1 0; min-width: 0; min-height: 56px; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 2px; border-radius: var(--r-2); font-size: var(--f-xs); font-weight: 500; color: var(--fg-3); }
  .cab-side .tabs a[aria-current='page'] { color: var(--acid); }
  .tab-ind { background: rgba(199, 255, 61, .1); box-shadow: none; }
  .cab-side .tabs svg { display: block; width: 22px; height: 22px; }
  .tabs .t-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs .t-short { display: block; }
  .cab-side .tabs .count { position: absolute; top: 4px; left: calc(50% + 7px); margin: 0; min-width: 18px; padding: 2px 5px; font-size: var(--f-xs); line-height: 1.25; text-align: center; background: var(--fg); color: var(--bg); }
  .cab-side .tabs a[aria-current='page'] .count { background: var(--acid); color: var(--acid-ink); }
  .toast-host { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
.cab-main { display: grid; gap: clamp(28px, 3.4vw, 44px); min-width: 0; }
.cab-main > section { min-width: 0; }
.cab-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--surface-3); font: 600 var(--f-xs)/1 var(--font); color: var(--fg-2); }
.sec-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-small); color: var(--fg-2); text-decoration: none; }
.sec-link:hover { color: var(--fg); } .sec-link svg { width: 14px; height: 14px; } .sec-link:hover .arrow { transform: translate(2px, -2px); }
.kpis { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); margin: 0; border-radius: var(--r-3); border: var(--bw) solid var(--line); background: var(--surface); overflow: hidden; }
.kpi { position: relative; display: grid; align-content: start; gap: 8px; padding: clamp(16px, 2vw, 24px); min-width: 0; }
.kpi + .kpi { border-left: var(--bw) solid var(--line); }
.kpi dt { font-size: var(--t-small); color: var(--fg-2); }
.kpi dd { margin: 0; font: 600 clamp(28px, 3vw, 40px)/1 var(--display); letter-spacing: -.035em; white-space: nowrap; }
.kpi-note { font-size: var(--f-xs); color: var(--fg-3); }
.kpi.is-acid { background: radial-gradient(120% 140% at 0% 0%, rgba(199, 255, 61, .09), transparent 60%); }
.kpi.is-acid dd { color: var(--acid); }
.kpi.is-acid::after { content: ''; position: absolute; right: -60px; bottom: -90px; width: 200px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 8px, rgba(244, 243, 238, .05) 8px 9px); pointer-events: none; }
.kpi.is-warn dd { color: var(--warn); }
.kpi.is-warn dt::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--warn); vertical-align: 1px; animation: cab-pulse 1.6s ease-in-out infinite; }
@keyframes cab-pulse { 50% { opacity: .35; } }
@container cab (max-width: 760px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi.is-acid { grid-column: 1 / -1; border-bottom: var(--bw) solid var(--line); }
  .kpi.is-acid + .kpi { border-left: 0; }
}
@container cab (max-width: 420px) { .kpi { padding: 14px 12px; } .kpi dd { font-size: var(--f-2xl); } .kpi-note { display: none; } .kpi.is-acid .kpi-note { display: block; } }
.focus { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(16px, 2.4vw, 28px); align-items: center; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-3); background: var(--surface); border: var(--bw) solid var(--line-strong); overflow: hidden; isolation: isolate; }
.focus::before { content: ''; position: absolute; z-index: -1; right: -200px; top: -240px; width: 540px; height: 540px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 17px, rgba(244, 243, 238, .05) 17px 18px); -webkit-mask-image: radial-gradient(circle, transparent 0 26%, #000 34% 60%, transparent 70%); mask-image: radial-gradient(circle, transparent 0 26%, #000 34% 60%, transparent 70%); }
.focus.is-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: linear-gradient(100deg, rgba(243, 184, 90, .07), transparent 55%), var(--surface); }
.focus.is-ok { border-color: color-mix(in srgb, var(--acid) 30%, transparent); background: linear-gradient(100deg, rgba(199, 255, 61, .06), transparent 55%), var(--surface); }
.focus-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-2); background: var(--surface-3); color: var(--fg-2); align-self: start; }
.focus-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.focus.is-warn .focus-ico { background: var(--warn-soft); color: var(--warn); }
.focus.is-ok .focus-ico { background: var(--acid-soft); color: var(--acid); }
.focus-text { display: grid; gap: 6px; min-width: 0; }
.focus-label { font: 500 var(--f-xs)/1 var(--font); letter-spacing: 0; color: var(--fg-3); }
.focus.is-warn .focus-label { color: var(--warn); } .focus.is-ok .focus-label { color: var(--acid); }
.focus h2 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.05; }
.focus-sub { color: var(--fg-2); max-width: 46em; font-size: var(--f-md); }
.focus .oc-progress { margin-top: 8px; max-width: 520px; }
.focus-act { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.focus-act .btn { white-space: nowrap; }
@container cab (max-width: 760px) {
  .focus { grid-template-columns: auto minmax(0, 1fr); }
  .focus-act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .focus-act .btn { flex: 1 1 auto; }
}
@container cab (max-width: 460px) { .focus-ico { width: 44px; height: 44px; border-radius: var(--r-2); } .focus-ico svg { width: 22px; height: 22px; } }
.oc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.oc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2vw, 22px); border-radius: var(--r-3); border: var(--bw) solid var(--line); background: var(--surface); min-width: 0; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); }
.oc:hover { border-color: var(--line-strong); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .9); }
.oc.is-attention { border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.oc.is-attention::before { content: ''; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--warn); }
.oc-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 16px; align-items: start; }
.oc-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.oc-logo .pf-logos img { width: 30px; height: 30px; border-radius: var(--r-1); }
.oc-logo .pf-logos img + img { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface-2); }
.pf-mono svg { display: block; width: 26px; height: 26px; color: var(--fg-2); }
.oc-what { display: grid; gap: 4px; min-width: 0; }
.oc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--f-xs); color: var(--fg-3); }
.oc-meta span + span::before { content: '·'; margin-right: 12px; color: var(--fg-3); opacity: .6; }
.oc-meta span:first-child { color: var(--fg-2); font-weight: 500; }
.oc-title { font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.oc-result { color: var(--fg-2); font-size: var(--f-sm); overflow-wrap: anywhere; }
.oc-side { display: grid; justify-items: end; gap: 8px; }
.oc-sum { font: 600 clamp(20px, 2vw, 24px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.oc-release { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: rgba(244, 243, 238, .04); color: var(--fg-2); font-size: var(--f-sm); text-decoration: none; transition: background var(--dur-1), color var(--dur-1); }
.oc-release:hover { background: rgba(244, 243, 238, .08); color: var(--fg); }
.oc-release svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.oc-release span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-top: 14px; border-top: var(--bw) solid var(--line); }
.oc-next { flex: 1 1 260px; font-size: var(--f-sm); color: var(--fg-2); }
@container cab (max-width: 560px) {
  .oc-main { grid-template-columns: auto minmax(0, 1fr); }
  .oc-side { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; justify-items: start; }
  .oc-logo { width: 44px; height: 44px; border-radius: var(--r-2); } .oc-logo .pf-logos img { width: 26px; height: 26px; }
  .oc-foot .row { width: 100%; } .oc-foot .btn { flex: 1 1 0; }
}
.oc-progress { display: grid; gap: 8px; }
.oc-progress-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--f-sm); color: var(--fg-3); }
.oc-progress-top b { color: var(--fg); font-weight: 600; }
.oc-progress-top .num { color: var(--acid); font-weight: 600; }
.oc-bar { position: relative; height: 6px; border-radius: var(--r-1); background: var(--surface-3); overflow: hidden; }
.oc-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, rgba(199, 255, 61, .55), var(--acid)); transform-origin: left; animation: bar-grow 1.1s var(--ease-out) .25s both; }
.oc-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .45) 50%, transparent 100%); background-size: 40% 100%; background-repeat: no-repeat; animation: bar-shine 2.6s ease-in-out 1.4s infinite; }
@keyframes bar-grow { from { transform: scaleX(0); } }
@keyframes bar-shine { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.ol { border: var(--bw) solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.ol ul { list-style: none; margin: 0; padding: 0; }
.ol-head, .ol-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px 7.5em 210px; gap: var(--s-4); align-items: center; padding: 14px 18px; }
.ol-head { font-size: var(--t-micro); color: var(--fg-3); border-bottom: var(--bw) solid var(--line); padding-block: 11px; background: rgba(244, 243, 238, .015); }
.ol-head span:nth-child(4), .ol-sum { text-align: right; }
.ol-row { position: relative; width: 100%; border: 0; border-top: var(--bw) solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-2); }
.ol li:first-child .ol-row { border-top: 0; }
.ol-row:hover { background: var(--surface-2); }
.ol-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-text); border-radius: 0; outline: none; }
.ol-id, .ol-what { display: grid; gap: 3px; min-width: 0; }
.ol-id b { font: 600 var(--f-sm)/1.2 var(--font); white-space: nowrap; }
.ol-id span, .ol-what span { font-size: var(--f-sm); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-what b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-pf .pf { font-weight: 500; font-size: var(--f-sm); }
.ol .pf-logos img { width: 24px; height: 24px; border-radius: var(--r-1); }
.ol .pf-logos img + img { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.ol .pf-mono svg { width: 20px; height: 20px; }
.ol-sum { font: 600 var(--f-md)/1 var(--display); white-space: nowrap; }
.ol-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ol-go { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fg-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
.ol-row:hover .ol-go, .ol-row:focus-visible .ol-go { opacity: 1; transform: none; }
.ol-row.is-done .ol-what b, .ol-row.is-done .ol-sum { color: var(--fg-2); }
.ol-compact .ol-head, .ol-compact .ol-row { grid-template-columns: minmax(0, 1fr) auto auto; } .ol-compact .ol-head span:nth-child(1), .ol-compact .ol-head span:nth-child(3), .ol-compact .ol-id, .ol-compact .ol-pf { display: none; }
@container cab (max-width: 980px) { .ol-head, .ol-row { grid-template-columns: 170px minmax(0, 1fr) 7.5em 196px; } .ol-head span:nth-child(3), .ol-pf { display: none; } }
@container cab (max-width: 520px) {
  .ol-compact .ol-head { display: none; }
  .ol-compact .ol-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'what sum' 'what state'; gap: 6px 12px; }
  .ol-compact .ol-what { grid-area: what; } .ol-compact .ol-sum { grid-area: sum; } .ol-compact .ol-state { grid-area: state; justify-content: flex-end; }
}
@container cab (max-width: 700px) {
  .ol:not(.ol-compact) { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .ol:not(.ol-compact) .ol-head { display: none; }
  .ol:not(.ol-compact) ul { display: grid; gap: 10px; }
  .ol:not(.ol-compact) .ol-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'pf state' 'what what' 'id sum'; gap: 10px var(--s-3); padding: 16px; border: var(--bw) solid var(--line); border-radius: var(--r-3); background: var(--surface); }
  .ol:not(.ol-compact) .ol-row:focus-visible { border-radius: var(--r-3); }
  .ol:not(.ol-compact) .ol-pf { display: block; grid-area: pf; } .ol:not(.ol-compact) .ol-state { grid-area: state; } .ol:not(.ol-compact) .ol-what { grid-area: what; } .ol:not(.ol-compact) .ol-id { grid-area: id; } .ol:not(.ol-compact) .ol-sum { grid-area: sum; align-self: end; }
  .ol:not(.ol-compact) .ol-what b { white-space: normal; overflow-wrap: anywhere; font-size: var(--f-md); }
  .ol-go { display: none; }
}
.cab-over-foot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: start; }
.cab-over-foot > :only-child { grid-column: 1 / -1; }
.feed { padding: clamp(18px, 2vw, 24px); border-radius: var(--r-3); border: var(--bw) solid var(--line); background: var(--surface); }
@container cab (max-width: 860px) { .cab-over-foot { grid-template-columns: minmax(0, 1fr); } }
.cab-quiet { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding: 18px 20px; border-radius: var(--r-3); border: var(--bw) dashed var(--line-strong); color: var(--fg-2); }
.cab-help .row { grid-column: 2; }
.cab-help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 18px 20px; border-radius: var(--r-3); background: linear-gradient(90deg, rgba(61, 107, 255, .08), transparent 60%), var(--surface); border: var(--bw) solid var(--line); }
.cab-help > div:not(.row) { display: grid; gap: 4px; min-width: 0; }
.cab-help-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-2); background: rgba(61, 107, 255, .14); color: #9bb3ff; }
.cab-help-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
@container cab (max-width: 820px) { .cab-help { grid-template-columns: auto minmax(0, 1fr); } .cab-help .row { grid-column: 1 / -1; } }
.cab-empty { gap: 14px; border-style: dashed; }
.cab-empty-art { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: 6px; }
.cab-empty-art i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(199, 255, 61, .2) 0 10%, transparent 11%), repeating-radial-gradient(circle, transparent 0 7px, rgba(244, 243, 238, .08) 7px 8px); animation: cab-spin 14s linear infinite; }
.cab-empty-art svg { position: relative; width: 34px; height: 34px; color: var(--acid); }
@keyframes cab-spin { to { transform: rotate(1turn); } }
.cab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-6); align-items: start; }
@media (max-width: 1180px) { .cab-grid { grid-template-columns: minmax(0, 1fr); } }
.cab-filters { margin-bottom: var(--s-4); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); }
.cab-filters .chip { flex: none; min-height: 42px; transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; font-size: var(--t-small); color: var(--fg-2); }
.steps-list li { position: relative; padding-left: 36px; counter-increment: s; line-height: 1.5; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); color: var(--fg); font: 600 var(--f-xs)/1 var(--font); }
.steps-list a { color: var(--fg); }
.wallet-card { position: relative; display: grid; gap: var(--s-2); padding: clamp(22px, 2.8vw, 34px); border-radius: var(--r-3); border: var(--bw) solid var(--line-strong); background: radial-gradient(90% 120% at 0% 0%, rgba(199, 255, 61, .08), transparent 60%), var(--surface); overflow: hidden; isolation: isolate; }
.wallet-card::before { content: ''; position: absolute; z-index: -1; right: -120px; top: 50%; width: 420px; aspect-ratio: 1; margin-top: -210px; border-radius: 50%; background: radial-gradient(circle, var(--acid) 0 9%, #0a0a0a 9.4% 11%, transparent 11.4%), radial-gradient(circle, rgba(199, 255, 61, .12) 0 30%, rgba(199, 255, 61, 0) 56%), repeating-radial-gradient(circle, transparent 0 11px, rgba(244, 243, 238, .07) 11px 12px); animation: cab-spin 40s linear infinite; }
.wallet-card p { font-size: var(--t-small); color: var(--fg-2); }
.wallet-card b { font: 600 clamp(42px, 5vw, 68px)/1 var(--display); letter-spacing: -.045em; }
.wallet-card span { max-width: 30em; font-size: var(--f-sm); color: var(--fg-2); }
@media (max-width: 560px) { .wallet-card::before { right: -220px; opacity: .6; } }
.amount-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.amount-chips .chip { min-height: 34px; padding: 0 12px; font-size: var(--f-sm); }
.tx-list { display: grid; border: var(--bw) solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--surface); }
.tx-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 16px; border-bottom: var(--bw) solid var(--line); font-size: var(--f-sm); }
.tx-list > div:last-child { border-bottom: 0; }
.tx-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-1); background: var(--surface-3); color: var(--fg-2); font: 600 var(--f-md)/1 var(--font); }
.tx-ico.plus { background: var(--acid-soft); color: var(--acid); }
.tx-list .amt { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.tx-list .amt.plus { color: var(--accent-text); }
.tx-list small { color: var(--fg-3); }
.set-head { align-items: center; margin-bottom: 6px; }
.set-score { display: inline-flex; align-items: center; gap: 10px; font-size: var(--f-sm); color: var(--fg-2); }
.set-meter { display: inline-grid; grid-template-columns: repeat(5, 12px); gap: 3px; }
.set-meter i { height: 5px; border-radius: var(--r-1); background: var(--surface-3); }
.set-meter i:nth-child(-n + 4) { background: var(--surface-3); }
.set-meter[style*='--n:1'] i:nth-child(-n + 1), .set-meter[style*='--n:2'] i:nth-child(-n + 2), .set-meter[style*='--n:3'] i:nth-child(-n + 3), .set-meter[style*='--n:4'] i:nth-child(-n + 4), .set-meter[style*='--n:5'] i:nth-child(-n + 5) { background: var(--acid); }
.set-tip { margin-bottom: 8px; }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-height: 64px; padding: 10px 0; border-bottom: var(--bw) solid var(--line); overflow-wrap: anywhere; }
.set-row:has(+ [data-settings-form]) { border-bottom: 0; }
.set-what { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 500; }
.set-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-1); background: var(--surface-2); color: var(--fg-3); }
.set-row.is-on .set-ico { background: var(--acid-soft); color: var(--acid); }
.set-form { margin-top: 18px; padding-top: 18px; border-top: var(--bw) solid var(--line); animation: cab-rise .4s var(--ease-out); }
.claim-banner { display: grid; gap: var(--s-3); padding: 18px 20px; border-radius: var(--r-3); border: var(--bw) solid color-mix(in srgb, var(--accent-text) 40%, transparent); background: linear-gradient(100deg, rgba(199, 255, 61, .1), rgba(199, 255, 61, .03)); margin-bottom: var(--s-5); }
.claim-banner .claim-item { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: var(--bw) solid var(--line); }
.claim-what { display: grid; gap: 4px; min-width: 0; }
.claim-what > b { font: 600 var(--f-md)/1.25 var(--display); letter-spacing: -.01em; }
.claim-meta { font-size: var(--f-sm); color: var(--fg-2); }
.claim-meta b { color: var(--fg); font-weight: 600; }
dialog.drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-left: var(--bw) solid var(--line-strong); border-radius: 0; background: var(--surface); color: var(--fg); box-shadow: -40px 0 120px -20px rgba(0, 0, 0, .8); overflow: hidden auto; overscroll-behavior: contain; }
dialog.drawer::backdrop { background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.drawer[open] { animation: drawer-in .45s var(--ease-out); }
dialog.drawer[open]::backdrop { animation: cab-fade .35s ease; }
dialog.drawer.is-closing { animation: drawer-out .28s cubic-bezier(.4, 0, 1, 1) forwards; }
dialog.drawer.is-closing::backdrop { animation: cab-fade .28s ease reverse forwards; }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes drawer-out { to { transform: translateX(100%); } }
.dr { display: grid; min-height: 100%; align-content: start; }
.dr-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 10px; padding: 18px 24px 20px; background: linear-gradient(180deg, var(--surface) 80%, rgba(16, 16, 17, .92)); border-bottom: var(--bw) solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dr-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-small); color: var(--fg-2); }
.dr-logo .pf-logos img { width: 24px; height: 24px; border-radius: var(--r-1); } .dr-logo .pf-logos img + img { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); } .dr-logo .pf-mono svg { width: 20px; height: 20px; }
.dr-close { flex: none; border-radius: 50%; }
.dr-title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; line-height: 1.1; overflow-wrap: anywhere; }
.dr-result { color: var(--fg-2); font-size: var(--f-md); }
.dr-sum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dr-sum b { font: 600 var(--f-2xl)/1 var(--display); letter-spacing: -.03em; }
.dr-sum span { font-size: var(--f-sm); color: var(--fg-3); }
.dr-body { display: grid; gap: 26px; padding: 22px 24px 32px; }
.dr-body > * { animation: cab-rise .5s var(--ease-out) both; }
.dr-body > :nth-child(2) { animation-delay: .05s; } .dr-body > :nth-child(3) { animation-delay: .08s; } .dr-body > :nth-child(4) { animation-delay: .11s; } .dr-body > :nth-child(5) { animation-delay: .14s; } .dr-body > :nth-child(n + 6) { animation-delay: .17s; }
.detail-h { font: 600 var(--f-xs)/1.2 var(--font); letter-spacing: 0; color: var(--fg-3); margin-bottom: 14px; }
.detail-next { margin: 0; }
.action-list { display: flex; flex-wrap: wrap; gap: 8px; }
.action-list .btn { flex: 1 1 calc(50% - 4px); white-space: normal; text-align: center; line-height: 1.2; padding-inline: 14px; }
.action-list > .btn-primary, .action-list > p { flex-basis: 100%; }
.dr-body .pc-list { margin-top: 12px; }
@media (max-width: 640px) {
  dialog.drawer { inset: auto 0 0 0; width: 100%; height: auto; max-height: 94dvh; border: 0; border-top: var(--bw) solid var(--line-strong); border-radius: var(--r-2) var(--r-2) 0 0; }
  dialog.drawer[open] { animation-name: sheet-in; }
  dialog.drawer.is-closing { animation-name: sheet-out; }
  .dr-head { padding: 22px 16px 16px; border-radius: var(--r-2) var(--r-2) 0 0; }
  .dr-head::before { content: ''; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-1); background: var(--line-strong); }
  .dr-body { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
  .dr-sum b { font-size: var(--f-2xl); }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
.timeline li[aria-current] { color: var(--fg); font-weight: 600; }
.timeline .tiny { display: block; font-weight: 400; color: var(--fg-3); }
.timeline-v { grid-template-columns: minmax(0, 1fr); gap: 0; }
.timeline-v li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; font-size: var(--f-sm); }
.timeline-v li::before { content: ''; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--surface-3); }
.timeline-v li::after { content: ''; position: absolute; left: 10px; top: 24px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--surface-3); }
.timeline-v li:last-child { padding-bottom: 0; } .timeline-v li:last-child::after { display: none; }
.timeline-v li.done::before { background: var(--acid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 2.9 6-6.2' fill='none' stroke='%230a0a0a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: none; }
.timeline-v li.done::after { background: var(--acid); }
.timeline-v li.current::before { background: radial-gradient(circle, var(--acid) 0 4px, transparent 5px), var(--surface); box-shadow: inset 0 0 0 2px var(--acid), 0 0 0 5px rgba(199, 255, 61, .12); animation: step-ping 2s ease-out infinite; }
.timeline-v li.current::after { background: linear-gradient(var(--acid), var(--surface-3)); }
.timeline-v li > span { padding-top: 1px; }
@keyframes step-ping { 0% { box-shadow: inset 0 0 0 2px var(--acid), 0 0 0 0 rgba(199, 255, 61, .35); } 70%, 100% { box-shadow: inset 0 0 0 2px var(--acid), 0 0 0 9px rgba(199, 255, 61, 0); } }
.history { list-style: none; margin: 0; padding: 0; display: grid; }
.history li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; padding-bottom: 14px; position: relative; font-size: var(--f-sm); }
.history li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--accent-text); margin-top: 5px; }
.history li:not(:first-child)::before { border-color: var(--fg-3); }
.history li::after { content: ''; position: absolute; left: 5.5px; top: 18px; bottom: 0; width: 1px; background: var(--line-strong); }
.history li:last-child { padding-bottom: 0; } .history li:last-child::after { display: none; }
.history time { display: block; font-size: var(--f-xs); color: var(--fg-3); }
@media (max-width: 520px) {
  .oc .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .oc .timeline li > span { display: none; }
  .oc .timeline li[aria-current] > span { display: block; }
}
.auth { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; min-height: min(800px, calc(100dvh - var(--header-h) - var(--pv-h) - 2 * clamp(24px, 4vw, 48px))); padding-block: clamp(8px, 2vw, 28px); }
.auth-bg { position: absolute; z-index: -1; top: calc(clamp(24px, 4vw, 48px) * -1 - 40px); bottom: -220px; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 0, #000 58%, transparent); mask-image: linear-gradient(#000 0, #000 58%, transparent); }
.auth-glow { position: absolute; inset: -10%; background: radial-gradient(40% 52% at 76% 44%, rgba(199, 255, 61, .14), rgba(199, 255, 61, 0) 70%), radial-gradient(36% 46% at 98% 96%, rgba(61, 107, 255, .22), rgba(61, 107, 255, 0) 72%), radial-gradient(30% 42% at 2% 0%, rgba(139, 92, 255, .12), rgba(139, 92, 255, 0) 70%); animation: glow-drift 18s ease-in-out infinite alternate; }
@keyframes glow-drift { to { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
.auth-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(244, 243, 238, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 243, 238, .035) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 40%, #000, transparent 75%); }
.auth-watermark { position: absolute; right: max(-4%, calc(50% - 780px)); bottom: 4%; width: min(60vw, 820px); height: min(60vw, 820px); color: rgba(244, 243, 238, .03); }
.auth-main { min-width: 0; }
.auth-form { position: relative; display: grid; gap: 20px; }
.auth-head { display: grid; gap: 10px; }
.auth-logo { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: var(--r-2); background: var(--acid); color: var(--acid-ink); box-shadow: 0 16px 40px -18px rgba(199, 255, 61, .6), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.auth-logo svg { width: 32px; height: 32px; }
.is-entering .auth-logo { animation: logo-pop .8s var(--ease-spring) both; }
@keyframes logo-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.auth-kicker { font: 500 var(--f-xs)/1 var(--font); letter-spacing: 0; color: var(--acid); }
.auth-head h1 { font-size: clamp(36px, 4.2vw, 56px); letter-spacing: -.045em; line-height: .98; }
.auth-sub { color: var(--fg-2); font-size: var(--f-md); line-height: 1.5; max-width: 30em; }
.auth-consent { display: grid; gap: var(--s-2); padding: 12px 14px; border-radius: var(--r-2); background: rgba(244, 243, 238, .035); border: var(--bw) solid var(--line); font-size: var(--f-sm); transition: border-color var(--dur-2), background var(--dur-2); }
.auth-consent:has(input:checked) { border-color: color-mix(in srgb, var(--acid) 35%, transparent); background: rgba(199, 255, 61, .05); }
.auth-consent.is-shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.auth-social { display: grid; gap: 10px; }
.btn.auth-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 22px; border-radius: var(--r-pill); border: 0; font: 600 var(--f-md)/1 var(--font); overflow: hidden; transition: transform var(--dur-1) var(--ease), background var(--dur-2), box-shadow var(--dur-2); }
.auth-btn svg { flex: none; }
.auth-btn-go { position: absolute; right: 22px; opacity: 0; transform: translateX(-8px); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
.auth-btn:hover .auth-btn-go, .auth-btn:focus-visible .auth-btn-go { opacity: 1; transform: none; }
.btn.auth-btn-tg { background: var(--acid); color: var(--acid-ink); }
.btn.auth-btn-tg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); animation: btn-sheen 5.5s ease-in-out 2s infinite; }
@keyframes btn-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.btn.auth-btn-tg:hover { box-shadow: 0 16px 40px -14px rgba(199, 255, 61, .65); }
.btn.auth-btn-vk { background: var(--surface-2); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.auth-btn-vk:hover { background: var(--surface-3); }
.btn.auth-btn:active { transform: scale(.985); }
.auth-or { display: flex; align-items: center; gap: 14px; color: var(--fg-3); font-size: var(--f-sm); }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-mail { display: grid; gap: 14px; }
.auth-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-self: start; padding: 4px; border-radius: var(--r-pill); background: rgba(244, 243, 238, .05); border: var(--bw) solid var(--line); isolation: isolate; }
.auth-seg-thumb { position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); border-radius: var(--r-pill); background: var(--fg); transform: translateX(calc(var(--at, 0) * 100%)); transition: transform var(--dur-2) var(--ease-out); }
.auth-seg button { min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg-2); font: 600 var(--f-sm)/1 var(--font); cursor: pointer; transition: color var(--dur-2); white-space: nowrap; }
.auth-seg button:hover { color: var(--fg); }
.auth-seg button[aria-pressed='true'] { color: var(--bg); }
.auth-panel, .auth-inline { display: grid; gap: 14px; align-content: start; }
.auth-inline > div:empty, .auth-panel [data-pw-error]:empty { display: none; }
.auth-panel .is-in { animation: cab-rise .4s var(--ease-out); }
.auth-form .input { min-height: 54px; background: rgba(10, 10, 10, .6); }
.btn.auth-btn-mail { border-radius: var(--r-pill); }
.btn.auth-btn-mail:not(.btn-primary) { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.auth-btn-mail:not(.btn-primary):hover { box-shadow: inset 0 0 0 1px var(--fg-3); background: rgba(244, 243, 238, .04); }
.auth-hint { font-size: var(--f-sm); color: var(--fg-3); min-height: 1.4em; }
.auth-note { font-size: var(--f-sm); color: var(--fg-2); line-height: 1.5; }
.auth-foot { font-size: var(--t-small); color: var(--fg-3); }
.auth-foot a { color: var(--fg); }
.code-step { display: grid; gap: 14px; animation: cab-rise .45s var(--ease-out); }
.mail-sent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-2); background: rgba(199, 255, 61, .06); border: var(--bw) solid color-mix(in srgb, var(--acid) 25%, transparent); font-size: var(--f-sm); color: var(--fg-2); }
.mail-sent b { color: var(--fg); overflow-wrap: anywhere; }
.mail-sent .link-btn { margin-left: auto; }
.mail-sent-ico { display: grid; place-items: center; color: var(--acid); }
.input.otp { font: 600 var(--f-2xl)/1 var(--mono); letter-spacing: .5em; text-align: center; padding-inline: 12px 0; }
.input.otp::placeholder { letter-spacing: .5em; color: var(--fg-3); opacity: .5; }
.tg-wait { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 6px; padding: 16px; border-radius: var(--r-2); background: var(--surface); border: var(--bw) solid var(--line-strong); animation: cab-rise .45s var(--ease-out); }
.tg-wait-text { display: grid; gap: 10px; min-width: 0; }
.tg-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.tg-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.tg-ring circle { fill: none; stroke: var(--surface-3); stroke-width: 3; }
.tg-ring .tg-ring-run { stroke: var(--acid); stroke-linecap: round; stroke-dasharray: 100; animation: ring-run var(--ttl, 300s) linear forwards; }
@keyframes ring-run { to { stroke-dashoffset: 100; } }
.tg-ring span { font: 600 var(--f-xs)/1 var(--font); color: var(--fg-2); }
.login-code { display: flex; gap: 6px; }
.login-code span { display: grid; place-items: center; width: 38px; height: 48px; border-radius: var(--r-1); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 var(--f-xl)/1 var(--display); color: var(--fg); animation: digit-in .5s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes digit-in { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.tg-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent-text); animation: tg-pulse 1.2s ease-in-out infinite alternate; }
@keyframes tg-pulse { from { opacity: .3; } }
@media (max-width: 400px) { .tg-wait { grid-template-columns: minmax(0, 1fr); } .login-code span { width: 34px; height: 44px; font-size: var(--f-xl); } }
.auth-form.is-done > :not(.auth-done) { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition: opacity var(--dur-2), transform var(--dur-2), filter var(--dur-2); pointer-events: none; }
.auth-done { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; animation: cab-fade .3s ease both .1s; }
.auth-done b { font: 600 var(--f-2xl)/1 var(--display); letter-spacing: -.03em; }
.auth-done > span:last-child { color: var(--fg-2); font-size: var(--f-md); }
.auth-done-mark svg { width: 76px; height: 76px; margin-bottom: 8px; }
.auth-done-mark circle { fill: var(--acid-soft); stroke: var(--acid); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .5s var(--ease-out) .1s forwards; }
.auth-done-mark path { fill: none; stroke: var(--acid); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .35s var(--ease-out) .45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.auth-show { position: relative; display: grid; gap: clamp(20px, 3vw, 36px); justify-items: center; min-width: 0; perspective: 1200px; }
.show-stack { --rx: 0deg; --ry: 0deg; position: relative; width: min(100%, 460px); padding: 52px 0 96px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out); }
.show-card { border-radius: var(--r-2); background: linear-gradient(180deg, rgba(30, 30, 33, .96), rgba(16, 16, 18, .96)); box-shadow: inset 0 0 0 1px rgba(244, 243, 238, .1), 0 40px 80px -40px #000; }
.show-order { position: relative; z-index: 1; display: grid; gap: 14px; padding: 24px; transform: rotate(-2deg); }
.is-entering .show-order { animation: show-in 1s var(--ease-out) .25s both; }
@keyframes show-in { from { opacity: 0; transform: rotate(-6deg) translateY(40px) scale(.94); } }
.show-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.show-plat { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f-sm); color: var(--fg-2); }
.show-plat img { border-radius: var(--r-1); }
.show-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(199, 255, 61, .14); color: var(--acid); font: 600 var(--f-xs)/1 var(--font); }
.show-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cab-pulse 1.4s ease-in-out infinite; }
.show-title { font: 600 var(--f-xl)/1.15 var(--display); letter-spacing: -.02em; }
.show-id { font-size: var(--f-sm); color: var(--fg-3); }
.show-count { position: relative; display: flex; align-items: center; gap: 12px; }
.show-count b { font: 600 44px/1 var(--display); letter-spacing: -.04em; color: var(--acid); min-width: 4.4ch; }
.show-count span { font-size: var(--f-sm); line-height: 1.3; color: var(--fg-2); }
.show-delta { margin-left: auto; padding: 4px 9px; border-radius: var(--r-pill); background: rgba(199, 255, 61, .12); color: var(--acid); font: 600 var(--f-xs)/1 var(--font); font-style: normal; opacity: 0; }
.show-delta.is-on { animation: delta-pop 2.4s var(--ease-out); }
@keyframes delta-pop { 0% { opacity: 0; transform: translateY(8px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.show-bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.show-bars i { --h: 50%; --d: 0s; flex: 1; height: var(--h); border-radius: var(--r-1) var(--r-1) var(--r-1) var(--r-1); background: linear-gradient(180deg, var(--acid), rgba(199, 255, 61, .2)); transform-origin: 50% 100%; animation: show-grow .9s var(--ease-out) var(--d) both; }
.show-bars i.is-tick { animation: bar-tick .9s var(--ease-spring); }
@keyframes show-grow { from { transform: scaleY(.06); opacity: .2; } }
@keyframes bar-tick { 40% { transform: scaleY(1.08); filter: brightness(1.3); } }
.show-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: var(--f-xs); color: var(--fg-3); }
.show-steps li { display: grid; gap: 6px; }
.show-steps li::before { content: ''; height: 4px; border-radius: var(--r-1); background: rgba(244, 243, 238, .1); }
.show-steps .done::before { background: var(--acid); }
.show-steps .now::before { background: linear-gradient(90deg, var(--acid) 0 50%, rgba(244, 243, 238, .1) 50%) 0 0 / 200% 100%; animation: step-fill 2.4s ease-in-out infinite alternate; }
@keyframes step-fill { from { background-position: 100% 0; } to { background-position: 30% 0; } }
.show-steps .done, .show-steps .now { color: var(--fg-2); }
.show-toast, .show-msg { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 290px; padding: 14px 16px; font-size: var(--f-sm); transform: translateZ(40px); }
.show-toast { top: 0; right: -7%; rotate: 3deg; animation: show-pop .7s var(--ease-spring) 1.1s both, show-float 6s ease-in-out 1.8s infinite; }
.show-msg { bottom: 0; left: -9%; rotate: -1.5deg; animation: show-pop .7s var(--ease-spring) 1.6s both, show-float 6s ease-in-out -1s infinite; }
@keyframes show-pop { from { opacity: 0; scale: .7; translate: 0 16px; } }
@keyframes show-float { 50% { translate: 0 -8px; } }
.show-toast b, .show-msg b { display: block; margin-bottom: 2px; font: 600 var(--f-sm)/1.2 var(--font); color: var(--fg); }
.show-msg b i { margin-left: 6px; font: 500 var(--f-xs)/1 var(--font); font-style: normal; color: var(--fg-3); }
.show-toast span, .show-msg span { color: var(--fg-2); line-height: 1.35; }
.show-ok, .show-ava { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font: 600 var(--f-md)/1 var(--font); }
.show-ok { background: var(--acid); color: var(--acid-ink); }
.show-ava { background: var(--text); color: var(--bg); }
.show-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(100%, 520px); }
.show-list li { display: grid; align-content: start; gap: 4px; font-size: var(--f-sm); line-height: 1.35; color: var(--fg-3); padding-top: 12px; border-top: 1px solid var(--line); }
.show-list b { font: 600 var(--f-sm)/1.2 var(--display); color: var(--fg); }
.is-entering .show-list li { animation: cab-rise .6s var(--ease-out) both; } .is-entering .show-list li:nth-child(1) { animation-delay: 1.2s; } .is-entering .show-list li:nth-child(2) { animation-delay: 1.3s; } .is-entering .show-list li:nth-child(3) { animation-delay: 1.4s; }
@media (max-width: 1023px) {
  .auth { grid-template-columns: minmax(0, 1fr); justify-items: center; min-height: 0; }
  .auth-main { width: min(100%, 480px); }
  .auth-show { display: none; }
}
@media (max-width: 560px) {
  .auth-head h1 { font-size: clamp(30px, 9vw, 40px); }
  .auth-logo { width: 48px; height: 48px; border-radius: var(--r-2); }
  .auth-logo svg { width: 28px; height: 28px; }
  .auth-watermark { width: 120vw; height: 120vw; right: -42%; bottom: -24%; }
  .auth-form { gap: 16px; }
  .auth-seg { justify-self: stretch; }
}
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-2); border: var(--bw) solid var(--line); }
.seg button { min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg-2); font-weight: 600; font-size: var(--f-sm); line-height: 1.15; cursor: pointer; transition: background var(--dur-2), color var(--dur-2); }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed='true'] { background: var(--surface-3); color: var(--fg); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 52px; }
.pw-eye { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--fg-3); cursor: pointer; }
.pw-eye:hover, .pw-eye[aria-pressed='true'] { color: var(--fg); }
.pw-eye[aria-pressed='true'] { background: var(--surface-3); }
.pw-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pw-meter i { height: 4px; border-radius: var(--r-1); background: var(--surface-3); transition: background var(--dur-2); }
.pw-meter[data-score='1'] i:nth-child(1) { background: var(--danger); }
.pw-meter[data-score='2'] i:nth-child(-n + 2) { background: var(--warn); }
.pw-meter[data-score='3'] i { background: var(--acid); }
.link-btn { padding: 0; border: 0; background: none; color: var(--fg-2); font-size: var(--t-small); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.link-btn:hover { color: var(--fg); }
.field .spread > label { font-size: var(--t-small); font-weight: 500; color: var(--fg-2); }
::view-transition-group(cab-tab) { animation-duration: .45s; animation-timing-function: var(--ease-out); }
html[data-vt='tab']::view-transition-old(root) { animation: vt-out .18s ease both; }
html[data-vt='tab']::view-transition-new(root) { animation: vt-in .38s var(--ease-out) both; }
html[data-vt='filter']::view-transition-old(root), html[data-vt='view']::view-transition-old(root) { animation: vt-fade .15s ease both reverse; }
html[data-vt='filter']::view-transition-new(root), html[data-vt='view']::view-transition-new(root) { animation: vt-fade .25s ease both; }
html[data-vt='enter']::view-transition-old(root) { animation: vt-zoom-out .35s ease both; }
html[data-vt='enter']::view-transition-new(root) { animation: vt-zoom-in .6s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-zoom-out { to { opacity: 0; transform: scale(.98); filter: blur(6px); } }
@keyframes vt-zoom-in { from { opacity: 0; transform: scale(1.015); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) {
  .is-entering .rise, .oc-bar i, .oc-bar i::after, .show-bars i, .show-toast, .show-msg, .show-order, .auth-glow, .btn.auth-btn-tg::before, .wallet-card::before, .cab-empty-art i, .timeline-v li.current::before, .dr-body > *, .kpi.is-warn dt::before, .show-pill i, .show-steps .now::before, .login-code span, .code-step, .tg-wait, .set-form, .auth-panel .is-in { animation: none !important; }
  dialog.drawer[open], dialog.drawer.is-closing, dialog.drawer[open]::backdrop { animation: none; }
  .show-stack, .auth-seg-thumb { transition: none; }
}
.np { display: grid; gap: clamp(28px, 3.4vw, 44px); min-width: 0; }
.np-sec { display: grid; gap: var(--s-3); min-width: 0; }
.np-sec .cab-sec-head { flex-wrap: wrap; margin-bottom: 0; }
.np-sub { font-size: var(--f-sm); color: var(--fg-3); }
.np-note { margin: 0; padding: 12px 16px; border-radius: var(--r-2); border: var(--bw) dashed var(--line-strong); color: var(--fg-2); font-size: var(--f-sm); }
.np-vol.vol-config { min-height: 480px; padding: clamp(14px, 2vw, 28px); }
@container cab (max-width: 900px) { .np .co.co-wide { grid-template-columns: minmax(0, 1fr); } .np .co-side { position: relative; top: auto; } }
.np-filters { margin: 2px 0 4px; }
.np-filters .chip-n { margin-left: 6px; font-size: var(--f-xs); color: var(--fg-3); }
.np-filters .chip[aria-pressed='true'] .chip-n { color: inherit; opacity: .7; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--s-3); }
.np-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-width: 0; padding: 18px; border-radius: var(--r-3); border: var(--bw) solid var(--line-strong); background: var(--surface); transition: border-color var(--dur-2), transform var(--dur-2) var(--ease); }
.np-card:hover { border-color: var(--fg-3); transform: translateY(-2px); }
.np-card.is-off { opacity: .55; }
.np-pf { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--f-xs); color: var(--fg-3); }
.np-pf .pf-logos { display: inline-flex; }
.np-pf .pf-logos img { border-radius: var(--r-1); }
.np-pf .pf-logos img + img { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.np-pf em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--acid); white-space: nowrap; }
.np-card h3 { margin: 0; font: 600 var(--f-lg)/1.25 var(--display); letter-spacing: -.01em; }
.np-result { margin: 0; font-size: var(--f-sm); line-height: 1.4; color: var(--fg-2); }
.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: var(--bw) solid var(--line); }
.np-price { margin: 0; font: 600 var(--f-xl)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.np-price small { font: 500 var(--f-sm)/1 var(--font); color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .np-card, .np-card:hover { transition: none; transform: none; } }
.cab-side .tabs a[data-tab='new'] svg { color: var(--acid); }
.cab-head-go svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (max-width: 720px) {
  .cab-side .tabs a[data-tab='overview'] { order: 1; } .cab-side .tabs a[data-tab='orders'] { order: 2; } .cab-side .tabs a[data-tab='new'] { order: 3; }
  .cab-side .tabs a[data-tab='wallet'] { order: 4; } .cab-side .tabs a[data-tab='settings'] { order: 5; } .cab-side .tabs a[data-tab='claim'] { display: none; }
  .cab-side .tabs a[data-tab='new'] { color: var(--fg); }
  .cab-side .tabs a[data-tab='new'] svg { width: 44px; height: 44px; margin-top: -20px; padding: 10px; border-radius: 50%; background: var(--acid); color: var(--acid-ink); box-shadow: 0 0 0 5px var(--bg), 0 10px 26px -8px rgba(199, 255, 61, .55); }
  .cab-side .tabs a[data-tab='new'] .tab-ind { display: none; }
  
  body.has-cab-nav .co-dock { bottom: calc(68px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
}
.topup-bonus { margin: 6px 0 0; }
.topup-bonus:empty { display: none; }
.topup-bonus-on { color: var(--accent-text); font-weight: 600; }
.chip-bonus { font-style: normal; font-size: var(--f-xs); font-weight: 600; color: var(--accent-text); }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px; border-radius: var(--r-2); border: var(--bw) solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; overflow: hidden; transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease); }
.quick-a svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: var(--r-1); background: var(--surface-2); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-2); transition: color var(--dur-2), background var(--dur-2); }
.quick-a span { display: grid; gap: 3px; min-width: 0; }
.quick-a b { font: 600 var(--f-md)/1.2 var(--font); letter-spacing: -.01em; }
.quick-a small { font-size: var(--f-xs); line-height: 1.3; color: var(--fg-3); }
.quick-a:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-2px); }
.quick-a:hover svg { color: var(--fg); background: var(--surface-3); }
.quick-a:focus-visible { outline: none; box-shadow: var(--focus); }
.quick-a.is-main { border-color: color-mix(in srgb, var(--acid) 45%, transparent); background: linear-gradient(120deg, rgba(199, 255, 61, .13), rgba(199, 255, 61, .03) 70%), var(--surface); }
.quick-a.is-main svg { background: var(--acid); color: var(--acid-ink); }
.quick-a.is-main:hover { border-color: var(--acid); }
.quick-a.is-main:hover svg { background: var(--acid); color: var(--acid-ink); }
@container cab (max-width: 860px) { .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container cab (max-width: 400px) { .quick { gap: 8px; } .quick-a { min-height: 60px; padding: 10px; gap: 10px; } .quick-a svg { width: 34px; height: 34px; padding: 8px; border-radius: var(--r-1); } .quick-a b { font-size: var(--f-sm); } .quick-a small { font-size: var(--f-xs); } }
.wallet-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-rows: auto 1fr; grid-template-areas: 'bal form' 'ops form'; gap: var(--s-5) var(--s-6); align-items: start; }
.wallet-bal { grid-area: bal; min-width: 0; } .wallet-ops { grid-area: ops; display: grid; gap: var(--s-3); min-width: 0; } .wallet-grid .topup { grid-area: form; min-width: 0; }
@media (max-width: 1180px) { .wallet-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'bal' 'form' 'ops'; } }
.wallet-go { justify-self: start; margin-top: 6px; }
.topup h3 { font: 600 var(--f-xl)/1.15 var(--display); letter-spacing: -.02em; }
.topup-amount { position: relative; }
.topup-amount .input { height: 60px; padding-right: 44px; font: 600 var(--f-2xl)/1 var(--display); letter-spacing: -.02em; }
.topup-amount span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 var(--f-xl)/1 var(--display); color: var(--fg-3); pointer-events: none; }
.topup-amount .input::-webkit-outer-spin-button, .topup-amount .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup-amount .input { -moz-appearance: textfield; appearance: textfield; }
.topup .amount-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: -6px; }
.topup .amount-chips .chip { grid-column: span 2; justify-content: center; min-height: 40px; padding: 0 6px; }
.topup .amount-chips .chip:nth-child(n+4) { grid-column: span 3; }
.topup-methods { margin: 0; padding: 0; border: 0; min-width: 0; }
.topup-methods legend { padding: 0; margin-bottom: var(--s-2); font-size: var(--t-small); font-weight: 500; color: var(--fg-2); }
.topup-methods .co-method-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.topup-method { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; }
.topup-method svg { flex: none; width: 36px; height: 36px; padding: 7px; border-radius: var(--r-1); background: var(--surface-2); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-2); transition: background var(--dur-2), color var(--dur-2); }
.topup-method > span { flex: 1; min-width: 0; }
.topup-method:has(input:checked) svg { background: var(--acid); color: var(--acid-ink); }
.topup-tag { flex: none; padding: 5px 9px; border-radius: var(--r-pill); background: var(--acid); color: var(--acid-ink); font: 600 var(--f-xs)/1 var(--font); font-style: normal; white-space: nowrap; }
.topup .topup-bonus { margin: -6px 0 0; }
.topup-sum { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: var(--r-2); background: var(--surface-2); font-size: var(--f-sm); }
.topup-sum:empty { display: none; }
.topup-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.topup-sum dt { color: var(--fg-2); } .topup-sum dd { margin: 0; font-weight: 600; white-space: nowrap; }
.topup-sum .is-bonus dt, .topup-sum .is-bonus dd { color: var(--accent-text); }
.topup-sum .is-total { padding-top: 10px; border-top: var(--bw) solid var(--line-strong); }
.topup-sum .is-total dt { color: var(--fg); font-weight: 600; } .topup-sum .is-total dd { font: 600 var(--f-xl)/1 var(--display); letter-spacing: -.02em; }
.ol-compact li.has-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-top: var(--bw) solid var(--line); }
.ol-compact li.has-act:first-child { border-top: 0; }
.ol-compact li.has-act .ol-row { border-top: 0; }
.ol-act { margin-right: 14px; }
@container cab (max-width: 560px) { .ol-compact li.has-act { grid-template-columns: minmax(0, 1fr); } .ol-act { justify-self: start; margin: -4px 0 14px 18px; } }
.cab-side-foot button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--fg-2); font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-1); transition: color var(--dur-1), background var(--dur-1); }
.cab-side-foot button:hover { color: var(--fg); background: rgba(244, 243, 238, .04); }
.cab-side-foot button:focus-visible { outline: none; box-shadow: var(--focus); }
.oc-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; margin: 0; padding: 0; list-style: none; }
.oc-steps li { display: grid; gap: 7px; min-width: 0; }
.oc-steps i { position: relative; height: 6px; border-radius: var(--r-1); background: var(--surface-3); overflow: hidden; }
.oc-steps .is-done i { background: var(--acid); }
.oc-steps .is-now i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(199, 255, 61, .55), var(--acid)); transform-origin: left; transform: scaleX(.6); }
.oc-steps span { font-size: var(--f-xs); line-height: 1.2; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-steps .is-done span { color: var(--fg-2); }
.oc-steps .is-now span { color: var(--fg); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .oc-steps .is-now i::after { animation: step-now 1.6s ease-in-out infinite alternate; } }
@keyframes step-now { from { transform: scaleX(.35); } to { transform: scaleX(.85); } }
@container cab (max-width: 520px) { .oc-steps span { display: none; } }
.copy-id { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: var(--r-1); background: none; color: inherit; font: inherit; cursor: pointer; transition: color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1); }
.copy-id::after { content: ''; position: absolute; inset: -14px -8px; }
.copy-id svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity var(--dur-1); }
.copy-id:hover { color: var(--fg); background: rgba(244, 243, 238, .07); box-shadow: 0 0 0 5px rgba(244, 243, 238, .07); }
.copy-id:hover svg { opacity: 1; }
.copy-id:focus-visible { outline: none; box-shadow: var(--focus); }
.detail-id .copy-id { color: var(--fg); font-weight: 600; }
.cab-search { position: relative; max-width: 420px; margin-bottom: var(--s-3); }
.cab-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--fg-3); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.cab-search .input { width: 100%; padding-left: 42px; }
.cab-search .input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); cursor: pointer; }
@container cab (max-width: 560px) { .cab-search { max-width: none; } }
.auth-consent { padding: 2px 0; border: 0; background: none; border-radius: 0; }
.auth-consent:has(input:checked) { background: none; }
.auth-consent.is-shake { padding: 10px 12px; margin: -8px -12px; border-radius: var(--r-2); background: color-mix(in srgb, var(--danger) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); }
.auth-consent .check { align-items: center; min-height: 44px; }
.auth-last { margin-left: 2px; padding: 4px 8px; border-radius: var(--r-pill); background: rgba(10, 10, 10, .16); font: 600 var(--f-xs)/1 var(--font); font-style: normal; white-space: nowrap; }
.auth-btn-vk .auth-last, .btn-ghost .auth-last { background: rgba(244, 243, 238, .1); color: var(--fg-2); }
.auth-hint { margin: 2px 0 0; font-size: var(--f-sm); line-height: 1.4; color: var(--fg-3); }
.auth-perks { display: none; list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: var(--bw) solid var(--line); gap: 12px; }
.auth-perks li { display: grid; gap: 2px; font-size: var(--f-sm); line-height: 1.35; color: var(--fg-3); }
.auth-perks b { font: 600 var(--f-sm)/1.2 var(--display); color: var(--fg); }
@media (max-width: 1023px) { .auth-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .auth-perks { grid-template-columns: minmax(0, 1fr); gap: 10px; } .auth-perks li { grid-template-columns: 9.5em minmax(0, 1fr); align-items: baseline; gap: 10px; } }
.tma .app-bar, .tma .sm-nav, .tma .site-footer, .tma .skip-link, .tma .cookie-note, .tma .promo-bar { display: none; }
.tma body { padding: max(8px, env(safe-area-inset-top)) env(safe-area-inset-right) max(12px, env(safe-area-inset-bottom)) env(safe-area-inset-left); overscroll-behavior-y: none; }
.tma .cab-side-foot [data-logout] { display: none; }
.tma-back { margin: 12px 0 0; }
.tma-gate { margin: 24px auto; max-width: 520px; text-align: left; }
.tma-gate .row { flex-wrap: wrap; gap: 8px; margin-top: 16px; }