/* ============================
   APP LAYOUT
============================ */
#app-screen,
#sidebar {
  height: 100vh; height: 100dvh;
  min-height: 100vh; min-height: 100dvh;
}

#app-screen {
  display: none;
  overflow: hidden;
}
#app-screen.active { display: flex; }

#main-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

.view {
  display: none;
  padding: 32px 40px;
  animation: fadeUp 0.18s ease;
}
.view.active { display: block; }

.view-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 24px;
}
.view-title {
  font-family: 'Bebas Neue', cursive;
  font-size: 30px; letter-spacing: 1px;
  color: var(--text-primary); line-height: 1;
}
.view-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================
   MOBILE HEADER
============================ */
#mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 54px; z-index: 700;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  align-items: center; justify-content: space-between;
  padding: 0 18px; gap: 12px;
}
.hamburger-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-sec); padding: 6px; border-radius: var(--r);
  display: flex; align-items: center;
  transition: color 0.13s, background 0.13s;
}
.hamburger-btn:hover { color: var(--text-primary); background: var(--surface-2); }
.mobile-logo { display: flex; align-items: center; gap: 7px; }

/* Sidebar overlay */
#sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 750;
}
#sidebar-overlay.open { display: block; }

/* ============================
   RESPONSIVE LAYOUT
============================ */
@media (max-width: 768px) {
  #mobile-header { display: flex; }

  #app-screen {
    flex-direction: column;
  }

  #sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 800;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar.open { transform: translateX(0); }
  .theme-picker { margin-top: 0; }
  .nav-item { padding: 10px 14px; font-size: 14px; }
  .sidebar-footer { padding: 14px 16px; }

  #main-content {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 54px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .view { padding: 24px 20px; }
  .view-header { flex-wrap: wrap; gap: 10px; }
  .view-title { font-size: 26px; }
}

@media (max-width: 480px) {
  .view { padding: 20px 16px; }
}