:root {
  color-scheme: light;
  --a: #F25C05; --a-text: #B03A06; --a-soft: #FFF3EC; --a-soft2: #FFE9DC; --a-now: #FDBA74; --on-a: #FFFFFF;
  --a-glow: rgba(242, 92, 5, .3); --a-glow2: rgba(242, 92, 5, .45);
  --a-0: rgba(242, 92, 5, 0); --a-08: rgba(242, 92, 5, .08); --a-10: rgba(242, 92, 5, .1); --a-18: rgba(242, 92, 5, .18);
  --a-25: rgba(242, 92, 5, .25); --a-28: rgba(242, 92, 5, .28); --a-45: rgba(242, 92, 5, .45); --a-50: rgba(242, 92, 5, .5);
  --on-a-soft: rgba(255, 255, 255, .2); --on-a-soft2: rgba(255, 255, 255, .18);
  --bg: #F9F9FA; --bg-0: rgba(249, 249, 250, 0); --side: #FCFCFC; --card: #FFFFFF;
  --soft: #F4F4F5; --fill: #F4F4F5; --well: #F7F7F8; --row: #F1F1F3; --hover: #F1F1F3; --row-hover: #FAFAFB;
  --tint: rgba(0, 0, 0, .05);
  --line: #F0F0F2; --line2: #ECECEE; --ring: #E4E4E7; --side-line: #EEEEF0; --hair: #F1F1F3; --dash: #DDDDE1;
  --track: #ECECEE; --track2: #D4D4D8;
  --text: #1E1E1E; --h: #2A2A2E; --text2: #3F3F46; --text3: #52525B; --muted: #6B7280; --dim: #71717A; --faint: #9CA3AF; --ph: #5F6368;
  --ink: #141414; --on-ink: #FFFFFF;
  --poster: #141414; --poster-art: #1F1F1F; --on-poster: #FFFFFF; --on-poster2: rgba(255, 255, 255, .66);
  --poster-track: rgba(255, 255, 255, .16); --poster-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --g: #22A559; --g-soft: #E7F6EC; --g-text: #166534; --g-text2: #15803D; --g-55: rgba(34, 165, 89, .55); --g-0: rgba(34, 165, 89, 0);
  --b-soft: #EEF3FE; --b-text: #1E4FB8; --i-soft: #EEF2FF; --i-text: #3730A3;
  --r-soft: #FDECEC; --r-text: #B42318; --y-soft: #FEF3C7; --y-text: #92400E; --star: #F59E0B;
  --p-soft: #F2EEFF; --p-text: #5B3CC4;
  --shadow: 0 0 0 1px #F0F0F2, 0 8px 24px rgba(0, 0, 0, .04);
  --shadow-flat: 0 0 0 1px #F0F0F2;
  --shadow-lift: 0 0 0 1px #ECECEE, 0 18px 40px rgba(0, 0, 0, .09);
  --shadow-sel: 0 0 0 2px #F25C05, 0 6px 16px rgba(0, 0, 0, .06); --shadow-sel2: 0 0 0 2px #F25C05, 0 12px 28px rgba(242, 92, 5, .14);
  --shadow-toast: 0 0 0 1px #ECECEE, 0 16px 36px rgba(0, 0, 0, .16);
  --shadow-knob: 0 1px 3px rgba(0, 0, 0, .2); --shadow-chip: 0 0 0 1px #E4E4E7, 0 8px 18px rgba(0, 0, 0, .08);
  --glass-top: rgba(249, 249, 250, .9); --glass-tab: rgba(255, 255, 255, .94);
  --veil: rgba(20, 20, 20, .45);
  --skel-1: #EFEFF1; --skel-2: #F7F7F8;
  --mine: #141414; --on-mine: #FFFFFF; --on-mine-tint: rgba(255, 255, 255, .12); --on-mine-tint2: rgba(255, 255, 255, .16);
  --grad-ava: linear-gradient(135deg, #F25C05, #8B5CF6); --grad-hero: linear-gradient(140deg, #F25C05, #FB923C);
  --grad-sbp: linear-gradient(135deg, #5B57A2, #D90751);
  --tg: #2AABEE; --tg-glow: rgba(42, 171, 238, .35); --vk: #0077FF; --vk-glow: rgba(0, 119, 255, .3);
  --knob: #FFFFFF; --on-knob: #B03A06;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --display: 'Montserrat', 'Manrope', system-ui, sans-serif;
  --top-h: calc(60px + env(safe-area-inset-top, 0px));
  --tabbar-h: calc(58px + max(env(safe-area-inset-bottom, 0px), 8px));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --a-text: #FF9A5C; --a-soft: rgba(242, 92, 5, .16); --a-soft2: rgba(242, 92, 5, .22);
  --bg: #0E0E10; --bg-0: rgba(14, 14, 16, 0); --side: #121214; --card: #18181B;
  --soft: #232326; --fill: #26262B; --well: #232326; --row: #26262B; --hover: #232326; --row-hover: #232326;
  --tint: rgba(255, 255, 255, .07);
  --line: #2A2A2E; --line2: #2A2A2E; --ring: #2A2A2E; --side-line: #2A2A2E; --hair: #2A2A2E; --dash: #3F3F46;
  --track: #2A2A2E; --track2: #3F3F46;
  --text: #F4F4F5; --h: #F4F4F5; --text2: #D4D4D8; --text3: #D4D4D8; --muted: #A1A1AA; --dim: #A1A1AA; --faint: #A1A1AA; --ph: #A1A1AA;
  --ink: #F4F4F5; --on-ink: #141414;
  --poster: #1F1F23; --poster-art: #2A2A30; --on-poster: #F4F4F5; --on-poster2: #A1A1AA;
  --poster-track: #3F3F46; --poster-shadow: 0 0 0 1px #2A2A2E, 0 8px 24px rgba(0, 0, 0, .35);
  --g-soft: rgba(34, 165, 89, .18); --g-text: #4ADE80; --g-text2: #4ADE80;
  --b-soft: rgba(59, 111, 224, .2); --b-text: #9DB9FF; --i-soft: rgba(59, 111, 224, .2); --i-text: #9DB9FF;
  --r-soft: rgba(239, 68, 68, .18); --r-text: #FCA5A5; --y-soft: rgba(217, 119, 6, .2); --y-text: #FCD34D;
  --p-soft: rgba(124, 92, 224, .22); --p-text: #C4B5FD;
  --shadow: 0 0 0 1px #2A2A2E, 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-flat: 0 0 0 1px #2A2A2E;
  --shadow-lift: 0 0 0 1px #34343A, 0 18px 40px rgba(0, 0, 0, .55);
  --shadow-sel: 0 0 0 2px #F25C05, 0 6px 16px rgba(0, 0, 0, .35); --shadow-sel2: 0 0 0 2px #F25C05, 0 12px 28px rgba(242, 92, 5, .14);
  --shadow-toast: 0 0 0 1px #34343A, 0 18px 40px rgba(0, 0, 0, .55); --shadow-chip: 0 0 0 1px #34343A, 0 8px 18px rgba(0, 0, 0, .35);
  --glass-top: rgba(14, 14, 16, .86); --glass-tab: rgba(24, 24, 27, .9);
  --veil: rgba(0, 0, 0, .6);
  --skel-1: #232326; --skel-2: #2A2A2E;
  --mine: rgba(242, 92, 5, .22); --on-mine: #F4F4F5; --on-mine-tint: rgba(255, 255, 255, .07); --on-mine-tint2: rgba(255, 255, 255, .12);
}



:root[data-brand="volgapkin"] {
  --a: #B23C2C; --a-now: #E9A58F; --on-a: #FFFFFF;
  --a-glow: rgba(178, 60, 44, .3); --a-glow2: rgba(178, 60, 44, .45);
  --a-0: rgba(178, 60, 44, 0); --a-08: rgba(178, 60, 44, .08); --a-10: rgba(178, 60, 44, .1); --a-18: rgba(178, 60, 44, .18);
  --a-25: rgba(178, 60, 44, .25); --a-28: rgba(178, 60, 44, .28); --a-45: rgba(178, 60, 44, .45); --a-50: rgba(178, 60, 44, .5);
  --g: #3E6B2C; --g-55: rgba(62, 107, 44, .55); --g-0: rgba(62, 107, 44, 0);
  --grad-ava: linear-gradient(135deg, #B23C2C, #22301A); --grad-hero: linear-gradient(140deg, #B23C2C, #D0644F);
  --shadow-sel: 0 0 0 2px #B23C2C, 0 6px 16px rgba(0, 0, 0, .06); --shadow-sel2: 0 0 0 2px #B23C2C, 0 12px 28px rgba(178, 60, 44, .14);
  --display: 'Playfair Display', 'PT Serif', Georgia, serif;
}
:root[data-brand="volgapkin"]:not([data-theme="dark"]) {
  --a-text: #8E2A1F; --a-soft: #F8ECE7; --a-soft2: #F2DDD5; --on-knob: #8E2A1F;
  --bg: #F4F0E4; --bg-0: rgba(244, 240, 228, 0); --side: #F8F5EC; --card: #FFFDF7;
  --soft: #EFEADB; --fill: #EFEADB; --well: #F6F2E7; --row: #EDE8D9; --hover: #EDE8D9; --row-hover: #F8F5EC;
  --line: #E7E1D0; --line2: #E2DBC8; --ring: #D9D1BB; --side-line: #E5DFCD; --hair: #EAE4D4; --dash: #D2C9B1;
  --track: #E2DBC8; --track2: #CBC1A6;
  --text: #161311; --h: #161311; --text2: #3A332C; --text3: #4D453C; --muted: #6E6457; --dim: #74695B; --faint: #9A8F7F; --ph: #6E6457;
  --ink: #161311; --on-ink: #FFFDF7;
  --poster: #22301A; --poster-art: #2C3D22; --on-poster: #FFFDF7; --on-poster2: rgba(255, 253, 247, .7);
  --g-soft: #E6EEDD; --g-text: #22301A; --g-text2: #3E6B2C;
  --shadow: 0 0 0 1px #E7E1D0, 0 8px 24px rgba(22, 19, 17, .05);
  --shadow-flat: 0 0 0 1px #E7E1D0;
  --shadow-lift: 0 0 0 1px #E2DBC8, 0 18px 40px rgba(22, 19, 17, .1);
  --shadow-chip: 0 0 0 1px #D9D1BB, 0 8px 18px rgba(22, 19, 17, .08);
  --glass-top: rgba(244, 240, 228, .9); --glass-tab: rgba(255, 253, 247, .94);
  --skel-1: #EAE4D4; --skel-2: #F4F0E4;
  --mine: #22301A; --on-mine: #FFFDF7;
}
:root[data-brand="volgapkin"][data-theme="dark"] {
  --a: #D0644F; --a-text: #F0A08E; --a-soft: rgba(208, 100, 79, .16); --a-soft2: rgba(208, 100, 79, .24);
  --bg: #12100D; --bg-0: rgba(18, 16, 13, 0); --side: #16130F; --card: #1C1915;
  --soft: #26221C; --fill: #29241E; --well: #26221C; --row: #29241E; --hover: #26221C; --row-hover: #26221C;
  --line: #2F2A23; --line2: #2F2A23; --ring: #2F2A23; --side-line: #2F2A23; --hair: #2F2A23; --dash: #4A4237;
  --text: #F4F0E4; --h: #F4F0E4; --text2: #DDD6C5; --text3: #DDD6C5; --muted: #ABA391; --dim: #ABA391; --faint: #ABA391; --ph: #ABA391;
  --ink: #F4F0E4; --on-ink: #161311;
  --poster: #1F2A18; --poster-art: #2A3820;
  --glass-top: rgba(18, 16, 13, .86); --glass-tab: rgba(28, 25, 21, .9);
  --mine: rgba(208, 100, 79, .24);
}
:root[data-brand="volgapkin"] body { font-family: 'PT Serif', Georgia, 'Times New Roman', serif; font-size: 15px; }
:root[data-brand="volgapkin"] .mark, :root[data-brand="volgapkin"] .login-box .big-mark { background: var(--a); color: var(--on-a); border-radius: 50%; font-weight: 900; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
body { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--a-text); text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--ph); opacity: 1; }
h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; color: var(--h); line-height: 1.15; }
h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.sub { font-size: 14px; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: 12px; }
.t2 { color: var(--text2); } .t3 { color: var(--text3); } .a-text { color: var(--a-text); } .g-text { color: var(--g-text); } .r-text { color: var(--r-text); }
.tnum, .cnt { font-variant-numeric: tabular-nums; }



































@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes tick { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reactin { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes coinup { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes chipin { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes stepin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes msgin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes stepnow { 0% { box-shadow: 0 0 0 0 var(--a-50); } 100% { box-shadow: 0 0 0 10px var(--a-0); } }
@keyframes cpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--a-45); } 50% { box-shadow: 0 0 0 7px var(--a-0); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--g-55); } 70% { box-shadow: 0 0 0 7px var(--g-0); } 100% { box-shadow: 0 0 0 0 var(--g-0); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 var(--a-0), 0 10px 24px var(--a-18); } 50% { box-shadow: 0 0 0 6px var(--a-10), 0 14px 30px var(--a-28); } }
@keyframes kbdot { 0%, 100% { box-shadow: 0 0 0 0 var(--a-50); } 50% { box-shadow: 0 0 0 5px var(--a-0); } }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.12) rotate(-4deg); } }
@keyframes kbdrop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { 50% { box-shadow: 0 0 0 4px var(--a-25); } }
@keyframes newrow { 0%, 100% { background-color: var(--a-0); } 50% { background-color: var(--a-08); } }
@keyframes kbspin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bulkin { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes toastin { from { opacity: 0; transform: translateY(-22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sheetout { from { transform: none; } to { transform: translateY(100%); } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes popout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes bulkout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(30px); } }
@keyframes toastout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-22px) scale(.96); } }
@keyframes routein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.rv { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.pop { animation: pop .75s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.tick { animation: tick .45s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.pillon, .unread { animation: reactin .5s var(--spring) backwards; }
.coin { animation: coinup 1.2s var(--spring) .6s backwards; }
.chipc { animation: chipin .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.stepin { animation: stepin .6s var(--ease) .25s backwards; }
.msgin, .frow { animation: msgin .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.fillx { transform-origin: 0 50%; animation: fillx 1.6s var(--ease) .5s both; }
.growy { transform-origin: 50% 0; animation: growy 1.1s var(--ease) both; }
.stepnow { animation: stepnow 2.2s ease-out 1.4s infinite; }
.pulse { animation: cpulse 1.8s ease-in-out infinite; }
.pulse-g { animation: pulse 2.2s ease-out infinite; }
.glow, .newpill { animation: glow 2.8s ease-in-out infinite; }
.newdot { animation: kbdot 1.8s ease-in-out infinite; }
.flame { transform-origin: 50% 100%; animation: flame 1.6s ease-in-out infinite; }
.dropz { animation: kbdrop 1.6s ease-in-out infinite; }
.blink { animation: blink 1.6s ease-in-out 1s 2; }
.newrow { animation: newrow 2.4s ease-in-out 3; }
.spin { animation: kbspin 1s linear infinite; }
.stagger > :nth-child(1) { --i: 0; } .stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; } .stagger > :nth-child(4) { --i: 3; }
.stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; } .stagger > :nth-child(7) { --i: 6; } .stagger > :nth-child(8) { --i: 7; }
.stagger > :nth-child(9) { --i: 8; } .stagger > :nth-child(10) { --i: 9; } .stagger > :nth-child(11) { --i: 10; } .stagger > :nth-child(n+12) { --i: 11; }
.tapbtn { transition: transform .25s var(--spring), background-color .2s ease; }
.tapbtn:active { transform: scale(.95); }
.lift { transition: transform .35s var(--ease), box-shadow .35s ease; }
.iconbtn { transition: transform .3s var(--spring), background-color .2s ease, color .2s ease; }
.iconbtn:active { transform: scale(.92); }
@media (hover: hover) {
  .tapbtn:hover { transform: translateY(-1px); }
  .tapbtn:active { transform: scale(.95); }
  .lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .iconbtn:hover { transform: translateY(-1px); background-color: var(--a-soft2); color: var(--a-text); }
  .iconbtn:active { transform: scale(.92); }
  .orow:hover { background-color: var(--row-hover); }
  .orow:hover .otitle { color: var(--a-text); }
}
.orow { transition: background-color .2s ease; } .orow .otitle { transition: color .2s ease; }
#view.route { animation: routein .45s var(--ease) both; }














.app { min-height: 100%; display: flex; flex-direction: column; }
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h); padding: env(safe-area-inset-top, 0px) 16px 0; display: flex; align-items: center; gap: 10px;
  background: var(--glass-top); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.mark { position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; }
.mark::after { content: ''; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--a); }
.brand { flex-grow: 1; font-family: var(--display); font-size: 18px; font-weight: 800; }
.ava { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--grad-ava); color: var(--on-a); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.icon-btn { position: relative; width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--card); box-shadow: 0 0 0 1px var(--line2); display: flex; align-items: center; justify-content: center; color: var(--text); }
.icon-btn .dot { position: absolute; top: 6px; right: 7px; width: 12px; height: 12px; border: 2px solid var(--card); border-radius: 50%; background: var(--a); }
.page { flex: 1 1 auto; width: 100%; max-width: 560px; margin: 0 auto; padding: 8px 16px calc(22px + var(--tabbar-h)); display: flex; flex-direction: column; gap: 14px; }
:where(.page > *) { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--pi, 0) * 80ms); }
:where(.page > :nth-child(2)) { --pi: 1; } :where(.page > :nth-child(3)) { --pi: 2; } :where(.page > :nth-child(4)) { --pi: 3; } :where(.page > :nth-child(5)) { --pi: 4; }
:where(.page > :nth-child(6)) { --pi: 5; } :where(.page > :nth-child(7)) { --pi: 6; } :where(.page > :nth-child(n+8)) { --pi: 7; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-head > .col { gap: 4px; }
.cols { display: flex; flex-direction: column; gap: 14px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: var(--tabbar-h);
  padding: 9px 6px 0; display: flex; background: var(--glass-tab);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -1px 0 var(--line2);
}
.tabbar a { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--dim); transition: color .2s ease; }
.tabbar a.on { font-weight: 800; color: var(--text); }
.tabbar a::before { content: ''; position: absolute; top: -9px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--a); transform: scaleX(0); transition: transform .35s var(--spring); }
.tabbar a.on::before { transform: none; }
.tabbar svg { transition: transform .3s var(--spring); } .tabbar a:active svg { transform: scale(.86); }
.count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--a); color: var(--on-a); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.count.lg { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font-size: 11px; }
.tabbar .count { position: absolute; top: -4px; left: 50%; margin-left: 6px; }
.side { display: none; }



.who { position: relative; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--a-soft); color: var(--a-text); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.who img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.who.sm { width: 36px; height: 36px; font-size: 12px; } .who.lg { width: 48px; height: 48px; font-size: 15px; }
.who .on-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 2px var(--who-ring, var(--bg)); }
.who .on-dot i { display: block; width: 10px; height: 10px; border-radius: 50%; animation: pulse 2.2s ease-out infinite; }

@media (min-width: 960px) {
  .app { flex-direction: row; }
  .top, .tabbar { display: none; }
  .side { position: sticky; top: 0; height: 100vh; width: 250px; flex-shrink: 0; padding: 24px 16px; border-right: 1px solid var(--side-line); background: var(--side); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
  .side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; color: var(--text); }
  .side-brand .mark { width: 34px; height: 34px; } .side-brand .mark::after { display: none; }
  .side-brand b { font-family: var(--display); font-size: 19px; }
  .side a.nav { display: flex; align-items: center; gap: 12px; height: 42px; flex-shrink: 0; padding: 0 12px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text); transition: background-color .2s ease, color .2s ease; }
  .side a.nav:hover { background: var(--hover); color: var(--ink); }
  .side a.nav.on { background: var(--card); box-shadow: 0 0 0 1px var(--side-line); font-weight: 700; }
  .side a.nav .count { margin-left: auto; height: 20px; min-width: 20px; padding: 0 7px; border-radius: 10px; background: var(--ink); color: var(--on-ink); font-size: 11px; }
  .side-manager { --who-ring: var(--poster); margin-top: auto; flex-shrink: 0; padding: 14px; border-radius: 18px; background: var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); display: flex; flex-direction: column; gap: 10px; }
  .side-manager .col { gap: 2px; } .side-manager b { font-size: 14px; } .side-manager .col span { font-size: 12px; color: var(--on-poster2); }
  .side-manager .btn.a { height: 38px; }
  .main { flex: 1 1 auto; min-width: 0; }
  .page { max-width: 1190px; padding: 32px 40px 48px; gap: 18px; }
  .page.narrow { max-width: 640px; }
  .page-head { min-height: 68px; }
  .page-head > .col { gap: 6px; min-width: 0; }
  .page-head .sub { font-size: 15px; }
  .cols { flex-direction: row; align-items: flex-start; gap: 20px; }
  .cols > * { flex: 1 1 0; min-width: 0; }
  .cols > .col-side { flex: 0 0 408px; }
  .cols.r { gap: 28px; } .cols.r > .col-side { flex-basis: 392px; }
  h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
  h2 { font-size: 17px; font-weight: 700; }
  .only-phone { display: none !important; }
}
@media (max-width: 959px) { .only-desk { display: none !important; } .main { display: flex; flex-direction: column; flex: 1 1 auto; } }

























.card { padding: 16px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.card.flat { border-radius: 20px; box-shadow: var(--shadow-flat); padding: 14px; }
.card.sel { box-shadow: var(--shadow-sel); } .card.sel2 { box-shadow: var(--shadow-sel2); }
.card.dash { box-shadow: none; border: 1.5px dashed var(--dash); }
a.card, button.card { color: inherit; text-align: left; border: 0; width: 100%; transition: transform .35s var(--ease), box-shadow .35s ease; }
a.card:active, button.card:active { transform: scale(.985); }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--a-soft); color: var(--a-text); display: flex; align-items: center; justify-content: center; }
.tile.sm { width: 34px; height: 34px; border-radius: 11px; } .tile.lg { width: 48px; height: 48px; border-radius: 15px; }
.tile.b { background: var(--b-soft); color: var(--b-text); } .tile.i { background: var(--i-soft); color: var(--i-text); } .tile.p { background: var(--p-soft); color: var(--p-text); } .tile.g { background: var(--g-soft); color: var(--g-text); } .tile.y { background: var(--y-soft); color: var(--y-text); } .tile.n { background: var(--soft); color: var(--text2); }
.pill { height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; background: var(--soft); color: var(--text2); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.lg { height: 28px; }
.pill.g { background: var(--g-soft); color: var(--g-text); } .pill.b { background: var(--b-soft); color: var(--b-text); } .pill.o { background: var(--a-soft); color: var(--a-text); } .pill.r { background: var(--r-soft); color: var(--r-text); } .pill.p { background: var(--p-soft); color: var(--p-text); } .pill.y { background: var(--y-soft); color: var(--y-text); }
.newpill { height: 22px; padding: 0 10px; border-radius: 999px; background: var(--a-soft2); color: var(--a-text); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0; }
.newdot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--a); }
.btn { height: 50px; padding: 0 16px; border: 0; border-radius: 13px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: transform .25s var(--spring), opacity .2s ease, box-shadow .3s ease, background-color .2s ease; }
.btn:active { transform: scale(.95); } .btn[disabled] { opacity: .5; pointer-events: none; }
.btn.wide { width: 100%; } .btn.md { height: 46px; } .btn.sm { height: 42px; } .btn.xs { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 11px; }
.btn.a { background: var(--a); color: var(--on-a); box-shadow: 0 6px 16px var(--a-glow); height: 52px; }
.btn.a.md { height: 46px; } .btn.a.sm { height: 42px; } .btn.a.xs { height: 34px; box-shadow: none; }
.btn.soft { background: var(--fill); color: var(--text); } .btn.line { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--ring); }
.btn.tg { background: var(--tg); color: var(--on-a); box-shadow: 0 6px 16px var(--tg-glow); height: 52px; } .btn.vk { background: var(--vk); color: var(--on-a); box-shadow: 0 6px 16px var(--vk-glow); height: 52px; }
.btn.vk b { height: 22px; padding: 0 5px; border-radius: 6px; background: var(--on-a-soft); font-size: 11px; display: inline-flex; align-items: center; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(.95); }
  .btn.a:not(.xs):hover { box-shadow: 0 10px 24px var(--a-glow2); }
}
.link { border: 0; background: none; padding: 0; color: var(--a-text); font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.input, .field input, .field textarea, .field select { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--soft); font-size: 15px; font-weight: 500; color: var(--text); outline: none; transition: box-shadow .2s ease, background-color .2s ease; }
.field textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { background: var(--card); box-shadow: 0 0 0 2px var(--a); }
.input.bad, .field.bad input, .field.bad textarea { background: var(--card); box-shadow: 0 0 0 2px var(--a); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; background: var(--soft); color: var(--text2); transition: transform .3s var(--spring), box-shadow .3s ease, background-color .2s ease, color .2s ease; }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--ink); color: var(--on-ink); } .chip span { font-size: 11px; font-weight: 800; opacity: .75; }
@media (hover: hover) { .chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-chip); } .chip:active { transform: scale(.95); } }
.back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; border: 0; background: none; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.empty { padding: 28px 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty > b { font-family: var(--display); font-size: 17px; font-weight: 800; } .empty > span:not([class]) { font-size: 13px; line-height: 1.45; color: var(--muted); max-width: 320px; }
.sec-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sec-head h2 { flex: 1 1 auto; min-width: 0; }
.sec-head a { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 13px; font-weight: 700; }
.sec-head a svg { display: none; }
.poster { padding: 14px 16px; border-radius: 20px; background: var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); }
.poster .bar, .pay-card .bar { background: var(--poster-track); }

@media (min-width: 960px) {
  .card { padding: 18px 20px; } .card.lg { padding: 22px 24px; } .card.flat { padding: 14px 16px; }
  .sec-head a { color: var(--text); } .sec-head a svg { display: block; }
  .field { gap: 8px; } .field input, .field select { height: 48px; }
}



.steps { display: flex; gap: 4px; }
.steps > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.steps > :nth-child(2) { --n: 1; } .steps > :nth-child(3) { --n: 2; } .steps > :nth-child(4) { --n: 3; } .steps > :nth-child(5) { --n: 4; } .steps > :nth-child(6) { --n: 5; }
.steps i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--track); }
.steps .done i::after, .steps .now i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 3px; background: var(--a); transform-origin: 0 50%; animation: fillx 650ms var(--ease) both; animation-delay: calc(450ms + var(--n, 0) * 170ms); }
.steps .now i::after { background: var(--a-now); }
.steps .now i { animation: stepnow 2.2s ease-out 1.4s infinite; }
.steps span { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.steps .now span { font-weight: 800; color: var(--text); }
@media (min-width: 960px) {
  .steps .done i::after, .steps .now i::after { animation-duration: 1.6s; animation-delay: calc(350ms + var(--n, 0) * 120ms); }
  .steps span { color: var(--faint); } .steps .now span { color: var(--text); }
}

.vsteps { display: flex; flex-direction: column; gap: 3px; }
.vsteps > div { display: flex; gap: 12px; }
.vsteps > :nth-child(2) { --n: 1; } .vsteps > :nth-child(3) { --n: 2; } .vsteps > :nth-child(4) { --n: 3; } .vsteps > :nth-child(5) { --n: 4; } .vsteps > :nth-child(6) { --n: 5; }
.vs-mark { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vs-dot { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--track2); background: var(--card); color: var(--on-a); display: flex; align-items: center; justify-content: center; }
.vsteps .done .vs-dot { border: 0; background: var(--a); animation: tick .45s var(--spring) both; animation-delay: calc(500ms + var(--n, 0) * 150ms); }
.vsteps .now .vs-dot { border: 6px solid var(--a-now); animation: stepnow 2.2s ease-out 1.4s infinite; }
.vs-mark > i { display: flex; width: 2px; flex: 1 1 0; min-height: 10px; border-radius: 1px; background: var(--ring); }
.vsteps .done .vs-mark > i::after { content: ''; flex: 1 1 0; border-radius: 1px; background: var(--a); transform-origin: 50% 0; animation: growy 1.1s var(--ease) both; animation-delay: calc(600ms + var(--n, 0) * 150ms); }
.vsteps > :last-child .vs-mark > i { display: none; }
.vs-text { min-width: 0; padding-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.vsteps > :last-child .vs-text { padding-bottom: 0; }
.vs-text b { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 20px; }
.vsteps .done .vs-text b { font-weight: 600; color: var(--text2); }
.vsteps .now .vs-text b { font-size: 13.5px; font-weight: 800; color: var(--text); }
.vs-text span { font-size: 12px; line-height: 1.4; color: var(--muted); }








.home > * { animation-fill-mode: backwards; }
.home-order .ho-title { font-size: 15px; font-weight: 700; color: inherit; }
.home-order .ho-sub { font-size: 12px; color: var(--muted); }
.home-order .ho-now { font-size: 13px; line-height: 1.4; }
.home-order .ho-new { color: var(--a-text); white-space: nowrap; margin-left: 6px; } .home-order .ho-new .newdot { margin-right: 5px; vertical-align: 1px; }
.home-order .pill.pillon { animation-delay: 1.3s; }
.pay-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); transition: transform .45s var(--ease), box-shadow .45s ease; }
.pay-card .col > span { font-size: 12px; color: var(--on-poster2); } .pay-card .col > .due { font-size: 11px; }
.pay-card b { font-family: var(--display); font-size: 22px; font-weight: 800; } .pay-card .btn { flex-shrink: 0; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo > * { padding: 14px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; gap: 6px; color: inherit; border: 0; text-align: left; }
.duo .num { font-family: var(--display); font-size: 20px; font-weight: 800; }
.duo .friend { background: var(--grad-hero); color: var(--on-a); box-shadow: none; }
.duo .friend .tile { background: var(--on-a-soft); color: var(--on-a); } .duo .friend b { font-size: 15px; line-height: 1.25; } .duo .friend > span:not(.tile) { font-size: 12px; opacity: .9; }
.duo > a.card { gap: 6px; }
.home > a.note.g { align-items: flex-start; } .home > a.note.g svg { flex-shrink: 0; margin-top: 1px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
.hscroll::-webkit-scrollbar { display: none; }
.home > .hscroll, .home > .home-tiles, .home > .home-svcs { animation: none; }
.svc-mini { flex: 0 0 150px; padding: 12px; border: 0; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; gap: 6px; text-align: left; animation: chipin .5s var(--ease) backwards; animation-delay: calc(var(--pi, 0) * 80ms + 40ms + var(--i, 0) * 70ms); transition: transform .3s var(--spring), box-shadow .3s ease; }
.svc-mini .tile { width: 32px; height: 32px; border-radius: 10px; }
.svc-mini b { font-size: 13px; line-height: 1.3; } .svc-mini .price { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--text3); }
.home > .btn.glow { animation: rise .8s var(--ease) backwards, glow 2.8s ease-in-out infinite; animation-delay: calc(var(--pi, 0) * 80ms + 60ms), 0s; }
.home-pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.home-pair.one { grid-template-columns: minmax(0, 1fr); }
.home-new { min-width: 0; padding: 14px; border-radius: 16px; background: var(--well); display: flex; flex-direction: column; gap: 8px; }
.home-new > .row { gap: 8px; } .home-new > .row b { font-size: 14px; } .home-new > .row .newdot { width: 8px; height: 8px; }
.home-new > a { --who-ring: var(--card); min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line2); color: inherit; animation-delay: .7s; transition: background-color .2s ease; }
.home-new > a + a { animation-delay: .9s; }
:root[data-theme="dark"] .home-new > a { --who-ring: var(--fill); background: var(--fill); }
.home-new > a .col { gap: 0; } .home-new > a b { font-size: 13px; } .home-new > a .col > span { font-size: 12px; color: var(--muted); }
.home-new .ext { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--ring); color: var(--b-text); display: flex; align-items: center; justify-content: center; }
.home-new .count { animation-delay: 1.3s; }
.home-pay { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); display: flex; flex-direction: column; gap: 10px; }
.home-pay > .col { gap: 6px; } .home-pay > .col > span { font-size: 12px; color: var(--on-poster2); } .home-pay > .col > .due { font-size: 11px; }
.home-pay b { font-family: var(--display); font-size: 24px; }
.home-pay .bar { background: var(--poster-track); } .home-pay .bar i { animation-delay: .6s; }
.home-pay .btn { height: 40px; flex-shrink: 0; }
.home-pair.one .home-pay { flex-direction: row; align-items: center; gap: 24px; } .home-pair.one .home-pay .btn { padding: 0 28px; }
.home-tiles, .home-svcs { display: flex; gap: 14px; }
.home-tiles > a { flex: 1 1 0; min-width: 0; padding: 18px; border-radius: 22px; background: var(--y-soft); color: var(--y-text); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; gap: 6px; animation: rise .8s var(--ease) backwards; animation-delay: calc(180ms + var(--i, 0) * 80ms); }
.home-tiles > a.o { background: var(--a-soft); color: var(--a-text); } .home-tiles > a.g { background: var(--g-soft); color: var(--g-text); }
.home-tiles svg { display: block; } .home-tiles b { font-family: var(--display); font-size: 22px; } .home-tiles a > span { font-size: 13px; opacity: .85; }
.home-svc { flex: 1 1 0; min-width: 0; padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); color: inherit; display: flex; flex-direction: column; gap: 4px; animation: rise .8s var(--ease) backwards; animation-delay: calc(460ms + var(--i, 0) * 60ms); }
.home-svc > .row { justify-content: space-between; margin-bottom: 6px; color: var(--dim); } .home-svc .tile { width: 40px; height: 40px; }
.home-svc b { font-size: 15px; } .home-svc .price { font-size: 13px; font-weight: 700; color: var(--muted); }
@media (hover: hover) {
  .pay-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .duo .friend.lift:hover { box-shadow: var(--shadow-lift); }
  .svc-mini:hover { transform: translateY(-2px); }
  .home-new > a:hover { background-color: var(--row-hover); }
}

@media (max-width: 959px) {
  .home > .sec-head a { position: relative; }
  .home > .sec-head a::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: 44px; transform: translate(-50%, -50%); }
}
@media (min-width: 960px) {
  .hscroll, .chips { margin: 0; padding: 2px 0; }
  .home-order > .row:first-child { gap: 14px; } .home-order > .row:first-child > .col { gap: 3px; }
  .home-order a.ho-title { display: block; font-family: var(--display); font-size: 20px; }
  .home-order .ho-sub { font-size: 13px; }
  .home > .sec-head { margin-top: 4px; animation-delay: .4s; }
  .home > .empty { padding: 40px 18px; }
  .home > .empty .tile { width: 48px; height: 48px; border-radius: 15px; animation: pop .75s var(--ease) both; }
  .home > .empty .tile svg { width: 22px; height: 22px; }
  .home > .empty > span:not([class]) { max-width: 360px; } .home > .empty .btn { margin-top: 4px; }
}


.bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar.sm { height: 6px; border-radius: 3px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--g); transform-origin: 0 50%; animation: fillx 1.6s var(--ease) .5s both; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--fill); color: inherit; }
.file b { font-size: 13.5px; }
.file .ext { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--ring); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--b-text); }
.file.is-new { background: var(--a-soft); }
.note { padding: 12px 14px; border-radius: 16px; background: var(--b-soft); color: var(--b-text); font-size: 13px; font-weight: 600; line-height: 1.45; }
.note.g { background: var(--g-soft); color: var(--g-text); } .note.o { background: var(--a-soft); color: var(--a-text); }
.note.ic { display: flex; align-items: flex-start; gap: 8px; } .note.ic svg { flex-shrink: 0; margin-top: 1px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .kv span { color: var(--muted); } .kv b.big { font-family: var(--display); font-size: 22px; }


.stars { display: flex; margin-left: -6px; }
.stars button { width: 42px; height: 42px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--track2); transition: transform .3s var(--spring), color .2s ease; }
.stars svg { width: 30px; height: 30px; fill: currentColor; }
.stars button.on { color: var(--star); }
.stars button.on svg { animation: tick .45s var(--spring) both; animation-delay: calc(var(--s, 0) * 70ms); }
.stars button:active { transform: scale(.86); }
.stars.done { margin-left: -3px; gap: 6px; } .stars.done span { display: inline-flex; color: var(--track2); } .stars.done .on { color: var(--star); }

.sendbtn[disabled]::before { content: ''; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--on-a-soft); border-top-color: currentColor; animation: kbspin 1s linear infinite; }
.sendbtn[disabled] svg { display: none; }






.o-list { display: flex; flex-direction: column; gap: 14px; animation: none; }
.o-item { display: flex; flex-direction: column; flex-shrink: 0; border-radius: 20px; animation: msgin .6s var(--ease) both; animation-delay: calc(120ms + var(--oi, 0) * 80ms); }
a.card.o-row { gap: 10px; transition: transform .35s var(--ease), box-shadow .35s ease, background-color .2s ease; }
.o-req { gap: 6px; }
.o-row-top { align-items: flex-start; } .o-row-top .col { gap: 3px; } .o-req .o-row-top .col { gap: 2px; }
.o-row .otitle { font-size: 15px; line-height: 1.3; transition: color .2s ease; }
.o-req b { font-size: 14px; line-height: 1.35; }
.o-row-note { font-size: 12px; line-height: 1.45; color: var(--text3); } .o-req .o-row-note { color: var(--muted); }
.o-new { color: var(--a-text); white-space: nowrap; } .o-new .newdot { margin-right: 5px; vertical-align: 1px; }
.o-row .steps .done i::after, .o-row .steps .now i::after { animation-delay: calc(400ms + var(--oi, 0) * 100ms + var(--n, 0) * 170ms); }
.o-bottom { display: flex; flex-direction: column; animation-delay: 360ms; }


.o-pane, .o-duo { display: contents; }
.o-head { display: flex; flex-direction: column; animation-delay: 60ms; } .o-head .col { gap: 4px; }
h1.o-title { font-size: 24px; }
.o-status { animation-delay: 120ms; } .o-pay { animation-delay: 200ms; } .o-files { animation-delay: 280ms; } .o-review { animation-delay: 360ms; }
.o-chat { display: flex; flex-direction: column; animation-delay: 360ms; }
.o-now { font-size: 13.5px; line-height: 1.4; }
.o-acts .btn.sm { flex: 1 1 0; min-width: 0; padding: 0 10px; font-size: 13px; }
.o-ic { display: flex; }
.o-price { font-family: var(--display); font-size: 18px; font-weight: 800; }
.o-paid { align-items: flex-start; line-height: 1.4; } .o-paid b { white-space: nowrap; } .o-paid b span { color: inherit; }
.o-hint { line-height: 1.45; }
.o-pays { display: flex; flex-direction: column; border-radius: 20px; box-shadow: var(--shadow-flat); overflow: hidden; }
.o-pays > div { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-top: 1px solid var(--hair); } .o-pays > div:first-child { border-top: 0; }
.o-pays b { font-size: 14px; }
.o-add { cursor: pointer; } .o-add.busy { opacity: .5; pointer-events: none; }
.o-flist { display: flex; flex-direction: column; gap: 12px; }
.o-flist .file { transition: background-color .2s ease; animation-delay: calc(420ms + var(--fj, 0) * 80ms); }
.o-flist .file.is-new { animation-delay: calc(1500ms + var(--fj, 0) * 80ms); }
.o-dl { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--ring); display: flex; align-items: center; justify-content: center; color: var(--text); }
.o-rev-top, .o-rev-form { display: flex; flex-direction: column; gap: 12px; }
.o-rev-form .btn { width: 100%; } .o-rev-form textarea { resize: none; }
.o-rev-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.rv-sheet .field textarea { background: var(--card); box-shadow: 0 0 0 1px var(--line2); resize: none; }
.rv-sheet .field textarea:focus { box-shadow: 0 0 0 2px var(--a); }
@media (max-width: 959px) {
  .o-row .pill, .o-req .pill { animation: reactin .5s var(--spring) both; animation-delay: calc(480ms + var(--oi, 0) * 80ms); }
  .o-status .pill { animation: reactin .5s var(--spring) 1.4s both; } .o-status .note { animation: msgin .6s var(--ease) 1.5s both; }
  .o-review .field, .rv-sheet .field, .p-amount .field { font-size: 12px; color: var(--muted); }
}
@media (min-width: 960px) {
  .o-wide { animation: none; }
  .o-wide > .o-list { margin: -4px; padding: 4px 4px 32px; gap: 10px; position: sticky; top: 28px; max-height: calc(100vh - 164px); overflow-y: auto; scrollbar-width: none; }
  .o-wide > .o-list::-webkit-scrollbar { display: none; }
  .o-tabs .chip:not(.on) { background: var(--row); }
  .o-item { animation: rise .8s var(--ease) both; animation-delay: calc(100ms + var(--oi, 0) * 60ms); }
  .card.o-req { box-shadow: none; border: 1.5px dashed var(--dash); } .o-req b { font-size: 15px; line-height: 1.3; } .o-req .o-row-top .col { gap: 3px; } .o-req .pill i { animation: none; }
  .o-row-note { font-size: 12.5px; }
  .o-new { display: inline-flex; align-items: center; gap: 5px; } .o-new .newdot { width: 7px; height: 7px; margin: 0; }
  .o-row .steps .done i::after, .o-row .steps .now i::after { animation-delay: calc(350ms + var(--oi, 0) * 60ms + var(--n, 0) * 80ms); }
  .o-row .steps .now i { animation: none; }
  .o-empty { padding: 48px 18px; } .o-empty > span:not([class]) { max-width: 360px; } .o-empty .btn { margin-top: 4px; }
  .o-pane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .o-duo { display: flex; align-items: flex-start; gap: 14px; } .o-duo > * { flex: 1 1 0; min-width: 0; }
  .o-head { flex-direction: row; align-items: flex-end; gap: 16px; animation-delay: 0ms; } .o-head .small { font-size: 12.5px; }
  h2.o-title { font-size: 24px; line-height: 1.25; letter-spacing: 0; }
  .o-status { animation-delay: 60ms; } .o-pay { animation-delay: 120ms; } .o-files { animation-delay: 180ms; } .o-review { animation-delay: 240ms; }
  .o-now { font-size: 14px; min-height: 28px; }
  .note.ic { align-items: center; } .note.ic svg { margin-top: 0; }
  .o-acts .btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
  .o-price { font-weight: 700; animation: coinup 1.2s var(--spring) .32s both; }
  .o-pay .bar { background: var(--row); } .o-pay .bar i { animation-delay: .42s; }
  .o-paid { font-size: 13px; }
  .o-pay .btn.a { height: 46px; }
  .o-pays { gap: 8px; border-radius: 0; box-shadow: none; overflow: visible; }
  .o-pays > div, .o-pays > div:first-child { gap: 10px; padding: 8px 0 0; border-top: 1px solid var(--hair); }
  .o-pays .tile { width: 32px; height: 32px; border-radius: 10px; animation-delay: calc(720ms + var(--i, 0) * 120ms); }
  .o-pays b { font-size: 13px; } .o-pays .col { gap: 0; }
  .o-files .o-add { height: 32px; border-radius: 10px; font-size: 12.5px; }
  .o-flist { gap: 8px; }
  .o-flist .file, .o-flist .file.is-new { animation-delay: calc(430ms + var(--fi, 0) * 100ms); }
  .o-flist .file b { font-size: 13px; } .o-flist .file .small { color: var(--ph); } .o-flist .file .col { gap: 0; }
  .o-review.done { gap: 8px; }
  .o-rev-top { flex-direction: row; align-items: center; }
  .o-rev-form { flex-direction: row; align-items: flex-end; } .o-rev-form .field { flex: 1 1 auto; }
  .o-rev-form textarea { height: 60px; min-height: 0; padding: 10px 14px; line-height: 1.4; }
  .o-rev-form .btn { width: auto; height: 44px; flex-shrink: 0; }
  .stars { margin-left: 0; gap: 2px; } .stars button { width: 34px; height: 34px; } .stars svg { width: 28px; height: 28px; stroke: none; }
  .stars.done { margin-left: 0; gap: 3px; } .stars.done svg { width: 22px; height: 22px; }
  .rv-sheet h2 { font-size: 20px; }
  .rv-sheet .field textarea { height: 132px; border-radius: 16px; box-shadow: 0 0 0 1px var(--ring); }
  .rv-sheet .field textarea:focus { box-shadow: 0 0 0 2px var(--a); }
  .rv-sheet .btn.a { height: 48px; animation: none; }
}
@media (hover: hover) {
  .o-flist .file:not(.is-new):hover { background-color: var(--row-hover); }
  .stars button:hover { transform: translateY(-2px); } .stars button:active { transform: scale(.86); }
}
@media (hover: hover) and (max-width: 959px) { .o-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } }
@media (hover: hover) and (min-width: 960px) { .o-row:hover { background-color: var(--row-hover); } .o-row:hover .otitle { color: var(--a-text); } .o-tabs .chip:hover { transform: none; box-shadow: none; } }



.o-pane .swap { animation-delay: 0ms; } .o-pane .o-pay.swap, .o-pane .o-files.swap { animation: none; }
.o-pane .swap .pill, .o-pane .swap .note { animation-delay: .3s; }
.o-flist .file.still { animation: none; } .o-flist .file.now { animation-delay: 0ms; }
.o-list.still .o-item, .o-list.still .o-item .pill, .o-list.still .o-item .steps i::after { animation: none; }


.method { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line2); text-align: left; width: 100%; min-width: 0; color: var(--text); transition: box-shadow .25s ease, background-color .2s ease, transform .25s var(--spring); }
.method:active { transform: scale(.985); }
.method.on { box-shadow: 0 0 0 2px var(--a); }
.method b { font-size: 14px; }
.method .badge { width: 46px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.method .badge.sbp { background: var(--grad-sbp); color: var(--on-a); }
.m-tick { display: none; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--a); color: var(--on-a); align-items: center; justify-content: center; }
.method.on .m-tick { display: flex; animation: tick .45s var(--spring) both; }
.switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; border: 0; padding: 0; border-radius: 14px; background: var(--track2); transition: background-color .2s ease, opacity .2s ease; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--knob); box-shadow: var(--shadow-knob); transition: transform .3s var(--spring); }
.switch.on { background: var(--a); } .switch.on::after { transform: translateX(18px); }
.switch[disabled] { opacity: .5; }



.p-methods { display: flex; flex-direction: column; gap: 14px; }
.card.p-bonus { flex-direction: row; align-items: center; gap: 10px; } .p-bonus b { font-size: 14px; }
.p-coin { display: flex; flex-shrink: 0; }
.p-hint { line-height: 1.45; }
.p-sum { display: flex; flex-direction: column; gap: 12px; }
.p-sum .kv { align-items: baseline; } .p-sum .kv b { font-variant-numeric: tabular-nums; } .p-sum .kv b.big { font-weight: 800; } .p-sum .kv b span { color: inherit; }
.p-cash { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--g-text); }
.p-act { display: flex; flex-direction: column; }
.p-order { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 24px; }
.p-dim { font-size: 12px; color: var(--on-poster2); }
.p-order .pill { height: 26px; }
.p-order-title { font-family: var(--display); font-size: 18px; line-height: 1.3; }
.p-order .kv { align-items: baseline; font-size: 13px; } .p-order .kv span { color: var(--on-poster2); } .p-order .kv b, .p-order .kv b span { color: var(--on-poster); }
.p-order-price > span { font-size: 12px; } .p-order-price b { font-family: var(--display); font-size: 20px; }
.p-order-paid > span:first-child { color: var(--on-poster); }
.p-order .bar i { background: var(--a); }
.p-result { padding: 40px 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: msgin .6s var(--ease) both; }
.p-result h1 { font-size: 24px; } .p-result.ok h1 { font-size: 26px; } .p-result.wait h1 { font-size: 22px; }
.p-text { max-width: 320px; font-size: 14px; line-height: 1.5; color: var(--muted); } .p-result.ok .p-text { max-width: none; font-size: 15px; }
.p-btns { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.p-result .link { font-size: 13px; }
.done-mark { width: 84px; height: 84px; flex-shrink: 0; border-radius: 28px; background: var(--g); color: var(--on-a); box-shadow: 0 16px 40px var(--g-55); display: flex; align-items: center; justify-content: center; animation: pop .75s var(--ease) both; }
.done-mark svg { animation: tick .45s var(--spring) .38s both; }
.p-mark { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--r-soft); color: var(--r-text); display: flex; align-items: center; justify-content: center; }
.p-wait { position: relative; width: 60px; height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.p-wait::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 3px solid var(--a-soft2); border-top-color: var(--a); animation: kbspin 1s linear infinite; }
.p-got { height: 30px; padding: 0 10px; border-radius: 999px; background: var(--g-soft); color: var(--g-text); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (min-width: 960px) {
  .p-cols { animation: none; }
  .p-left, .p-side { display: flex; flex-direction: column; gap: 16px; }
  .p-left > * { animation: rise .8s var(--ease) both; animation-delay: 100ms; } .p-left > :nth-child(2) { animation-delay: 180ms; } .p-left > :nth-child(3) { animation-delay: 260ms; }
  .p-side > * { animation: rise .8s var(--ease) both; animation-delay: 140ms; } .p-side > :nth-child(2) { animation-delay: 220ms; }
  .p-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .method { box-shadow: inset 0 0 0 1px var(--ring); } .method.on { background: var(--a-soft); box-shadow: inset 0 0 0 1.5px var(--a); }
  .method .small { line-height: 1.35; } .m-tick { border-radius: 7px; } .m-tick svg { width: 14px; height: 14px; }
  .card.p-bonus { gap: 14px; padding: 16px 20px; border-radius: 22px; background: var(--y-soft); color: var(--y-text); }
  .p-bonus b { font-size: 15px; } .p-bonus .small { font-size: 13px; color: inherit; } .p-bonus .switch:not(.on) { background: var(--faint); }
  .p-amount { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: end; } .p-hint { font-size: 13px; padding-bottom: 6px; }
  .p-sum { gap: 10px; }
  .p-sum .kv.total { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--hair); } .p-sum .kv.total > span { color: var(--text); font-weight: 700; }
  .p-sum .kv b.big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
  .p-cash { margin-top: -2px; font-size: 13px; } .p-cash svg { width: 16px; height: 16px; }
  .p-act { margin-top: 4px; }
  .p-result { padding: 40px 48px; min-height: 420px; justify-content: center; animation: stepin .6s var(--ease) .25s both; }
  .p-result h1 { font-size: 26px; font-weight: 800; } .p-result.ok h1 { font-size: 28px; } .p-result.wait h1 { font-size: 24px; }
  .p-text, .p-result.ok .p-text { max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--text2); }
  .p-btns { flex-direction: row; justify-content: center; gap: 10px; width: auto; margin-top: 4px; }
  .p-btns .btn { width: auto; height: 48px; min-width: 200px; } .p-result.ok .p-btns .btn { min-width: 240px; }
  .p-mark { width: 84px; height: 84px; border-radius: 28px; } .p-mark svg { width: 38px; height: 38px; }
  .p-wait { width: 76px; height: 76px; color: var(--a-text); } .p-wait .tile { background: none; color: inherit; } .p-wait svg { width: 28px; height: 28px; }
  .p-got { height: auto; padding: 10px 14px; border-radius: 14px; background: var(--y-soft); color: var(--y-text); gap: 8px; } .p-got svg { width: 18px; height: 18px; }
  .p-result .link { text-decoration: underline; }
}













.page.new > .cols { animation: none; }
.nrail { display: flex; gap: 4px; }
.nrail > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nrail > :nth-child(2) { --n: 1; } .nrail > :nth-child(3) { --n: 2; }
.nrail i { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--track); }
.nrail .done i::after, .nrail .now i::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 3px; background: var(--a); transform-origin: 0 50%; transition: background-color .4s ease; animation: fillx 1.2s var(--ease) both; animation-delay: calc(460ms + var(--n, 0) * 260ms); }
.nrail .now i::after { background: var(--a-now); }
.nrail .now i { animation: stepnow 2.2s ease-out 1.4s infinite; }
.nrail-cap { display: none; }
.new-step, .new-body { display: flex; flex-direction: column; min-width: 0; }
.new-body { gap: 14px; }
.new-body.first > .nb { animation: rise .8s var(--ease) both; }
.new-body.next > .nb { animation: stepin .6s var(--ease) both; }
.ntiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ntiles > div { display: flex; min-width: 0; }
.ntile { position: relative; flex: 1 1 0; min-width: 0; min-height: 104px; padding: 14px; border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; text-align: left; color: var(--text); transition: transform .25s var(--ease), box-shadow .25s ease, background-color .2s ease; }
.ntile:active { transform: scale(.985); }
.ntile > b { max-width: 100%; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ntile .tile { width: 38px; height: 38px; border-radius: 12px; }
.ntile.on { background: var(--a-soft); box-shadow: var(--shadow-sel2); }
.ntile-tick { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--a); color: var(--on-a); display: none; align-items: center; justify-content: center; }
.ntile.on .ntile-tick { display: flex; }
@media (hover: hover) { .ntile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .ntile.on:hover { box-shadow: var(--shadow-sel2); } .ntile:active { transform: scale(.985); } }
.ngroup { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.nf-three { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.nf-three > :first-child { grid-column: 1 / -1; }
.new-body textarea { height: 96px; min-height: 96px; resize: none; }
.nfiles { display: flex; flex-direction: column; gap: 8px; } .nfiles:empty { display: none; }
.nfile b { font-size: 13px; } .nfile .small { font-weight: 500; color: var(--ph); }
.nfile-x { width: 44px; height: 44px; flex-shrink: 0; padding: 0; border: 0; border-radius: 12px; background: var(--card); color: var(--text2); display: flex; align-items: center; justify-content: center; }
.nf-files { gap: 8px; }
.nf-up { height: 52px; border-radius: 14px; }
.nf-add { height: 44px; align-self: flex-start; cursor: pointer; }
.new-actions { display: flex; gap: 8px; }
.new-actions .btn { height: 52px; flex: 1 1 0; min-width: 0; }
.new-actions .btn.send { flex-grow: 1.4; }
.new-actions .ic { display: inline-flex; }
.nsum-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nsum-line { font-size: 12px; font-weight: 600; color: var(--muted); }
.nsum-topic { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.nsum-alex { font-size: 14px; line-height: 1.5; color: var(--text3); }
.nperks { display: flex; flex-direction: column; }
.nperks > div { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 600; }
.nperks .tile { animation: tick .45s var(--spring) .5s both; }
.nperks > :nth-child(2) .tile { animation-delay: .62s; } .nperks > :nth-child(3) .tile { animation-delay: .74s; }
.npromo { display: flex; align-items: center; gap: 10px; font-weight: 700; animation: pop .75s var(--ease) .9s both; }
.npromo svg { flex-shrink: 0; }
.new-hint { font-size: 12px; color: var(--muted); text-align: center; }
@media (max-width: 959px) {
  .page.new .page-head h1 { font-size: 24px; }
  .nf-up { display: none; }
  .new-actions .btn.glow { animation: none; }
}
@media (min-width: 960px) {
  .nrail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .nrail i { overflow: hidden; }
  .nrail .done i::after, .nrail .now i::after { animation-delay: .5s; }
  .nrail .now i { animation: none; }
  .nrail-cap { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .nrail .done .nrail-cap, .nrail .now .nrail-cap { color: var(--text); } .nrail .now .nrail-cap { font-weight: 800; }
  .nrail-dot { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--row); color: var(--text3); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
  .nrail .done .nrail-dot { background: var(--a); color: var(--on-a); animation: tick .45s var(--spring) both; }
  .nrail .now .nrail-dot { border: 2px solid var(--a); background: var(--card); color: var(--a-text); animation: stepnow 2.2s ease-out 1.4s infinite; }
  .page.new .page-head .sub.stepin { animation: none; }
  .new-step { padding: 24px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); animation: rise .8s var(--ease) 120ms both; }
  .new-body { gap: 16px; animation: stepin .6s var(--ease) .25s both; }
  .new-body.s1 { gap: 20px; }
  .new-body.first > .nb, .new-body.next > .nb { animation: none; }
  .ntiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ntile { min-height: 116px; padding: 16px; border-radius: 18px; }
  .ntile > b { font-size: 15px; }
  .ntile.on, .ntile.on:hover { box-shadow: inset 0 0 0 1.5px var(--a); }
  .ntile-tick { top: 14px; right: 14px; border-radius: 7px; }
  .ngroup { display: contents; }
  .ngroup.nf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .nf-three { grid-template-columns: minmax(0, 1fr) 176px 150px; gap: 12px; }
  .nf-three > :first-child { grid-column: auto; }
  .new-body textarea { height: 120px; min-height: 120px; }
  .nfile { gap: 12px; padding: 8px 10px; background: var(--well); }
  .nfile .ext { width: 36px; height: 36px; border-radius: 10px; background: var(--b-soft); box-shadow: none; }
  .nfile .ext.pdf { background: var(--r-soft); color: var(--r-text); }
  .nfile .small { color: var(--muted); }
  .nfile-x { width: 30px; height: 30px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line2); color: var(--text); }
  .nfile-x svg { width: 14px; height: 14px; }
  .nf-add { height: 38px; padding: 0 14px; border-radius: 12px; font-size: 13px; }
  .nf-files.up .nf-add { display: none; }
  .new-actions { justify-content: flex-end; gap: 10px; margin-top: 4px; }
  .new-actions .btn { height: 48px; flex: 0 0 auto; min-width: 130px; }
  .new-actions .btn.a { min-width: 200px; } .new-actions .btn.send { min-width: 220px; }
  .nsum { padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 16px; }
  .nsum-head { gap: 6px; }
  .nsum-line { font-size: 13px; font-weight: 400; }
  .nsum-topic { font-family: var(--display); font-size: 21px; letter-spacing: -.01em; }
  .nsum-alex { --who-ring: var(--poster); display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); }
  .nsum-alex .who { width: 44px; height: 44px; font-size: 14px; }
  .nsum-alex > span:last-child { opacity: .88; }
  .nperks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .nperks > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 0; border-radius: 16px; line-height: 1.4; animation: pop .75s var(--ease) .35s both; }
  .nperks > :nth-child(2) { animation-delay: .43s; } .nperks > :nth-child(3) { animation-delay: .51s; }
  .nperks > .g { background: var(--g-soft); color: var(--g-text); } .nperks > .i { background: var(--b-soft); color: var(--b-text); } .nperks > .p { background: var(--p-soft); color: var(--p-text); }
  .nperks .tile { width: auto; height: auto; border-radius: 0; background: none; color: inherit; animation: none; }
  .nperks .tile svg { width: 20px; height: 20px; }
  .npromo { gap: 12px; animation-delay: .6s; }
  .new-hint { margin-top: -8px; text-align: right; }
  .nside { display: flex; flex-direction: column; gap: 16px; }
  .nreq { padding: 20px 22px 12px; gap: 10px; }
  .nreq-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.4; }
  .nreq-row > span:first-child { color: var(--muted); }
  .nreq-row > span:last-child { display: block; min-width: 0; }
  .nreq-row b { display: block; font-weight: 700; } .nreq-row i { font-style: normal; color: var(--dim); }
  .nalex { --who-ring: var(--poster); padding: 18px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; }
  .nalex .row { gap: 12px; } .nalex .who { width: 42px; height: 42px; font-size: 14px; }
  .nalex b { font-size: 15px; } .nalex .col span { font-size: 12px; color: var(--on-poster2); }
  .nalex > span { font-size: 13px; line-height: 1.5; opacity: .82; }
}


@media (min-width: 960px) and (max-width: 1239px) {
  .page.new > .cols { flex-direction: column; align-items: stretch; gap: 18px; }
  .page.new > .cols > .new-step, .page.new > .cols > .col-side { flex: 0 0 auto; }
  .nside { flex-direction: row; align-items: flex-start; } .nside > * { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1240px) and (max-width: 1359px) {
  .nf-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nf-three > :first-child { grid-column: 1 / -1; }
}









.chat-wrap { flex: 1 1 auto; display: flex; min-height: 0; height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h)); }
.chat-main { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; justify-content: center; }
.chat { width: 100%; max-width: 560px; min-height: 0; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 10px; min-height: 58px; flex-shrink: 0; padding: 8px 16px 10px; }
.chat-head .who { width: 40px; height: 40px; background: var(--ink); color: var(--on-ink); }
.chat-head .who .on-dot, .chat-head .who .on-dot i { width: 11px; height: 11px; }
.chat-head b { font-size: 15px; }
.chat-head .col span { font-size: 12px; }
.online { color: var(--g-text2); font-weight: 700; }
.msgs-box { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.msgs > * { flex-shrink: 0; }
.msgs > :first-child { margin-top: auto; }
.msgs > .skel { margin-top: 0; } .msgs > .empty { margin: auto 0; }
.msg { max-width: 82%; min-width: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: 0 0 0 1px var(--line2); align-self: flex-start; display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.msg-text { white-space: pre-wrap; }
.msg.mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--on-ink); box-shadow: none; }
.msg time { align-self: flex-end; font-size: 10.5px; opacity: .7; }
.msg .file { margin-top: 4px; padding: 8px; background: var(--soft); transition: transform .25s var(--spring); }
.msg .file:active { transform: scale(.97); }
.msg .file b { font-size: 13px; } .msg .file .small { color: var(--ph); }

.msg.mine .file { background: var(--on-mine-tint); background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.msg.mine .file .ext { background: var(--on-mine-tint2); background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: none; color: inherit; }
.msg.mine .file .small { color: inherit; opacity: .72; }
.msg .dl { display: none; }
.msg-card { align-self: flex-end; max-width: 82%; min-width: 0; padding: 12px 14px; border-radius: 18px; background: var(--a-soft); display: flex; flex-direction: column; gap: 3px; font-size: 13px; overflow-wrap: anywhere; }
.msg-card b { font-size: 14px; }
.msg-card .kind { font-size: 12px; color: var(--ph); }
.msg-card .st { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ph); }
.msg-card .st svg { flex-shrink: 0; }
.msg-card .st.ok { color: var(--g-text); } .msg-card .st.no { color: var(--r-text); }
.day { align-self: center; padding: 3px 10px; border-radius: 999px; background: var(--row); font-size: 11px; font-weight: 700; color: var(--text3); }
.attach { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; padding: 0 16px; background: var(--bg); }
.attach > span { display: inline-flex; align-items: center; gap: 6px; height: 34px; max-width: 100%; min-width: 0; padding: 0 4px 0 10px; border-radius: 10px; background: var(--row); font-size: 12px; font-weight: 600; }
.attach .ic { display: inline-flex; flex-shrink: 0; color: var(--text3); }
.attach button { width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text3); display: flex; align-items: center; justify-content: center; transition: transform .25s var(--spring); }
.attach button:active { transform: scale(.9); }
.composer { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; padding: 10px 16px calc(10px + var(--tabbar-h)); background: var(--bg); }
.composer textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 140px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--ring); font-size: 15px; resize: none; outline: none; line-height: 1.4; transition: box-shadow .2s ease; }
.composer textarea:focus { box-shadow: 0 0 0 2px var(--a); }
.composer .send { width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--a); color: var(--on-a); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px var(--a-glow); transition: transform .4s var(--spring), box-shadow .3s ease; }
.composer .send:active { transform: scale(.86); }
.composer .clip { width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 1px var(--ring); display: flex; align-items: center; justify-content: center; color: var(--text3); cursor: pointer; transition: transform .25s var(--spring); }
.composer .clip:active { transform: scale(.95); }
@media (hover: hover) {
  .composer .send:hover { transform: scale(1.1) rotate(-8deg); box-shadow: 0 10px 24px var(--a-glow2); } .composer .send:active { transform: scale(.86); }
  .composer .clip:hover { transform: translateY(-1px); } .composer .clip:active { transform: scale(.95); }
  .msg .file:hover { transform: translateY(-1px); } .msg .file:active { transform: scale(.97); }
}
.chat-side { display: none; }
@media (min-width: 960px) {
  .chat-wrap { height: 100vh; }
  .chat-main { padding: 24px 40px; }
  .chat { max-width: 760px; }
  .chat-head { gap: 12px; min-height: 63px; padding: 0 2px 14px; border-bottom: 1px solid var(--side-line); }
  .chat-head .who { width: 48px; height: 48px; background: var(--a-soft); color: var(--a-text); font-size: 15px; }
  .chat-head .who .on-dot, .chat-head .who .on-dot i { width: 10px; height: 10px; }
  .chat-head .col { gap: 2px; }
  .chat-head b { font-family: var(--display); font-size: 19px; font-weight: 700; }
  .chat-head .col span { font-size: 13px; } .chat-head .online { font-weight: 600; }
  .msgs-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 22px; background: linear-gradient(var(--bg), var(--bg-0)); pointer-events: none; }
  .msgs { padding: 12px 2px 10px; }
  .msg, .msg-card { max-width: 72%; } .msg-card { min-width: 260px; }
  .msgs > .empty { align-self: center; width: 420px; max-width: 100%; padding: 32px 18px; }
  .msgs > .empty .tile { width: 48px; height: 48px; border-radius: 15px; }
  .msg .file { margin-top: 2px; background: var(--tint); }
  .msg .file .small { color: inherit; opacity: .8; }
  .msg.mine .file { background: var(--on-mine-tint2); background: color-mix(in srgb, currentColor 16%, transparent); }
  .msg .dl { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--card); box-shadow: 0 0 0 1px var(--ring); color: var(--text); display: flex; align-items: center; justify-content: center; }
  .msg.mine .dl { background: var(--on-mine-tint2); background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: none; color: inherit; }
  .attach { padding: 0 2px; } .attach:not(:empty) { padding-bottom: 8px; }
  .attach > span { height: 30px; padding: 0 6px 0 10px; }
  .attach button { width: 22px; height: 22px; border-radius: 7px; }
  .composer { padding: 0 2px; }
}


@media (min-width: 1180px) {
  .chat-side { width: 340px; flex-shrink: 0; padding: 24px 20px; border-left: 1px solid var(--side-line); background: var(--side); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-width: thin; }
  .chat-side > * { flex-shrink: 0; animation: rise .8s var(--ease) .1s both; }
  .chat-side > :nth-child(2) { animation-delay: .16s; } .chat-side > :nth-child(3) { animation-delay: .24s; } .chat-side > :nth-child(n+4) { animation-delay: .32s; }
  .chat-side .sec-head { min-height: 48px; padding: 0 4px; }
  .chat-side .card { padding: 16px; border-radius: 22px; }
  .cs-top { gap: 4px; }
  .cs-title { font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; transition: color .2s ease; }
  .cs-title:hover { color: var(--a-text); }
  .cs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .cs-pay { padding: 16px; border-radius: 22px; display: flex; flex-direction: column; gap: 6px; }
  .cs-pay > span { font-size: 12px; color: var(--on-poster2); } .cs-pay > .cs-tiny { font-size: 11px; }
  .cs-pay > b { font-family: var(--display); font-size: 24px; }
  .cs-pay .btn { margin-top: 6px; }
  .chat-side .cs-files { gap: 8px; } .cs-files > b { font-size: 14px; }
  .cs-file { padding: 8px; transition: background-color .2s ease; }
  .cs-file .ext { width: 36px; height: 36px; }
  .cs-file b { font-size: 13px; } .cs-file .small { color: var(--ph); }
}









.svc-page > .svc-wrap { animation: none; }
.svc-chips > .chipc { display: flex; flex-shrink: 0; }
.svc-wrap { display: flex; align-items: flex-start; }
.svc-wrap > .empty { flex: 1 1 auto; }
.svc-grid { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svc-grid > * { display: flex; min-width: 0; }
.svc-grid > .skel { height: 180px; border-radius: 20px; }
.svc-card { position: relative; flex: 1 1 0; min-width: 0; padding: 14px; border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; color: var(--text); }
.svc-card.on { box-shadow: var(--shadow-sel2); }
.svc-card .tile { width: 38px; height: 38px; border-radius: 12px; }
.svc-card .tile.r { background: var(--r-soft); color: var(--r-text); }
.svc-card > b { font-size: 14px; line-height: 1.3; }
.svc-sum { flex-grow: 1; font-size: 12px; line-height: 1.4; color: var(--muted); }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc-card .price { font-family: var(--display); font-size: 16px; white-space: nowrap; }
.plus { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; }
.svc-hit { position: absolute; top: 12px; right: 12px; height: 20px; padding: 0 8px; background: var(--a-soft); font-size: 11px; font-weight: 800; }
:root[data-theme="dark"] .svc-hit { background: var(--a-soft2); }
.sh-title { font-size: 20px; }
.sh-sub { font-size: 14px; line-height: 1.5; color: var(--muted); }
.sv-head { align-items: flex-start; gap: 12px; }
.sv-cost { font-family: var(--display); font-size: 20px; white-space: nowrap; animation-delay: .35s; }
.sv-term { margin-top: -8px; }
.sv-desc { font-size: 14px; line-height: 1.5; color: var(--text2); }
.sv-note { line-height: 1.5; text-align: center; }
.field textarea.sv-ta { height: 76px; min-height: 76px; resize: none; }

:root[data-theme="dark"] .sheet.svc-sheet { background: var(--card); }
@media (hover: hover) { .svc-card.on:hover { box-shadow: var(--shadow-sel2); } }
@media (max-width: 959px) {
  .svc-chips > .chipc { animation: none; }
  .svc-chips .chip:not(.on) { background: var(--track); }
  :root[data-theme="dark"] .svc-chips .chip:not(.on) { background: var(--soft); }
}
@media (min-width: 960px) {
  .svc-page > .svc-chips { gap: 8px; animation: none; }
  .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .svc-grid.open { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid > .skel { height: 172px; }
  .svc-card { min-height: 172px; padding: 16px; }
  .svc-card .tile { width: 40px; height: 40px; }
  .svc-card > b { font-size: 15px; } .svc-sum { font-size: 13px; } .svc-card .price { font-size: 17px; }
  .svc-hit, :root[data-theme="dark"] .svc-hit { top: 16px; right: 16px; height: 22px; padding: 0 9px; background: var(--a); color: var(--on-a); }
  .svc-pane { position: sticky; top: 24px; width: 384px; flex-shrink: 0; margin-left: 24px; padding: 22px; gap: 14px; }
  .svc-pane .sv-head h2 { font-size: 20px; line-height: 1.25; }
  .sv-x { width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 12px; background: var(--soft); color: var(--text); display: flex; align-items: center; justify-content: center; }
  .sv-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
  .sv-price b { font-family: var(--display); font-size: 26px; letter-spacing: -.02em; white-space: nowrap; }
  .sv-price span { font-size: 13px; color: var(--muted); }
  .svc-pane .sv-desc { line-height: 1.55; }
  .svc-pane .field textarea.sv-ta { height: 72px; min-height: 72px; }
  .svc-pane .btn.a { height: 50px; }
  .selbox { position: relative; display: block; }
  .selbox select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; }
  .selbox > span { position: absolute; right: 14px; top: 15px; display: flex; pointer-events: none; color: var(--muted); }
}

@media (min-width: 960px) and (pointer: coarse) { .selbox > span { display: none; } }











.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stats > div { padding: 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-flat); text-align: center; display: flex; flex-direction: column; gap: 2px; } .stats b { display: block; font-family: var(--display); font-size: 20px; } .stats > div > span { font-size: 12px; color: var(--muted); }
.list { border-radius: 20px; background: var(--card); box-shadow: var(--shadow-flat); overflow: hidden; }
.list > * { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; border-top: 1px solid var(--hair); background: none; width: 100%; text-align: left; color: inherit; transition: background-color .2s ease; }
.list > *:first-child { border-top: 0; } .list .chev { color: var(--dim); flex-shrink: 0; display: flex; }
@media (hover: hover) { .list > a:hover, .list > button:hover { background-color: var(--row-hover); } }
.ini { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--text2); }
.plus-num { font-weight: 800; color: var(--g-text); } .minus-num { font-weight: 800; color: var(--text3); }
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; text-align: center; } .profile-head .ava { width: 72px; height: 72px; font-size: 28px; }
.profile-head h1 { font-size: 22px; }
.pf-page > .list, .pf-page > .stats { animation: none; }
.pf-page > h2 { font-size: 17px; color: var(--h); }
.pf-page > .small, .pf-note { line-height: 1.5; }
.sheet .list .small, .set-rows .small { overflow-wrap: anywhere; }
.radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--track2); color: var(--on-a); display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, box-shadow .2s ease; }
.radio svg { opacity: 0; transform: scale(.4); transition: transform .3s var(--spring), opacity .2s ease; }
[aria-checked="true"] > .radio { background: var(--a); box-shadow: none; } [aria-checked="true"] > .radio svg { opacity: 1; transform: none; }
.lg-card { padding: 14px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-flat); display: flex; flex-direction: column; gap: 10px; }
.lg-card .row { gap: 8px; } .lg-card .input { height: 46px; } .lg-card .small { line-height: 1.5; }
.lg-card > .btn { height: 44px; align-self: flex-start; }
.lg-card .btn.soft { background: var(--track); }
.lg-card .btn.vk { height: 40px; box-shadow: none; }
@media (min-width: 960px) {
  .page > .pf { animation: none; }
  .pf { display: flex; align-items: flex-start; gap: 24px; }
  .pf-side { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
  .pf-side.still .rv, .pf-side.still .frow { animation: none; }
  #view.route:has(.pf-side.still) { animation: none; }
  .pf-main { flex: 1 1 0; min-width: 0; }
  .pf-main > .skel + .skel { margin-top: 16px; }
  .pf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .pf-me { flex-direction: row; align-items: center; gap: 14px; padding: 18px; }
  .pf-me .ava { width: 56px; height: 56px; font-size: 22px; }
  .pf-me .col { gap: 2px; } .pf-me b { font-family: var(--display); font-size: 18px; } .pf-me .col span { font-size: 13px; line-height: 1.4; color: var(--muted); }
  .hub { padding: 8px; gap: 2px; }
  .hub > * { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: none; text-align: left; color: var(--text); transition: background-color .2s ease, box-shadow .2s ease; }
  .hub > .on { background: var(--a-soft); box-shadow: inset 0 0 0 1.5px var(--a); }
  .hub .tile.sm, .pf-main .tile.sm { width: 36px; height: 36px; }
  .hub .tile.n { color: var(--text); }
  .hub .chev { display: flex; flex-shrink: 0; color: var(--muted); }
  .pf-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .pf-set { padding: 22px 24px; gap: 10px; }
  .pf-set.study { gap: 14px; }
  .pf-set.blink { animation-delay: .15s; }
  .pf-set .field input { height: 46px; }
  .pf-set .pair.study { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .pf-set #st-save { margin-top: 2px; }
  .pf-set > .col { gap: 6px; } .pf-set > .col .small { font-size: 13px; line-height: 1.45; }
  .set-rows > * { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--hair); background: none; text-align: left; color: inherit; }
  .pf-set .lg-card { border-radius: 16px; background: var(--well); box-shadow: none; gap: 8px; }
  .pf-set .lg-card .input { height: 44px; background: var(--card); box-shadow: inset 0 0 0 1px var(--ring); }
  .pf-set .lg-card .input:focus { box-shadow: 0 0 0 2px var(--a); }
  .pf-set .lg-card .btn:not(.xs) { height: 44px; font-size: 13px; }
  .pf-set .lg-card .btn.soft { background: var(--card); box-shadow: inset 0 0 0 1px var(--ring); }
  .pf-set .lg-card .btn.vk { height: 34px; } .pf-set .lg-card .btn.vk b { height: auto; padding: 0; background: none; font-size: inherit; }
}
@media (min-width: 960px) and (hover: hover) { .hub > :hover { background-color: var(--row-hover); } .hub > .on:hover { background-color: var(--a-soft); } }








.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.login-box { width: 100%; max-width: 358px; display: flex; flex-direction: column; gap: 22px; }
.login-box .rv { animation-fill-mode: backwards; }
.login-box .big-mark { width: 56px; height: 56px; border-radius: 18px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 26px; font-weight: 800; }
.login-box h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--h); }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 4px 0; } .or::before, .or::after { content: ''; flex-grow: 1; height: 1px; background: var(--line2); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.l-field, .tg-btn { display: flex; flex-direction: column; }
.err { color: var(--r-text); font-size: 13px; font-weight: 600; min-height: 18px; text-align: center; }
.l-msg { font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--r-text); animation: msgin .6s var(--ease) both; }
.l-msg.ok { padding: 10px 12px; border-radius: 14px; background: var(--g-soft); color: var(--g-text); line-height: 1.45; overflow-wrap: anywhere; }
.l-hint { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; } .l-hint .link { font-size: 12px; }
.l-legal { font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; } .l-legal a { font-weight: 600; }
.login .btn.dim { opacity: .45; }
.login .btn.busy { pointer-events: none; } .login .btn.busy[disabled] { opacity: 1; }
.l-spin { position: relative; display: none; width: 16px; height: 16px; flex-shrink: 0; }
.l-spin::before, .l-spin::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.l-spin::before { opacity: .35; } .l-spin::after { border-color: transparent; border-top-color: currentColor; }
.btn.busy > .l-spin { display: block; } .btn.busy > svg, .btn.busy > b { display: none; }
.tg-slot { display: flex; justify-content: center; min-height: 40px; }
.tg-btn { position: relative; cursor: pointer; }
.tg-hit { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: 13px; opacity: 0; }
.tg-hit iframe { display: block; }
.tg-btn.plain > .btn { display: none; }
.tg-btn.plain > .tg-hit { position: static; overflow: visible; border-radius: 0; opacity: 1; display: flex; justify-content: center; min-height: 40px; }
@media (hover: hover) { .tg-btn.ready:hover > .btn { transform: translateY(-1px); } }









.bal { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 24px; background: var(--y-soft); color: var(--y-text); }
.bal-ico { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: var(--card); display: flex; align-items: center; justify-content: center; }
.bal .col { gap: 2px; } .bal .col > span { font-size: 13px; line-height: 1.4; }
.bal-num { font-family: var(--display); font-size: 34px; line-height: 1.05; letter-spacing: -.02em; }
.amt { font-family: var(--display); font-size: 16px; white-space: nowrap; }
.ref-hero { position: relative; overflow: hidden; padding: 20px; border-radius: 24px; background: linear-gradient(140deg, transparent, var(--poster-track)), var(--poster); color: var(--on-poster); box-shadow: var(--poster-shadow); display: flex; flex-direction: column; gap: 12px; transition: transform .45s var(--ease), box-shadow .45s ease; }
.ref-art { position: absolute; right: -14px; top: -10px; display: flex; opacity: .07; pointer-events: none; }
.ref-lead { position: relative; margin: 0; font-size: 17px; line-height: 1.35; }
.ref-lead > span { opacity: .82; } .ref-lead b { font-family: var(--display); } .ref-lead b.warm { color: var(--a-now); }
.code { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--on-mine-tint); }
.code b { flex-grow: 1; font-family: var(--display); font-size: 20px; letter-spacing: .08em; }
.code .btn.sm { height: 40px; }
.ref-hero .ref-copy { position: relative; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--on-poster); }
.promo { gap: 10px; } .promo .row { gap: 8px; } .promo .input, .promo .btn { height: 44px; } .promo .small { line-height: 1.5; }
@media (min-width: 960px) {
  .pf-grid { display: grid; gap: 16px; align-items: start; }
  .pf-grid.bonus { grid-template-columns: 330px minmax(0, 1fr); } .pf-grid.ref { grid-template-columns: 400px minmax(0, 1fr); } .pf-grid.pay { grid-template-columns: minmax(0, 1fr) 300px; }
  .pf-card { padding: 18px 14px 10px; gap: 6px; } .pf-card > h2 { padding: 0 8px; } .pf-card.bare { padding: 10px 14px; }
  .pf-card .empty { padding: 20px 12px; background: none; box-shadow: none; }
  .rows > * { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; color: inherit; transition: background-color .2s ease; }
  .rows .chev { display: flex; flex-shrink: 0; color: var(--muted); }
  .rows.how > * { font-weight: 600; } .rows.how b { font-family: var(--display); font-size: 15px; }
  .rows .pay-sum { font-family: var(--display); font-size: 16px; }
  .amt, .famt { font-family: var(--display); font-size: 15px; white-space: nowrap; }
  .minus-num { color: var(--r-text); }
  .pf-main .ini { width: 38px; height: 38px; font-size: 14px; color: var(--text); }
  .pf-note { padding: 0 4px; line-height: 1.45; }
  .bal { flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; box-shadow: var(--shadow-flat); }
  .bal-ico { width: auto; height: auto; border-radius: 0; background: none; }
  .bal .col { gap: 8px; } .bal .col > span { font-size: 14px; line-height: 1.45; }
  .bal-num { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
  .pf-main .stats > div { padding: 14px 12px; gap: 0; } .pf-main .stats b { font-size: 24px; }
  .ref-hero { padding: 22px; gap: 14px; }
  .ref-lead { font-size: 16px; line-height: 1.5; } .ref-lead > span { opacity: .8; } .ref-lead b { font-family: inherit; }
  .code { gap: 10px; padding: 10px 10px 10px 16px; }
  .code b { font-size: 22px; letter-spacing: .06em; }
  .code .btn { padding: 0 14px; gap: 6px; border-radius: 12px; background: var(--knob); color: var(--poster); font-size: 13px; }
  .ref-link { position: relative; display: flex; align-items: center; gap: 10px; }
  .ref-link > span { flex: 1 1 auto; min-width: 0; font-size: 13px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ref-link .ref-copy { align-self: center; height: 36px; min-height: 0; flex-shrink: 0; padding: 0 12px; border-radius: 11px; background: var(--on-mine-tint2); font-size: 13px; white-space: nowrap; }
  .promo { padding: 22px 24px; } .promo > b { font-size: 15px; } .promo .btn { font-size: 13px; }
  .promo .input { box-shadow: inset 0 0 0 1px var(--ring); } .promo .input:focus { box-shadow: 0 0 0 2px var(--a); }
  .pay-help { --who-ring: var(--poster); padding: 18px; border-radius: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .45s var(--ease), box-shadow .45s ease; }
  .pay-help .row { gap: 12px; } .pay-help .who { width: 42px; height: 42px; font-size: 14px; }
  .pay-help .col { gap: 2px; } .pay-help .col b { font-size: 15px; } .pay-help .col span { font-size: 12px; color: var(--on-poster2); }
  .pay-help > span { font-size: 13px; line-height: 1.5; opacity: .82; }
  .pay-help .btn.a { height: 40px; }
}

@media (min-width: 960px) and (hover: hover) {
  .rows > a:hover, .rows > .frow:hover { background-color: var(--row-hover); }
  .ref-hero:hover, .pay-help:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-lift); }
}


.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
a.svc-mini, .list > a, a.note, a.file { color: inherit; }
a.note.g { color: var(--g-text); display: flex; align-items: center; gap: 8px; }









html.sheet-open { overflow: hidden; scrollbar-gutter: stable; }
.veil { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: var(--veil); display: flex; align-items: flex-end; justify-content: center; animation: fadein .5s ease both; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--bg); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 14px; outline: none; animation: sheetin .7s var(--ease) both; }
.sheet::before { content: ''; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--track2); flex-shrink: 0; }
.sheet h2 { color: var(--h); }
.sheet-x { position: absolute; top: 14px; right: 14px; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 11px; background: var(--fill); color: var(--text3); display: none; align-items: center; justify-content: center; transition: transform .3s var(--spring), background-color .2s ease, color .2s ease; }
.sheet-x:active { transform: scale(.92); }
.veil.closing { pointer-events: none; animation: fadeout .3s ease both; }
.veil.closing .sheet { animation: sheetout .32s ease-in both; }
@media (min-width: 960px) {
  .veil { align-items: center; padding: 24px; }
  .sheet { max-width: 480px; max-height: calc(100vh - 48px); padding: 24px; border-radius: 28px; animation: pop .45s var(--ease) both; }
  .sheet.wide { max-width: 640px; }
  .sheet::before { display: none; }
  .sheet-x { display: flex; }
  .sheet > :first-child { padding-right: 44px; }
  .veil.closing .sheet { animation: popout .25s ease-in both; }
}
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(14px + var(--tabbar-h)); z-index: 70; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--card); color: var(--text); box-shadow: var(--shadow-toast); display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; line-height: 1.35; cursor: pointer; animation: bulkin .45s var(--ease) both; }
.toast-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: var(--g-soft); color: var(--g-text); display: flex; align-items: center; justify-content: center; }
.toast.bad .toast-ico { background: var(--r-soft); color: var(--r-text); } .toast.info .toast-ico { background: var(--b-soft); color: var(--b-text); }
.toast-text { min-width: 0; overflow-wrap: anywhere; }
.toast.out { pointer-events: none; animation: bulkout .3s ease-in both; }
@media (min-width: 960px) {
  .toast { left: auto; right: 24px; top: 20px; bottom: auto; margin: 0; max-width: 380px; animation: toastin .38s var(--spring) both; }
  .toast.out { animation: toastout .25s ease-in both; }
}
@media (max-width: 959px) { .login ~ .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }









.skel { height: 96px; flex-shrink: 0; border-radius: 24px; background: linear-gradient(90deg, var(--skel-1) 0%, var(--skel-2) 50%, var(--skel-1) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel.sm { height: 56px; border-radius: 18px; }
.skel.line { height: 12px; width: 60%; border-radius: 6px; } .skel.title { height: 28px; width: 70%; border-radius: 10px; }
.skel.dot { width: 40px; height: 40px; border-radius: 50%; }
.skel.bubble { height: 44px; width: 62%; border-radius: 18px 18px 18px 6px; align-self: flex-start; } .skel.bubble.r { width: 48%; border-radius: 18px 18px 6px 18px; align-self: flex-end; }
.skel.tall { height: 150px; }
.skel-row { display: flex; align-items: center; gap: 10px; } .skel-row > .col { flex: 1 1 auto; gap: 8px; }
.skel-chat { display: flex; flex-direction: column; gap: 8px; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}









@media (max-width: 959px) {
  .input, .field input, .field textarea, .field select, .composer textarea { font-size: 16px; }
}



.pair, .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pair > *, .duo > *, .stats > * { min-width: 0; }
.pair input, .pair select { min-width: 0; }


.code b { min-width: 0; overflow-wrap: anywhere; }
.code .btn { flex-shrink: 0; }
@media (max-width: 380px) { .code b { font-size: 19px; letter-spacing: .05em; } }



@media (max-width: 959px) {
  .chip { height: 40px; padding: 0 14px; }
  .btn.xs { height: 40px; }
  .back { min-height: 40px; padding: 0 6px 0 0; }
  .link, .row > a[href="#/services"], .switch, .stars button, .attach button { position: relative; }
  .link::before, .row > a[href="#/services"]::before, .switch::before, .stars button::before, .attach button::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
}






@media (max-width: 860px), (pointer: coarse) {
  select:not([multiple]):not([size]) {
    -webkit-appearance: none; appearance: none;
    padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 38px !important;
    line-height: normal; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px 16px !important;
  }
  :where(select:not([multiple]):not([size])) { min-height: 44px; }
  input[type="date"], input[type="time"] {
    -webkit-appearance: none; appearance: none;
    min-width: 0; max-width: 100%; text-align: left; line-height: normal;
  }
  :where(input[type="date"], input[type="time"]) { min-height: 44px; }
  input::-webkit-date-and-time-value { text-align: left; margin: 0; }
}