/* base.css - Reset and Base Layout (Apple Liquid Glass) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--color-canvas);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(2, 132, 199, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.02) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--color-text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

.main-container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%;
  padding: 24px 16px 120px 16px; /* 120px safe area for floating bottom nav */
  flex: 1;
}

.header-intro {
  margin-bottom: 24px;
}

.header-title {
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-text-main);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.header-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Page Views Switching & Strict Isolation */
.view-section {
  display: none !important;
  width: 100%;
  opacity: 0;
}

.view-section.active {
  display: block !important;
  opacity: 1;
  animation: fadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}