.app-shell { width:100%;max-width:1040px;margin:0 auto;height:100%;min-height:0;padding:0 40px;display:flex;flex-direction:column; }
.site-header { flex:none;min-height:88px;display:flex;align-items:center;gap:16px; }
.brand { border:0;background:none;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;padding:8px 0;white-space:nowrap; }
.brand>.icon { width:23px;height:23px; }
.content-nav { margin-left:auto;display:flex;gap:4px;padding:4px;background:var(--soft);border-radius:10px;flex-shrink:0; }
.nav-tab { border:0;background:none;padding:8px 18px;border-radius:7px;color:var(--muted);font-size:14px; }
.nav-tab.active { background:var(--surface);color:var(--text); }
#main-content { flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;touch-action:pan-y;padding:28px 14px 110px;scrollbar-gutter:stable;scroll-padding:16px;outline:none; }
.header-aside { margin-left:auto;color:var(--muted);font-size:12px; }
.header-back { flex:none; }
.recovery { max-width:650px;margin:10vh auto;padding:30px; }
.recovery p { margin:25px 0;line-height:1.9; }
.recovery .button { margin:0 10px 10px 0; }
.external-change { position:fixed;top:0;left:0;right:0;padding:12px;background:#fff0ce;color:#4d3d1c;font-size:13px;z-index:120; }
@media(max-width:650px) {
  .app-shell { padding:0 8px; }
  .site-header { min-height:76px;padding:0 10px;gap:8px; }
  .brand { font-size:14px;gap:6px; }
  .brand>.icon { width:18px;height:18px; }
  .nav-tab { padding:8px 10px;font-size:12px; }
  #main-content { padding:22px 10px 110px; }
}
@media(max-width:370px) { .site-header {flex-wrap:wrap;row-gap:0;padding-top:8px;padding-bottom:8px;} .header-back {padding:6px 0;} .brand {font-size:13px;} .content-nav {gap:0;} .nav-tab {padding:7px 8px;} }

.writing-shell .site-header { min-height:58px; }
.writing-shell #main-content { padding-top:12px; }