/* ============================================================
   layout.css — App shell, sidebar, topbar, pages, sub-tabs
   ============================================================ */

aside{
  width:var(--sidebar);
  background:var(--sidebar-bg);
  background-image:linear-gradient(180deg,#161412 0%,#0e0d0c 100%);
  min-height:100vh;display:flex;flex-direction:column;
  position:fixed;top:0;left:0;z-index:100;
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:4px 0 24px rgba(0,0,0,.15);
}
.logo{
  padding:24px 22px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo-main{
  font-size:20px;font-weight:800;color:#fff;letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 0%,#c8c4bc 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.logo-sub{
  font-size:10px;color:rgba(255,255,255,.35);
  letter-spacing:.2em;text-transform:uppercase;margin-top:6px;font-weight:600;
}
.nav-sec{
  padding:20px 22px 6px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.25);
}
.nav-item{
  display:flex;align-items:center;gap:12px;
  margin:2px 10px;padding:11px 14px;
  cursor:pointer;color:rgba(255,255,255,.5);
  font-size:13px;font-weight:600;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  border-radius:var(--radius-sm);border:none;
}
.nav-item span{font-size:16px;opacity:.85;filter:grayscale(.2);}
.nav-item:hover{color:rgba(255,255,255,.9);background:var(--sidebar-hover);}
.nav-item.active{
  color:#fff;background:var(--sidebar-active);
  box-shadow:inset 0 0 0 1px rgba(196,77,40,.25);
}
.nav-item.active span{opacity:1;filter:none;}
.nav-item.hidden{display:none!important;}

.sidebar-footer{
  padding:16px 22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:10px;color:rgba(255,255,255,.3);font-family:var(--mono);margin-top:auto;
}
.sidebar-user{
  padding:12px 22px 8px;border-top:1px solid rgba(255,255,255,.08);
}
.sidebar-user-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);}
.sidebar-user-role{font-size:10px;color:rgba(255,255,255,.35);font-family:var(--mono);margin-top:2px;}
.btn-logout{
  width:calc(100% - 20px);margin:8px 10px 12px;
  padding:9px 14px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);
  cursor:pointer;font-family:var(--sans);transition:all .2s;
}
.btn-logout:hover{background:rgba(255,255,255,.1);color:#fff;}

main{margin-left:var(--sidebar);flex:1;min-width:0;}
.topbar{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 32px;height:60px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;
}
.topbar-title{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.topbar-sub{font-size:11px;color:var(--ink3);font-family:var(--mono);margin-top:1px;}

.page{display:none;padding:28px 32px 40px;}
.page.active{display:block;animation:fadeIn .35s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stab{display:none;}
.stab.active{display:block;animation:fadeIn .3s ease;}

.sec-tabs{
  display:flex;gap:4px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:4px;margin-bottom:24px;
  width:fit-content;max-width:100%;flex-wrap:wrap;
  box-shadow:var(--shadow-sm);
}
.sec-tab{
  padding:9px 20px;font-size:13px;font-weight:600;
  cursor:pointer;color:var(--ink3);
  border-radius:var(--radius-sm);
  transition:all .2s;border:none;background:transparent;
}
.sec-tab:hover{color:var(--ink2);}
.sec-tab.active{
  color:var(--ink);background:#fff;
  box-shadow:var(--shadow-sm);
}

.coming{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:60vh;color:var(--ink3);gap:12px;
}
.coming-icon{font-size:56px;opacity:.15;filter:grayscale(1);}
.coming-title{font-size:20px;font-weight:800;color:var(--ink2);letter-spacing:-.02em;}

#app-shell{display:none;width:100%;min-height:100vh;}
#app-shell.visible{display:flex;}