/* ============ Шрифты: свои файлы на сервере (быстро в России, работают без интернета) ============ */
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/static/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url(/static/fonts/unbounded-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/static/fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/static/fonts/onest-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ «Аврора»: футуристичное стекло на глубоком фоне с северным сиянием ============ */
:root[data-skin="aurora"] {
  --serif: "Unbounded", "Onest", system-ui, sans-serif;
  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg: #F3F4FB; --bg-2: rgba(108, 92, 255, .08); --card: rgba(255, 255, 255, .72);
  --ink: #12131C; --ink-2: #5B5F75; --ink-3: #9599AE; --line: rgba(18, 19, 40, .08);
  --coral: #6C5CFF; --coral-soft: rgba(108, 92, 255, .12);
  --sage: #10B9A6; --sage-soft: rgba(16, 185, 166, .12);
  --sky: #2E9BFF; --sky-soft: rgba(46, 155, 255, .12);
  --honey: #F5A524; --honey-soft: rgba(245, 165, 36, .14);
  --plum: #D946EF; --plum-soft: rgba(217, 70, 239, .12);
  --grad: linear-gradient(120deg, #6C5CFF 0%, #2E9BFF 50%, #10D3C0 100%);
  --grad-warm: linear-gradient(120deg, #FF6FB5 0%, #A26BFF 55%, #5B8CFF 100%);
  --glow: 0 10px 40px -12px rgba(108, 92, 255, .55);
  --shadow: 0 1px 1px rgba(20, 20, 60, .04), 0 12px 32px -14px rgba(40, 30, 120, .22);
  --shadow-lg: 0 2px 4px rgba(20, 20, 60, .05), 0 30px 60px -20px rgba(40, 30, 120, .35);
  --r: 26px;
}
:root[data-skin="aurora"][data-theme="dark"] {
  --bg: #06070D; --bg-2: rgba(255, 255, 255, .06); --card: rgba(255, 255, 255, .055);
  --ink: #F2F3FA; --ink-2: #A6AAC2; --ink-3: #6E7290; --line: rgba(255, 255, 255, .09);
  --coral: #8B7BFF; --coral-soft: rgba(139, 123, 255, .16);
  --sage-soft: rgba(16, 211, 192, .14); --sky-soft: rgba(46, 155, 255, .16);
  --honey-soft: rgba(245, 165, 36, .16); --plum-soft: rgba(217, 70, 239, .16);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 40px -20px rgba(0, 0, 0, .8);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 70px -20px rgba(0, 0, 0, .9);
  --glow: 0 0 0 1px rgba(139, 123, 255, .35), 0 12px 50px -10px rgba(108, 92, 255, .7);
}
/* северное сияние на фоне */
:root[data-skin="aurora"] body { background: var(--bg); }
:root[data-skin="aurora"] body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55;
  background:
    radial-gradient(40vmax 30vmax at 15% 10%, rgba(108, 92, 255, .55), transparent 60%),
    radial-gradient(35vmax 28vmax at 85% 15%, rgba(16, 211, 192, .45), transparent 60%),
    radial-gradient(40vmax 30vmax at 70% 90%, rgba(255, 111, 181, .35), transparent 60%);
  animation: aurora 28s ease-in-out infinite alternate;
}
:root[data-skin="aurora"][data-theme="dark"] body::before { opacity: .45; }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 100% { transform: translate3d(-4vmax, 3vmax, 0) rotate(8deg); } }
:root[data-skin="aurora"] h1, :root[data-skin="aurora"] h2, :root[data-skin="aurora"] h3 { font-weight: 600; letter-spacing: -.02em; }
:root[data-skin="aurora"] .topbar h1, :root[data-skin="aurora"] .mtop h1 { font-size: 1.7rem; }
:root[data-skin="aurora"] .hello h1 { font-size: 2.2rem; font-weight: 700; }
:root[data-skin="aurora"] .hello h1 .grad, :root[data-skin="aurora"] .gradtext {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* стекло */
:root[data-skin="aurora"] .card, :root[data-skin="aurora"] .sec-card, :root[data-skin="aurora"] .person-card,
:root[data-skin="aurora"] .feed-item, :root[data-skin="aurora"] .more-grid a, :root[data-skin="aurora"] .bubble.bot,
:root[data-skin="aurora"] .ask-box, :root[data-skin="aurora"] .composer, :root[data-skin="aurora"] .search,
:root[data-skin="aurora"] .sheet, :root[data-skin="aurora"] .ihint {
  background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
}
:root[data-skin="aurora"] .sheet { background: color-mix(in srgb, var(--bg) 82%, transparent); }
:root[data-skin="aurora"] .side { background: transparent; border-right: 1px solid var(--line); }
:root[data-skin="aurora"] .nav-item.on { background: var(--card); box-shadow: var(--shadow); color: var(--ink); }
:root[data-skin="aurora"] .nav-item.on .ni { filter: drop-shadow(0 0 8px rgba(108, 92, 255, .6)); }
:root[data-skin="aurora"] .brand-mark, :root[data-skin="aurora"] .tab.center .ti, :root[data-skin="aurora"] .btn.coral,
:root[data-skin="aurora"] .cbtn.send, :root[data-skin="aurora"] .when.today, :root[data-skin="aurora"] .day.today {
  background: var(--grad); box-shadow: var(--glow); color: #fff; }
:root[data-skin="aurora"] .bubble.me { background: var(--grad); color: #fff; box-shadow: var(--glow); }
:root[data-skin="aurora"] .btn { background: var(--ink); color: var(--bg); }
:root[data-skin="aurora"] .btn.ghost { background: var(--bg-2); color: var(--ink); }
:root[data-skin="aurora"] a, :root[data-skin="aurora"] .card h3 .more { color: var(--coral); }
:root[data-skin="aurora"] .tabbar { background: var(--card); background: color-mix(in srgb, var(--bg) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
:root[data-skin="aurora"] .tab.on { background: var(--bg-2); }
:root[data-skin="aurora"] .input { background: var(--bg-2); border-color: var(--line); }
:root[data-skin="aurora"] .input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-soft); }
/* герой: голографическая карточка */
:root[data-skin="aurora"] .hero, :root[data-skin="aurora"] .hero.boy {
  color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(16, 211, 192, .55), transparent 55%),
    radial-gradient(100% 120% at 0% 100%, rgba(255, 111, 181, .55), transparent 55%),
    linear-gradient(135deg, #3B2BD6, #6C5CFF 45%, #2E9BFF);
  box-shadow: var(--glow);
}
:root[data-skin="aurora"] .hero.boy { background:
    radial-gradient(120% 120% at 100% 0%, rgba(16, 211, 192, .6), transparent 55%),
    radial-gradient(100% 120% at 0% 100%, rgba(108, 92, 255, .6), transparent 55%),
    linear-gradient(135deg, #0B3FD1, #2E9BFF 50%, #10B9A6); }
:root[data-skin="aurora"] .hero::after {           /* сетка-«голограмма» */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: linear-gradient(120deg, transparent 20%, #000 70%); mask-image: linear-gradient(120deg, transparent 20%, #000 70%);
}
:root[data-skin="aurora"] .hero h2 { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; }
:root[data-skin="aurora"] .hero .age { font-family: var(--sans); font-weight: 500; opacity: .9; }
:root[data-skin="aurora"] .hero .chip { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
:root[data-skin="aurora"] .hero .eyebrow { opacity: .8; letter-spacing: .2em; }
:root[data-skin="aurora"] .hero-deco { opacity: .35; }
/* кнопки дневника: стеклянные плитки с цветным свечением */
:root[data-skin="aurora"] .qbtn { background: var(--bg-2); border: 1px solid var(--line); }
:root[data-skin="aurora"] .qbtn.feed { background: var(--honey-soft); } :root[data-skin="aurora"] .qbtn.sleep { background: var(--sky-soft); }
:root[data-skin="aurora"] .qbtn.diaper { background: var(--sage-soft); } :root[data-skin="aurora"] .qbtn.bath { background: var(--plum-soft); }
:root[data-skin="aurora"] .qbtn.walk { background: var(--coral-soft); }
:root[data-skin="aurora"] .stat { background: var(--bg-2); }
:root[data-skin="aurora"] .stat b, :root[data-skin="aurora"] .stat-card b, :root[data-skin="aurora"] .bday b,
:root[data-skin="aurora"] .when b, :root[data-skin="aurora"] .sec-card .cnt { font-family: "Unbounded", var(--sans); font-weight: 600; }
:root[data-skin="aurora"] .stat b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="aurora"] .ins { background: linear-gradient(135deg, var(--coral-soft), var(--sky-soft)); border: 1px solid var(--line); }
:root[data-skin="aurora"] .bday { background: linear-gradient(135deg, var(--coral-soft), var(--plum-soft)); border: 1px solid var(--line); }
:root[data-skin="aurora"] .bday:nth-child(3n+2) { background: linear-gradient(135deg, var(--sky-soft), var(--sage-soft)); }
:root[data-skin="aurora"] .bday:nth-child(3n) { background: linear-gradient(135deg, var(--honey-soft), var(--coral-soft)); }
:root[data-skin="aurora"] .row .ic, :root[data-skin="aurora"] .sec-card .si { background: var(--bg-2); border: 1px solid var(--line); }
:root[data-skin="aurora"] .when { background: var(--bg-2); border: 1px solid var(--line); }
:root[data-skin="aurora"] .day { background: var(--bg-2); }
:root[data-skin="aurora"] .chart .line { filter: drop-shadow(0 4px 10px rgba(108, 92, 255, .45)); }
:root[data-skin="aurora"] .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 8px 20px -8px rgba(0, 0, 0, .4); }
:root[data-skin="aurora"] .person-hero { background: linear-gradient(135deg, var(--coral-soft), var(--sky-soft)); }
:root[data-skin="aurora"] .feed-item.milestone { background: linear-gradient(135deg, var(--honey-soft), var(--card) 70%); }
:root[data-skin="aurora"] .sw.on { background: var(--grad); }
:root[data-skin="aurora"] .boot-heart { background: var(--grad); }
:root[data-skin="aurora"] .login { background: transparent; }
:root[data-skin="aurora"] .tag.coral { color: var(--coral); }
:root[data-skin="aurora"][data-theme="dark"] .tag.honey { color: var(--honey); }
:root[data-skin="aurora"] .bar i { background: var(--grad); }
@media (prefers-reduced-motion: reduce) { :root[data-skin="aurora"] body::before { animation: none; } }

/* общие правки стиля */
:root[data-skin] .nav-item { color: var(--ink-2); }
:root[data-skin] .nav-item.on, :root[data-skin] .nav-item:hover { color: var(--ink); }
:root[data-skin] .tab { color: var(--ink-3); }
:root[data-skin] .tab.on { color: var(--ink); }
:root[data-skin] .more-grid a, :root[data-skin] .sec-card, :root[data-skin] .person-card { color: var(--ink); }
:root[data-skin] .brand b { font-size: 1rem; letter-spacing: -.02em; }
@media (max-width: 900px) {
  :root[data-skin] .hello h1 { font-size: 1.6rem; }
  :root[data-skin] .mtop h1 { font-size: 1.3rem; }
  :root[data-skin] .hero h2 { font-size: 2rem; }
  :root[data-skin] h3 { font-size: 1rem; }
}
:root[data-skin][data-big] .hello h1 { font-size: 1.5rem; }