/* Lume: токены, каркас (ПК: рельс + контент + правая колонка; мобильная: одна колонка + нижняя навигация), кнопки, формы. */
:root {
  --bg: #f2f1fb; --ink: #14132b; --ink-2: #55547a; --ink-3: #7a799b;
  --line: rgba(20, 19, 43, .09); --glass: rgba(255, 255, 255, .74); --glass-2: rgba(255, 255, 255, .92);
  --accent: #5b3df5; --accent-2: #14c7b0; --accent-ink: #4326d4;
  --pos: #0a7d5e; --neg: #c42853; --warn: #b4521b;
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 36px -18px rgba(58, 40, 160, .28);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-d: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --nav-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; font-family: var(--font); font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--bg);
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility;
}
body::before { /* мягкие градиентные пятна */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 420px at 8% 4%, rgba(125, 92, 255, .26), transparent 70%),
    radial-gradient(560px 460px at 96% 12%, rgba(20, 199, 176, .2), transparent 70%),
    radial-gradient(620px 520px at 70% 100%, rgba(255, 150, 110, .18), transparent 70%),
    radial-gradient(480px 380px at 0% 96%, rgba(70, 150, 255, .16), transparent 70%);
}
body.no-scroll { overflow: hidden; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input { font: inherit; color: inherit; }
.ico { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 12px; }
.skip:focus { top: 12px; }
.muted { color: var(--ink-2); font-size: 13.5px; }

/* ---------- Каркас ---------- */
.app { display: block; min-height: 100dvh; }
.rail, .aside { display: none; }
.main { padding: 14px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); max-width: 780px; margin: 0 auto; outline: none; }
.main.enter > * { animation: rise .42s cubic-bezier(.2, .8, .2, 1) both; }
.main.enter > *:nth-child(2) { animation-delay: .05s; }
.main.enter > *:nth-child(3) { animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body.is-home .aside { display: block; max-width: 780px; margin: 0 auto; padding: 0 16px calc(var(--nav-h) + 40px); }
body.is-home .main { padding-bottom: 20px; }
.aside > .panel { margin-bottom: 14px; }

/* Нижняя навигация (мобильная и планшет) */
.bnav {
  position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto;
  height: var(--nav-h); display: grid; grid-template-columns: 1fr 1fr 1.1fr 1fr 1fr; align-items: center; padding: 0 6px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 30px; box-shadow: 0 18px 40px -14px rgba(40, 24, 140, .38);
}
.bnav a, .bnav-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); border-radius: 18px; }
.bnav a.on { color: var(--accent-ink); }
.bnav a.on .ico { transform: translateY(-1px) scale(1.08); }
.bnav .ico { transition: transform .2s; }
.bnav-main { color: var(--ink); }
.bnav-main i { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #5b3df5, #8f6bff 55%, #14c7b0); box-shadow: 0 12px 24px -8px rgba(91, 61, 245, .7), 0 0 0 5px var(--bg); transition: transform .2s; }
.bnav-main:active i { transform: scale(.94); }
.bnav-main span { margin-top: -2px; }

/* Верхняя панель */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 48px; }
.tb-logo { display: block; flex: none; }
.tb-title { flex: 1; min-width: 0; }
.tb-title h1 { font-family: var(--font-d); font-weight: 600; font-size: 19px; letter-spacing: -.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-title p { color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.bal-pill { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 22px; background: var(--glass-2); border: 1px solid var(--line); font-weight: 800; }
.bal-pill .ico { color: var(--accent); width: 20px; height: 20px; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--line); transition: background .2s, transform .15s; }
.icon-btn:hover { background: #fff; }
.icon-btn:active { transform: scale(.94); }
.icon-btn.soft { background: rgba(91, 61, 245, .08); border-color: transparent; color: var(--accent-ink); }
.dot { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5316b; color: #fff; font: 800 11px/20px var(--font); text-align: center; font-style: normal; box-shadow: 0 0 0 3px var(--bg); }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #5b3df5, #14c7b0); }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 16px; font-weight: 800; font-size: 15px; transition: transform .15s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; }
.btn.wide { width: 100%; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 14px; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #5b3df5, #7a56ff); box-shadow: 0 12px 24px -12px rgba(91, 61, 245, .8); }
.btn-primary:hover { box-shadow: 0 16px 28px -12px rgba(91, 61, 245, .9); }
.btn-soft { background: rgba(255, 255, 255, .9); border: 1px solid var(--line); color: var(--ink); }
.btn-soft:hover { background: #fff; }
.btn-ghost { color: var(--neg); min-height: 48px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 14px; background: rgba(91, 61, 245, .08); color: var(--accent-ink); font-weight: 700; font-size: 14px; transition: background .2s; }
.chip-btn:hover { background: rgba(91, 61, 245, .16); }
.chip-btn .ico { width: 18px; height: 18px; }
.link-btn { min-height: 44px; padding: 0 6px; color: var(--accent-ink); font-weight: 700; font-size: 14px; }

/* Сегментированный переключатель */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 18px; background: rgba(20, 19, 43, .06); max-width: 100%; }
.seg button { min-height: 44px; padding: 0 16px; border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: #fff; color: var(--accent-ink); box-shadow: 0 4px 12px -4px rgba(40, 24, 140, .3); }

/* Формы */
.field { margin: 16px 0 6px; }
.field label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 1.5px solid var(--line); background: rgba(255, 255, 255, .9); font-weight: 600; font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--ink-3); font-weight: 500; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91, 61, 245, .16); }
.input.big { min-height: 62px; font-family: var(--font-d); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.field-err { min-height: 20px; margin-top: 8px; color: var(--neg); font-weight: 700; font-size: 13.5px; }
.search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; flex: 1; min-width: 0; border-radius: 18px; background: var(--glass-2); border: 1.5px solid var(--line); }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91, 61, 245, .14); }
.search .ico { color: var(--ink-3); }
.search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; outline: none; font-size: 16px; font-weight: 600; }

/* ---------- ПК: планшет-ландшафт и выше ---------- */
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: 88px minmax(0, 1fr) 320px; }
  .rail { display: flex; flex-direction: column; align-items: center; gap: 18px; position: sticky; top: 0; height: 100dvh; padding: 22px 12px; }
  .aside, body.is-home .aside { display: block; position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto; margin: 0; max-width: none; padding: 28px 24px 28px 0; scrollbar-width: thin; }
  .main, body.is-home .main { max-width: none; width: 100%; margin: 0; padding: 28px 32px 48px; }
  .bnav { display: none; }
  .tb-logo { display: none; }
  .bal-pill { display: inline-flex; }
  .tb-title h1 { font-size: 24px; }
  .rail-logo { display: flex; align-items: center; gap: 10px; }
  .rail-logo > span:not(.mark), .rail-nav span, .rail-bal, .rail-user .nm { display: none; }
  .rail-nav { display: flex; flex-direction: column; gap: 6px; width: 100%; }
  .rail-nav a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; border-radius: 16px; font-weight: 700; color: var(--ink-2); transition: background .2s, color .2s; }
  .rail-nav a:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
  .rail-nav a.on { background: #fff; color: var(--accent-ink); box-shadow: 0 8px 20px -10px rgba(40, 24, 140, .4); }
  .rail-foot { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; }
  .rail-user { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; border-radius: 16px; font-weight: 800; font-size: 13px; }
}
@media (min-width: 1360px) {
  .app { grid-template-columns: 248px minmax(0, 1fr) 340px; }
  .rail { align-items: stretch; padding: 24px 18px; }
  .rail-logo > span:not(.mark) { display: inline; font-family: var(--font-d); font-weight: 600; font-size: 22px; letter-spacing: -.03em; }
  .rail-nav a { justify-content: flex-start; padding: 0 16px; }
  .rail-nav span { display: inline; }
  .rail-bal { display: block; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(91, 61, 245, .1), rgba(20, 199, 176, .14)); }
  .rail-bal small { display: block; color: var(--ink-2); font-weight: 700; font-size: 12.5px; }
  .rail-bal b { font-family: var(--font-d); font-size: 20px; letter-spacing: -.02em; }
  .rail-user { justify-content: flex-start; padding: 0 6px; gap: 12px; text-align: left; }
  .rail-user .nm { display: inline; }
}
.rail-user { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}