/* Layout corrections loaded last so they consistently override component styles. */
.app{grid-template-columns:minmax(230px,250px) minmax(0,1fr)}
aside{min-width:0}
aside nav{flex:1;scrollbar-width:thin;scrollbar-color:#46504f transparent}
.workspace{min-width:0}
.entry{min-width:0}
.entry-actions{flex-wrap:wrap;justify-content:flex-end}

@media(max-width:1100px){
  .workspace{padding:1.75rem 2rem}
  .entry{grid-template-columns:2.5rem minmax(150px,1fr) minmax(120px,.8fr) auto}
  .entry>div:nth-child(4){display:none}
  .dashboard-stats{grid-template-columns:repeat(2,minmax(130px,1fr))}
}

@media(max-width:900px){
  .app:not([hidden]){display:block}
  aside{position:sticky;top:0;z-index:20;height:auto;min-height:0;padding:1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem 1rem;border-right:0;border-bottom:1px solid var(--line);box-shadow:0 8px 24px #0005}
  aside .brand{min-width:0}
  aside .brand>div{min-width:0}
  aside .brand strong,aside .brand small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .aside-footer{margin:0}
  .aside-footer button{width:auto;white-space:nowrap}
  aside nav{grid-column:1/-1;order:3;width:100%;margin:0;display:flex;gap:.4rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.25rem;scrollbar-width:thin}
  aside nav>button,.category-navigation button{width:auto;flex:0 0 auto;white-space:nowrap}
  .nav-section-heading{display:none}
  .category-navigation{display:flex;gap:.4rem}
  .workspace{padding:1.5rem;max-width:none}
}

@media(max-width:650px){
  aside{grid-template-columns:minmax(0,1fr) auto;padding:.75rem}
  .brand-mark{width:2.15rem;height:2.15rem}
  .aside-footer button{padding:.6rem .75rem;font-size:.78rem}
  nav button{padding:.62rem .72rem;font-size:.82rem}
  .workspace{padding:1rem}
  .workspace header{align-items:flex-start;gap:1rem}
  .workspace header h2,.dialog-title h2{font-size:1.35rem}
  .workspace header button{padding:.65rem .75rem;white-space:nowrap}
  .toolbar{margin:1.2rem 0 .9rem}
  .entry{grid-template-columns:2.5rem minmax(0,1fr);gap:.7rem;padding:.85rem}
  .entry>div:nth-child(3),.entry>div:nth-child(4){display:none}
  .entry-actions{grid-column:1/-1;justify-content:stretch}
  .entry-actions button{flex:1 1 calc(50% - .35rem)}
  .dashboard-stats{grid-template-columns:1fr 1fr;gap:.65rem;margin:1.2rem 0}
  .stat-card{padding:1rem}.stat-card strong{font-size:1.45rem}
  .dashboard-panel,.generator-card,.settings-card{padding:1rem}
  .panel-heading{align-items:flex-start;flex-direction:column}
  .security-item{grid-template-columns:1fr;gap:.65rem}
  .security-item button{width:100%}
  .form-grid{display:block}
  dialog form,.history-panel{padding:1.15rem}
  .dialog-actions{flex-direction:column-reverse}
  .dialog-actions button{width:100%}
}

@media(max-width:420px){
  aside .brand small{display:none}
  .workspace header{display:grid}
  .workspace header button{width:100%}
  .dashboard-stats{grid-template-columns:1fr}
  .generator-output{display:grid}
  .generator-output input,.generator-output button{border-radius:9px}
  .generator-output button{margin-top:.5rem}
  .length-control{grid-template-columns:1fr 4.5rem}
  .length-control label{grid-column:1/-1}
}