/* ═══ base.css ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* Сетка */
body::before{content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(0,212,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.022) 1px,transparent 1px);
  background-size:48px 48px;pointer-events:none;z-index:0}

/* Скроллбар */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

a{color:inherit;text-decoration:none}

/* SPA страницы */
.page{display:none;min-height:100vh;padding-top:64px;position:relative;z-index:1}
.page.active{display:block}
#page-home.active{display:flex;flex-direction:column}

/* Спиннер */
.spinner{width:28px;height:28px;border:2px solid var(--border2);border-top-color:var(--cyan);
  border-radius:50%;animation:spin .6s linear infinite;margin:3rem auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Пустое состояние */
.empty{text-align:center;padding:4rem 2rem;color:var(--muted)}
.empty .ico{font-size:2.8rem;display:block;margin-bottom:1rem;opacity:.35}
.empty h3{font-size:1rem;color:var(--text);margin-bottom:.35rem}
.empty p{font-size:.84rem}

/* Анимации */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,.4)}50%{box-shadow:0 0 0 6px rgba(0,212,255,0)}}