/* ============================================================
   02-layout.css
   The app shell: sidebar rail, brand, navigation and the storage card.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
.shell{display:flex; min-height:100vh; position:relative; z-index:1;}

.rail{
  width:var(--rail-w); flex:0 0 var(--rail-w);
  background:linear-gradient(180deg,#0c121d 0%,#080c14 100%);
  border-right:1px solid var(--line);
  padding:0 0 18px; display:flex; flex-direction:column; gap:0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 20px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),transparent);
}
.brand-mark{display:block; width:auto; height:44px; flex:0 0 auto;}
.brand-text{display:flex; flex-direction:row; align-items:center; gap:8px; line-height:1.05; white-space:nowrap;}
.brand-name{
  font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:16px;
  letter-spacing:.09em; color:var(--accent-hi); text-transform:uppercase;
}
.nav{display:flex; flex-direction:column; gap:3px; padding:16px 12px;}
.nav-item{
  border:none; background:transparent; color:var(--text-dim); text-align:left;
  padding:11px 13px; border-radius:var(--r1); font-size:14.5px;
  display:flex; align-items:center; gap:12px;
  transition:background .15s, color .15s; position:relative; width:100%;
}
.nav-item .ico{
  width:19px; height:19px; flex:0 0 19px; opacity:.85;
  display:flex; align-items:center; justify-content:center;
}
.nav-item .ico svg{width:100%; height:100%; display:block;}
.nav-item .lbl{flex:1;}
.nav-item:hover:not(:disabled){background:var(--surface); color:var(--text);}
.nav-item.active{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.05));
  color:var(--accent-hi); font-weight:600;
}
.nav-item.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0;
}
.nav-item.active .ico{opacity:1;}
.nav-item:disabled{opacity:.32; cursor:not-allowed;}
.nav-item .count{
  font-size:11.5px; color:var(--accent-hi); background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.26);
  padding:1px 9px; border-radius:20px; font-variant-numeric:tabular-nums; font-weight:600;
}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:9px; padding:0 14px;}
.rail-tag{
  text-align:center; font-family:'Cinzel',Georgia,serif; font-size:10.5px;
  letter-spacing:.24em; color:var(--text-faint); padding:14px 0 4px;
}
.storage-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
  padding:12px 13px; display:flex; flex-direction:column; gap:7px;
}
.storage-head{display:flex; align-items:center; gap:9px;}
.storage-head .t{font-size:12.5px; font-weight:600; flex:1;}
.storage-head .n{font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.storage-bar{height:4px; background:var(--surface-3); border-radius:3px; overflow:hidden;}
.storage-bar span{display:block; height:100%; background:linear-gradient(90deg,var(--ok),#7ae0b4); border-radius:3px;}