* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; overscroll-behavior: none; }
  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-outer);
    color: var(--ink);
    height: 100dvh;
    overflow: hidden;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100dvh;
    padding: 0;
  }
  .shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--paper);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }
  .app-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .logo-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--primary-text);
  }
  .app-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.1; }
  .app-tagline { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
  .menu-toggle-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--panel); border: none; color: var(--accent-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .menu-overlay { position: fixed; inset: 0; z-index: 60; background: transparent; }
  .dropdown-menu { position: absolute; top: 66px; right: 16px; background: var(--paper); border-radius: 12px; padding: 8px; width: 220px; box-shadow: 6px 6px 18px rgba(var(--shadow-d-rgb),0.35), -4px -4px 12px rgba(var(--shadow-l-rgb),0.9); }
  .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 10px 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; font-family: 'Inter', sans-serif; }
  .dropdown-item:active { background: var(--panel); }
  .back-link { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 0; margin-bottom: 10px; font-family: 'Inter', sans-serif; }
  .body-scroll { padding: 18px 20px 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; min-height: 0; }
  .body-scroll::-webkit-scrollbar { width: 6px; }
  .body-scroll::-webkit-scrollbar-thumb { background: #D9CDEF; border-radius: 4px; }

  .nav-bar { display: flex; border-top: 1px solid var(--border); background: var(--paper); flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom); }
  .nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 12px; background: transparent; border: none; color: var(--muted); cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 11px; min-height: 44px;
  }
  .nav-btn.active { color: var(--nav-active); font-weight: 700; }
  .nav-btn:active { transform: scale(0.96); }