/* Mobile first: header + bottom navigation. Desktop (>= 1024px): left sidebar. */
.app { min-height: 100vh; }
.app-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; color: var(--c-ink); }
.brand:hover { text-decoration: none; }
.brand__mark { width: 32px; height: 32px; border-radius: 10px; background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center; font-size: 16px; }
.brand__accent { color: var(--c-accent); }
.app-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.app-main { padding: 16px 16px calc(var(--nav-h) + 28px); max-width: 760px; margin: 0 auto; }
.app-main--wide { max-width: 1100px; }

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  background: var(--c-surface); border-top: 1px solid var(--c-line);
}
.bottom-nav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--c-muted); padding: 6px 0; }
.bottom-nav__item:hover { text-decoration: none; }
.bottom-nav__item--active { color: var(--c-accent); }
.bottom-nav__icon { font-size: 20px; line-height: 1; }
.bottom-nav__add { justify-self: center; width: 52px; height: 52px; border-radius: 18px; background: var(--c-accent); color: var(--c-accent-ink); display: grid; place-items: center; font-size: 28px; font-weight: 400; margin-top: -22px; box-shadow: 0 8px 22px color-mix(in srgb, var(--c-accent) 40%, transparent); }
.bottom-nav__add:hover { text-decoration: none; }

.sidebar { display: none; }

.app-footer { padding: 24px 16px calc(var(--nav-h) + 32px); text-align: center; color: var(--c-faint); font-size: var(--fs-xs); }
.app-footer a { color: var(--c-muted); margin: 0 4px; display: inline-block; padding: 8px 2px; }

@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh; padding: 20px 14px;
    background: var(--c-surface); border-right: 1px solid var(--c-line);
  }
  .sidebar .brand { margin: 0 8px 18px; }
  .sidebar__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--c-muted); font-weight: 650; }
  .sidebar__item:hover { background: var(--c-surface-2); text-decoration: none; }
  .sidebar__item--active { background: var(--c-accent-soft); color: var(--c-accent); }
  .sidebar__cta { margin-top: 14px; }
  .sidebar__foot { margin-top: auto; font-size: var(--fs-xs); color: var(--c-faint); padding: 8px; }
  .bottom-nav { display: none; }
  .app-header .brand { display: none; }
  .app-header { padding: 0 32px; }
  .app-main { padding: 24px 32px 48px; }
  .app-footer { padding-bottom: 32px; }
}

/* Public pages (landing, auth, share link): no sidebar / bottom nav. */
.public { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.public-header { display: flex; align-items: center; gap: 10px; height: 64px; }
.auth-box { max-width: 420px; margin: 24px auto; }