/* Persistent application chrome; only the workspace owns page scrolling. */
html,body{height:100%;overflow:hidden;scroll-behavior:auto}
body{padding-bottom:0}
#app{height:100dvh;min-height:0;overflow:hidden}
#app>aside{height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
#app>main{height:100dvh;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
#app>main>header{flex:none;position:relative;min-height:96px}
#content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:32px}
#content[aria-busy="true"]{cursor:progress}
#content.loading-state{opacity:1;pointer-events:auto}
.route-status{position:fixed;z-index:80;inset:0 0 auto;height:3px;background:var(--green);pointer-events:none}
.route-status[hidden]{display:none}
.route-loading,.route-error{min-height:240px;display:grid;place-content:center;gap:16px;text-align:center;color:var(--muted)}
.route-error button{justify-self:center}
nav a[data-page]{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:5px;border-radius:12px;color:#b9cabe;text-decoration:none;font-weight:700;min-width:0}
nav a[data-page].active{background:#315540;color:#fff}
nav a[data-page]:hover{background:#254735;color:#fff}
nav a[data-page] i{margin-inline-start:auto}
.anomaly-drawer,.avito-drawer{overscroll-behavior:contain;scrollbar-gutter:stable}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--green);outline-offset:3px}
.tag,.pager,.import-tab-count,.channel-cell b{font-variant-numeric:tabular-nums}
@media(max-width:720px){
  #app{display:block;height:100dvh;min-height:0}
  #app>aside{height:76px;overflow:visible}
  #app>main{height:calc(100dvh - 76px - env(safe-area-inset-bottom))}
  #app>main>header{min-height:76px}
  #content{padding:16px 12px 24px}
  nav a[data-page]{position:relative;min-height:58px;padding:5px 1px;display:flex;flex-direction:column;justify-content:center;gap:3px;margin:0;font-size:9px;line-height:1;text-align:center;border-radius:10px;white-space:nowrap}
  nav a[data-page].mobile-secondary-nav{display:none}
  nav a[data-page].active{background:#365844}
  nav a[data-page] i{position:absolute;top:1px;right:5px;margin:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(prefers-reduced-motion:no-preference){nav a[data-page]{transition:background-color 120ms,color 120ms}}

/* Expand the desktop rail without covering controls along the workspace edge. */
@media (min-width:721px) and (hover:hover) and (pointer:fine){
  #app{grid-template-columns:72px minmax(0,1fr)}
  #app:has(>aside:hover),#app:has(>aside :focus-visible){grid-template-columns:248px minmax(0,1fr)}
  #app>aside{z-index:40;min-width:0;padding:20px 12px;overflow-x:hidden;scrollbar-gutter:auto;box-shadow:1px 0 0 #ffffff12}
  #app>aside:is(:hover,:has(:focus-visible)){box-shadow:10px 0 28px #06160d2e}
  #app>aside .logo{gap:12px;padding:0 2px 22px;white-space:nowrap}
  #app>aside .logo span{flex:none;width:44px;height:44px}
  #app>aside .logo strong{max-width:0;opacity:0;overflow:hidden;white-space:nowrap}
  #app>aside nav a[data-page]{min-height:48px;padding:12px;gap:0;white-space:nowrap}
  #app>aside nav .nav-icon{flex:0 0 24px;width:24px;text-align:center;font-size:20px;line-height:24px}
  #app>aside nav .nav-label{flex:0 1 0;max-width:0;opacity:0;overflow:hidden;white-space:nowrap}
  #app>aside nav i{max-width:0;padding:0;opacity:0;overflow:hidden}
  #app>aside .aside-bottom{gap:0;padding:0}
  #app>aside #mode{max-height:0;opacity:0;overflow:hidden}
  #app>aside #logout{display:flex;align-items:center;justify-content:center;gap:0;width:48px;min-height:48px;padding:11px 0;white-space:nowrap}
  #app>aside .logout-icon{flex:none;width:24px;text-align:center;font-size:22px;line-height:24px}
  #app>aside .logout-label{max-width:0;opacity:0;overflow:hidden}
  #app>aside:is(:hover,:has(:focus-visible)) .logo strong{max-width:170px;opacity:1}
  #app>aside:is(:hover,:has(:focus-visible)) nav a[data-page]{gap:12px}
  #app>aside:is(:hover,:has(:focus-visible)) nav .nav-label{flex:1 1 auto;max-width:165px;opacity:1}
  #app>aside:is(:hover,:has(:focus-visible)) nav i{max-width:48px;padding:1px 7px;opacity:1}
  #app>aside:is(:hover,:has(:focus-visible)) .aside-bottom{gap:12px;padding:8px}
  #app>aside:is(:hover,:has(:focus-visible)) #mode{max-height:80px;opacity:1}
  #app>aside:is(:hover,:has(:focus-visible)) #logout{justify-content:center;gap:8px;width:100%;padding:11px 16px}
  #app>aside:is(:hover,:has(:focus-visible)) .logout-label{max-width:100px;opacity:1}
}
@media (min-width:721px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #app{transition:grid-template-columns 220ms cubic-bezier(0.2,0,0,1)}
  #app>aside{transition:box-shadow 150ms ease-out}
  #app>aside .logo strong,#app>aside nav .nav-label,#app>aside nav i,#app>aside #mode,#app>aside .logout-label{transition:opacity 120ms ease-out,max-width 220ms cubic-bezier(0.2,0,0,1)}
}