*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-bg);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ========== MOBILE FIRST LAYOUT ========== */
.screen { display: none; min-height: 100vh; min-height: 100dvh; padding-bottom: 72px; }
.screen.active { display: block; }
.screen-content { padding: var(--space-lg); max-width: var(--content-max-width); margin: 0 auto; }

/* ========== DESKTOP (>= 769px) ========== */
@media (min-width: 769px) {
    .screen { padding-bottom: 0; }
    .app-layout { display: flex; min-height: 100vh; }
    .sidebar { display: flex !important; }
    .main-content { flex: 1; margin-left: var(--sidebar-width); }
    .bottom-tabs { display: none !important; }
}

/* ========== MOBILE (< 769px) ========== */
@media (max-width: 768px) {
    .sidebar { display: none !important; }
    .main-content { margin-left: 0; }
    .bottom-tabs { display: flex !important; }
    .screen-content { padding: var(--space-md); }
}

/* ========== SELECTION ========== */
::selection {
    background: rgba(255, 107, 43, 0.3);
    color: #fff;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== MOBILE FOOTER ========== */
.mobile-footer {
  display: none;
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--color-text-tertiary);
  font-weight: 600;
  letter-spacing: 0.5px;
  border-top: 1px solid var(--color-border);
  background: var(--color-dark-header);
}

@media (max-width: 768px) {
  .mobile-footer { display: block; }
}