#appShell { display: grid; grid-template-columns: 208px minmax(0,1fr); column-gap: 26px; }
#appShell > header { grid-column: 1 / -1; }
.app-content { min-width: 0; }
.app-sidebar { position: sticky; top: 22px; align-self: start; margin-top: 30px; padding: 19px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-solid); box-shadow: 0 8px 28px rgba(var(--accent-rgb),.05); }
.app-sidebar-heading { padding: 0 10px 16px; font-size: .72rem; font-weight: 700; color: var(--muted); letter-spacing: .03em; }
.app-sidebar nav { display: grid; gap: 7px; }
.app-sidebar .account-nav-button { display: flex; align-items: center; gap: 11px; text-align: left; padding: 13px 12px; min-height: 48px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 11px; color: var(--muted); font-size: .85rem; }
.app-sidebar .account-nav-button::before { width: 20px; font-size: 1.15rem; text-align: center; color: var(--accent-dark); }
#userCenterOpen::before { content: '◎'; }
#settingsOpen::before { content: '⚙'; }
#placementOpen::before { content: '▤'; }
#dailyChallengeOpen::before { content: '✦'; }
.app-sidebar .account-nav-button:hover,.app-sidebar .account-nav-button[aria-current] { color: var(--accent-dark); background: var(--soft); border-color: rgba(var(--accent-rgb),.15); }
.sidebar-home { border: 0; background: transparent; color: var(--muted); text-align: left; padding: 15px 12px; min-height: 44px; font-size: .8rem; cursor: pointer; margin-top: 20px; border-top: 1px solid var(--line); width: 100%; }
.sidebar-caption { padding: 10px 12px 0; color: var(--accent-dark); opacity: .5; font-size: .75rem; }
.sidebar-toggle,.sidebar-close,.sidebar-scrim { display: none; }
/* The narrower content area needs compact hero columns earlier. */
@media(min-width:901px) { .app-content .intro { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 28px; } .app-content .workspace { grid-template-columns: 205px minmax(0,1fr); } }
@media(max-width:1100px) { #appShell { grid-template-columns: 184px minmax(0,1fr); gap: 20px; } .app-content .intro { grid-template-columns: minmax(0,1fr); } .app-content .photo-composition { width: min(100%,430px); margin: 0 auto; } .app-content .world-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width:900px) {
  #appShell { display: block; }
  #appShell > header { flex-wrap: wrap; }
  .sidebar-toggle { display: block; border: 1px solid var(--line); color: var(--accent-dark); background: var(--panel-solid); border-radius: 10px; min-height: 44px; padding: 9px 12px; cursor: pointer; margin-left: auto; }
  .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; margin: 0; width: min(290px,85vw); max-width: 100%; z-index: 910; border-radius: 0 20px 20px 0; padding: max(24px,env(safe-area-inset-top)) 16px 24px; overflow-y: auto; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease,visibility .2s; }
  html.sidebar-open .app-sidebar { transform: translateX(0); visibility: visible; }
  .app-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 24px; }
  .sidebar-close { display: block; border: 0; background: var(--soft); color: var(--accent-dark); width: 44px; height: 44px; border-radius: 10px; font-size: 1.6rem; cursor: pointer; }
  .sidebar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 900; background: rgba(18,25,45,.38); border: 0; }
  html.sidebar-open body { overflow: hidden; }
}
html.phone-viewport #appShell { display: block; }
html.phone-viewport .sidebar-toggle { display: block; border: 1px solid var(--line); color: var(--accent-dark); background: var(--panel-solid); border-radius: 10px; min-height: 44px; padding: 9px 12px; margin-left: auto; }
html.phone-viewport .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; margin: 0; width: min(290px,calc(var(--device-width) * .85)); z-index: 910; border-radius: 0 20px 20px 0; padding: max(24px,env(safe-area-inset-top)) 16px 24px; overflow-y: auto; visibility: hidden; transform: translateX(-100%); }
html.phone-viewport.sidebar-open .app-sidebar { transform: translateX(0); visibility: visible; }
html.phone-viewport .app-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 24px; }
html.phone-viewport .sidebar-close { display: block; border: 0; background: var(--soft); color: var(--accent-dark); width: 44px; height: 44px; border-radius: 10px; font-size: 1.6rem; }
html.phone-viewport .sidebar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 900; background: rgba(18,25,45,.38); border: 0; }
html.phone-viewport.sidebar-open body { overflow: hidden; }
@media(prefers-reduced-motion:reduce) { .app-sidebar { transition: none; } }
/* One collapsed menu on every device; the home page retains its full width. */
#appShell { display: block; }
.sidebar-toggle { display: block; border: 1px solid var(--line); color: var(--accent-dark); background: var(--panel-solid); border-radius: 10px; min-height: 44px; padding: 9px 12px; cursor: pointer; margin-left: auto; }
.app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; margin: 0; width: min(290px,85vw); max-width: 100%; z-index: 910; border-radius: 0 20px 20px 0; padding: max(24px,env(safe-area-inset-top)) 16px 24px; overflow-y: auto; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease,visibility .2s; }
html.sidebar-open .app-sidebar { transform: translateX(0); visibility: visible; }
.app-sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 24px; }
.sidebar-close { display: block; border: 0; background: var(--soft); color: var(--accent-dark); width: 44px; height: 44px; border-radius: 10px; font-size: 1.6rem; cursor: pointer; }
.sidebar-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 900; background: rgba(18,25,45,.38); border: 0; }
html.sidebar-open body { overflow: hidden; }
#placementTest { margin-top: 30px; }
@media(prefers-reduced-motion:reduce) { .app-sidebar { transition: none; } }

.daily-jump { position: fixed; right: 14px; top: 50%; z-index: 50; min-height: 48px; padding: 12px 16px; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 14px; color: var(--accent-dark); background: var(--panel-solid); box-shadow: 0 6px 25px rgba(var(--accent-rgb),.15); font: 650 .8rem ui-sans-serif,system-ui,sans-serif; cursor: pointer; }
.daily-jump::before { content: '✦'; margin-right: 7px; }
.daily-jump:hover { background: var(--soft); }
@media(max-width:680px) { .daily-jump { right: 6px; top: auto; bottom: max(18px,env(safe-area-inset-bottom)); width: 46px; padding: 0; font-size: 0; } .daily-jump::before { font-size: 20px; margin: 0; } }
html.phone-viewport .daily-jump { right: auto; left: calc(var(--device-width) - 52px); top: auto; bottom: max(18px,env(safe-area-inset-bottom)); width: 46px; padding: 0; font-size: 0; }
html.phone-viewport .daily-jump::before { font-size: 20px; margin: 0; }