/* ═══════════════════════════════════════════════ */
/*  RESET & BASE                                   */
/* ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 15px;
  height: 100%;
  overflow: hidden;
  max-width: 100vw;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  height: 100%;
  overflow: hidden;
  margin: 0;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* ═══════════════════════════════════════════════ */
/*  BACKGROUND ATMOSPHERE                          */
/* ═══════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, var(--accent-dim) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 100%, var(--info-dim) 0%, transparent 70%);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.btn-outline:hover {
  border-color: var(--border-active);
  color: var(--text-primary);
}
.btn-danger-outline {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  opacity: 0.7;
}
.btn-danger-outline:hover {
  opacity: 1;
}