/* =====================================================================
   骨架：外壳 / 侧栏 / 顶栏 / 内容区
   响应式断点：
     ≥1440px  侧栏全展开
     1180–1439 侧栏自动收成图标态
     <1180px  侧栏变抽屉（遮罩触发）
     <900px   栅格降列、页头堆叠
     <620px   单列、表格横向滚动、浮动操作条
   ===================================================================== */

/* ---------- 外壳 ---------- */
.shell{display:flex;min-height:100vh;min-height:100dvh}

.main{
  flex:1;min-width:0;
  margin-left:var(--nav-w);
  display:flex;flex-direction:column;
  transition:margin-left .22s var(--ease);
}

/* ---------- 侧栏 ---------- */
.nav{
  position:fixed;inset:0 auto 0 0;
  width:var(--nav-w);
  z-index:60;
  display:flex;flex-direction:column;
  background:
    radial-gradient(900px 300px at -10% -5%,rgba(47,107,255,.16),transparent 60%),
    linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg-2) 100%);
  border-right:1px solid var(--nav-line);
  transition:width .22s var(--ease),transform .24s var(--ease);
}
/* 深空底纹：极细网格，科技感来源 */
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--nav-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--nav-line) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 45%);
}
.nav > *{position:relative}

.nav__brand{
  height:var(--top-h);
  display:flex;align-items:center;gap:10px;
  padding:0 14px;flex:0 0 auto;
  border-bottom:1px solid var(--nav-line);
}
.nav__logo{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-md);
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 12px rgba(47,107,255,.32);
}
.nav__logo .ic{width:18px;height:18px;stroke-width:1.7}
.nav__brand-txt{min-width:0}
.nav__brand-name{
  font-size:var(--fs-md);font-weight:var(--fw-strong);color:#fff;letter-spacing:var(--ls-normal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav__brand-sub{
  font-size:var(--fs-xs);color:var(--nav-dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:0;
}

.nav__scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:10px 10px 16px;
}

.nav__group{
  padding:16px 10px 6px;
  font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);
  color:#54658A;white-space:nowrap;
}
.nav__group:first-child{padding-top:4px}

.nav__item{
  display:flex;align-items:center;gap:10px;
  height:38px;padding:0 10px;margin-bottom:2px;
  border-radius:var(--r-md);
  color:var(--nav-text);font-size:var(--fs-base);font-weight:var(--fw-strong);
  cursor:pointer;white-space:nowrap;position:relative;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav__item .ic{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.nav__item:hover{color:var(--nav-hi);background:rgba(255,255,255,.055)}
.nav__item.is-active{
  color:#fff;font-weight:var(--fw-strong);
  background:linear-gradient(90deg,rgba(47,107,255,.9),rgba(47,107,255,.55));
  box-shadow:0 2px 12px rgba(47,107,255,.34);
}
.nav__item.is-active .ic{opacity:1}
.nav__item.is-active::before{
  content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--dk-cyan);
  box-shadow:0 0 10px rgba(34,224,200,.7);
}
.nav__txt{overflow:hidden;text-overflow:ellipsis}
.nav__dot{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:var(--fw-strong);line-height:1;
  background:var(--red-500);color:#fff;
}
.nav__dot--muted{background:rgba(255,255,255,.13);color:#C3CCE0}

.nav__foot{
  flex:0 0 auto;padding:10px 14px;
  border-top:1px solid var(--nav-line);
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);color:var(--nav-dim);white-space:nowrap;
}
.nav__foot .beacon{
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--dk-cyan);animation:pulseRing 2.4s infinite;
}

/* ---------- 侧栏：图标态 ---------- */
.nav.is-mini{width:var(--nav-w-mini)}
.nav.is-mini .nav__brand-txt,
.nav.is-mini .nav__group,
.nav.is-mini .nav__txt,
.nav.is-mini .nav__dot,
.nav.is-mini .nav__foot span{display:none}
.nav.is-mini .nav__item{justify-content:center;padding:0}
.nav.is-mini .nav__brand{justify-content:center;padding:0}
.nav.is-mini .nav__foot{justify-content:center;padding:10px 0}
.nav.is-mini .nav__item.is-active::before{left:-10px}
.shell.is-mini .main{margin-left:var(--nav-w-mini)}

/* 侧栏：迷你态的纯文本 tooltip */
.nav.is-mini .nav__item[data-tip]:hover::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:#1B2740;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-strong);
  padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;z-index:80;
  box-shadow:var(--sh-3);pointer-events:none;
}

.nav__toggle{
  position:absolute;top:calc(var(--top-h) - 13px);right:-11px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--nav-bg-2);color:var(--nav-text);
  border:1px solid var(--nav-line);z-index:5;
  transition:transform .22s var(--ease),color .15s;
}
.nav__toggle:hover{color:#fff;border-color:rgba(146,176,232,.34)}
.nav.is-mini .nav__toggle{transform:rotate(180deg)}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;top:0;z-index:40;
  height:var(--top-h);flex:0 0 auto;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:0 var(--sp-5);
  background:#fff;
  border-bottom:1px solid var(--line);
}
.top__hamb{
  display:none;width:32px;height:32px;border-radius:var(--r-md);
  place-items:center;color:var(--text-2);flex:0 0 auto;
}
.top__hamb:hover{background:var(--surface-3)}

.crumbs{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--text-3);min-width:0;
}
.crumbs__link{cursor:pointer;transition:color .14s}
.crumbs__link:hover{color:var(--brand-500)}
.crumbs__sep{color:var(--text-4)}
.crumbs__now{color:var(--text-1);font-weight:var(--fw-strong)}
.crumbs .ic{width:13px;height:13px}

.top__search{
  flex:1;max-width:380px;min-width:0;
  display:flex;align-items:center;gap:8px;
  height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface-2);color:var(--text-4);font-size:var(--fs-base);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.top__search:hover{border-color:var(--line-strong);background:#fff}
.top__search input{
  flex:1;min-width:0;border:none;background:none;outline:none;
  font:inherit;color:var(--text-1);
}
.top__search input::placeholder{color:var(--text-4)}
.top__kbd{
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--text-4);
  border:1px solid var(--line);border-bottom-width:2px;
  border-radius:var(--r-xs);padding:0 5px;background:#fff;flex:0 0 auto;
}

.top__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}

.top__icon{
  position:relative;width:32px;height:32px;border-radius:var(--r-md);
  display:grid;place-items:center;color:var(--text-2);
  transition:background .14s,color .14s;
}
.top__icon:hover{background:var(--surface-3);color:var(--text-1)}
.top__icon .ic{width:17px;height:17px}
.top__icon .dot{
  position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;
  background:var(--red-500);border:2px solid #fff;
}

/* 端口切换器 */
.port{
  display:flex;align-items:center;gap:8px;
  height:32px;padding:0 6px 0 10px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;font-size:var(--fs-sm);color:var(--text-2);
  transition:border-color .15s;
}
.port:hover{border-color:var(--line-strong)}
.port .ic--sm{color:var(--text-4)}
.port__tag{
  font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-wide);
  padding:1px 6px;border-radius:var(--r-xs);
  background:var(--brand-050);color:var(--brand-600);
}

.user{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 8px 0 4px;border-radius:var(--r-md);
  cursor:pointer;transition:background .14s;
}
.user:hover{background:var(--surface-3)}
.user__avatar{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:var(--fw-strong);color:#fff;
  background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
}
.user__meta{min-width:0;line-height:var(--lh-h1)}
.user__name{font-size:var(--fs-base);font-weight:var(--fw-strong);white-space:nowrap}
.user__role{font-size:var(--fs-xs);color:var(--text-3);white-space:nowrap}
.user__caret{color:var(--text-4);flex:0 0 auto}

/* ---------- 内容区 ---------- */
.page{
  flex:1;min-width:0;
  padding:var(--sp-5) var(--sp-5) 72px;
  max-width:1680px;width:100%;
}
.page--flush{padding:0;max-width:none}
.page__inner{padding:var(--sp-5) var(--sp-5) 72px;max-width:1680px;margin:0 auto}

.view{animation:fadeUp .3s var(--ease-out) both}

/* 页头 */
.phead{
  display:flex;align-items:flex-end;gap:var(--sp-3);
  margin-bottom:var(--sp-4);flex-wrap:wrap;
}
.phead__title{display:flex;align-items:center;gap:10px;min-width:0}
.phead__title h1{font-size:var(--fs-20);font-weight:var(--fw-strong);letter-spacing:0}
.phead__sub{font-size:var(--fs-12);color:var(--text-3);margin-top:3px}
.phead__actions{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.phead__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-sm);color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:3px 11px;white-space:nowrap;
}
.phead__tag .ic{width:13px;height:13px;color:var(--text-3)}

/* ---------- 遮罩（抽屉式侧栏专用） ---------- */
.nav-scrim{
  position:fixed;inset:0;z-index:58;
  background:rgba(9,16,30,.44);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.nav-scrim.is-open{opacity:1;pointer-events:auto}
@media (min-width:1180px){.nav-scrim{display:none}}

/* ---------- 遮罩（抽屉 / 模态浮层） ---------- */
.scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(9,16,30,.44);
  backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease);
}
.scrim.is-open{opacity:1;pointer-events:auto}

/* =====================================================================
   响应式
   ===================================================================== */
@media (max-width:1439px){
  .nav{width:var(--nav-w-mini)}
  .nav .nav__brand-txt,
  .nav .nav__group,
  .nav .nav__txt,
  .nav .nav__dot,
  .nav .nav__foot span{display:none}
  .nav .nav__item{justify-content:center;padding:0}
  .nav .nav__brand{justify-content:center;padding:0}
  .nav .nav__foot{justify-content:center;padding:10px 0}
  .nav__toggle{display:none}
  .main{margin-left:var(--nav-w-mini)}
  .shell.is-mini .main{margin-left:var(--nav-w-mini)}
  .nav .nav__item[data-tip]:hover::after{
    content:attr(data-tip);
    position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
    background:#1B2740;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-strong);
    padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;z-index:80;
    box-shadow:var(--sh-3);pointer-events:none;
  }
}

@media (max-width:1179px){
  .nav{transform:translateX(-100%);width:var(--nav-w)}
  .nav.is-open{transform:none}
  .nav .nav__brand-txt,
  .nav .nav__group,
  .nav .nav__txt,
  .nav .nav__dot,
  .nav .nav__foot span{display:block}
  .nav .nav__item{justify-content:flex-start;padding:0 10px}
  .nav .nav__brand{justify-content:flex-start;padding:0 14px}
  .nav .nav__foot{justify-content:flex-start;padding:10px 14px}
  .nav .nav__item[data-tip]:hover::after{display:none}
  .main{margin-left:0}
  .shell.is-mini .main{margin-left:0}
  .top__hamb{display:grid}
}

@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top__search{max-width:240px}
}

@media (max-width:900px){
  .page,.page__inner{padding:var(--sp-4) var(--sp-4) 64px}
  .top{padding:0 var(--sp-4);gap:var(--sp-2)}
  .top__search{display:none}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phead{align-items:flex-start;flex-direction:column;gap:var(--sp-2)}
  .phead__actions{margin-left:0;width:100%}
  .user__meta{display:none}
  .port__label{display:none}
}

@media (max-width:620px){
  .page,.page__inner{padding:var(--sp-3) var(--sp-3) 56px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}
  .crumbs__link,.crumbs__sep{display:none}
  .port{display:none}
  h1{font-size:var(--fs-xl)}
  .phead__actions .btn{flex:1;justify-content:center}
}