:root{
  --bg:#0b1f55;
  --bg2:#0a1842;
  --grid:rgba(255,255,255,.06);
  --text:#fff;
  --muted:rgba(255,255,255,.75);
  --accent:#7c5cff;
  --accent2:#5aa2ff;
  --card:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.18);
}

*{box-sizing:border-box}
/* Избегаем фиксированной высоты 100%, чтобы фон не обрывался при скролле */
html{height:100%}
body{min-height:100%; min-height:100vh}
#app{min-height:100%}
/* Подстраховка: одинаковый фон у корня */
html{background-color:var(--bg)}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(140px 140px at 85% -10%, rgba(124,92,255,.25), transparent 70%),
    radial-gradient(200px 200px at 10% 0%, rgba(90,162,255,.20), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; position:sticky; top:env(safe-area-inset-top); top:0; z-index:3;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-bottom:1px solid var(--stroke);
}
.t-brand{font-weight:800; letter-spacing:.12em; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25)}
.t-user{font-weight:600; color:var(--muted)}

.views{padding:12px 12px 80px 12px}
.view{display:none; animation:fade .2s ease}
.view.active{display:block}

.h3{margin:6px 0 10px 4px; font-size:18px}

.day-controls{display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 8px 0}
.pill{border:1px solid var(--stroke); background:var(--card); color:#fff; border-radius:999px; padding:8px 12px}

.day-title{font-weight:800; font-size:14px; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(124,92,255,.18), rgba(90,162,255,.18)); border:1px solid var(--stroke)}

.day-scroll{display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px 2px; scrollbar-width:none}
.day-scroll::-webkit-scrollbar{display:none}
.day-chip{white-space:nowrap; padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); font-weight:700; font-size:13px; opacity:.9}
.day-chip.active{background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#0a1540}

.timeline{display:flex; flex-direction:column; gap:10px}
.card, .event{background:var(--card); border:1px solid var(--stroke); border-radius:16px; padding:12px}
.event h4{margin:8px 0 4px 0; font-size:16px}
.event .time{font-weight:800}
.event .meta{font-size:12px; color:var(--muted)}

.list{list-style:none; margin:0; padding:0}
.list li{padding:10px 0; border-bottom:1px dashed var(--stroke)}

.input{width:100%; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:#fff; padding:10px; outline:none}
.btn{border-radius:12px; border:1px solid var(--stroke); padding:10px 14px; color:#fff; background:rgba(255,255,255,.08); font-weight:800}
.btn.primary{background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#0b1f55}

.card.warn{border-color:#ffaaaa; background:rgba(255,80,80,.15)}

.page-logo{display:flex; align-items:center; justify-content:center; margin:16px 0 84px 0; opacity:.95}
.page-logo img{max-width:220px; width:66%; height:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));}

.floating-actions{position:fixed; right:12px; bottom:76px}
.fab{border:none; border-radius:999px; padding:12px 14px; background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#0b1f55; font-weight:800}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  display:grid; grid-template-columns: repeat(5, 1fr); gap:8px; z-index:4;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-top:1px solid var(--stroke); backdrop-filter: blur(8px);
}
.nav-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:8px 4px; border-radius:12px; border:1px solid transparent; background:transparent; color:#fff; font-weight:700}
.nav-btn.active{background:linear-gradient(180deg, rgba(124,92,255,.22), rgba(90,162,255,.12)); border-color:var(--stroke)}
.nav-btn small{font-size:11px}

@keyframes fade{from{opacity:.0; transform:translateY(4px)} to{opacity:1; transform:none}}