/* ============================================================
   布局：外壳 / 侧边栏 / 顶栏 / 视图区
   ============================================================ */
.app{
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  height:100vh;
  transition:grid-template-columns .28s var(--ease);
}
.app.is-collapsed{grid-template-columns:var(--sb-w-collapsed) 1fr;}

/* ───────── 侧边栏 ───────── */
.sidebar{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--surface-2);
  color:var(--ink-600);
  overflow:hidden;
  border-right:1px solid var(--line);
  z-index:40;
}

.brand{display:flex;align-items:center;gap: 10px;padding: 12px 16px;position:relative;z-index:1;}
.brand__mark{
  width:34px;height:34px;border-radius: 8px;flex:none;
  background:linear-gradient(140deg,#8B5CFF,#7539FF 55%,#5B21D6);
  display:grid;place-items:center;
  box-shadow:0 4px 12px -4px rgba(117,57,255,.65);
}
.brand__mark svg{width:20px;height:20px;}
.brand__text{min-width:0;}
.brand__name{font-size: 16px;font-weight:700;color:var(--ink-900);letter-spacing:-.01em;white-space:nowrap;}
.brand__name span{color:var(--pri);}
.brand__sub{font-size: 11px;color:var(--ink-400);letter-spacing:.02em;white-space:nowrap;margin-top: 2px;}

.org-switch{
  position:relative;z-index:1;
  margin:4px 14px 12px;padding: 8px 10px;
  display:flex;align-items:center;gap: 8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r-md);
  cursor:pointer;transition:.2s var(--ease);
  box-shadow:var(--sh-1);
}
.org-switch:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);}
.org-switch__avatar{
  width:28px;height:28px;border-radius: 8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#8B5CFF,#5B21D6);color:#fff;font-size: 12px;font-weight:600;
}
.org-switch__body{min-width:0;flex:1;}
.org-switch__name{font-size: 12px;color:var(--ink-900);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.org-switch__meta{font-size: 10px;color:var(--ink-400);display:flex;align-items:center;gap: 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top: 2px;}
.org-switch__chev{width:14px;height:14px;color:var(--ink-400);flex:none;}

.nav{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding: 0 12px 12px;position:relative;z-index:1;
}
.nav__group{margin-bottom: 2px;}
.nav__label{
  font-size: 10px;font-weight:700;letter-spacing:.12em;color:var(--ink-400);
  padding: 12px 10px 6px;text-transform:uppercase;
}
.nav__item{
  position:relative;display:flex;align-items:center;gap: 10px;
  padding: 8px 10px;border-radius: var(--r-md);
  color:var(--ink-600);font-size: 13px;font-weight:500;
  cursor:pointer;transition:.16s var(--ease);
  white-space:nowrap;margin-bottom: 2px;
}
.nav__item svg{width:17px;height:17px;flex:none;opacity:.85;transition:.16s;}
.nav__item:hover{background:rgba(117,57,255,.07);color:var(--ink-900);}
.nav__item:hover svg{opacity:1;color:var(--pri);}
.nav__item.is-active{
  background:var(--surface);color:var(--pri);font-weight:600;
  box-shadow:0 1px 3px rgba(93,104,114,.12);
}
.nav__item.is-active svg{opacity:1;color:var(--pri);}
.nav__item.is-active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius: 0 4px 4px 0;
  background:var(--pri);
}
.nav__badge{
  margin-left:auto;font-size: 10px;font-weight:600;
  padding: 2px 6px;border-radius: var(--r-full);
  background:var(--pri-100);color:var(--pri);
  border:1px solid var(--pri-200);
}

.sidebar__foot{position:relative;z-index:1;flex:none;padding: 12px 12px 12px;border-top:1px solid var(--line);}
.plan-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius: var(--r-md);padding: 12px 12px;margin-bottom: 10px;
  box-shadow:var(--sh-1);
}
.plan-card__row{display:flex;align-items:center;justify-content:space-between;margin-bottom: 8px;}
.plan-card__badge{
  font-size: 10px;font-weight:700;letter-spacing:.06em;color:var(--pri);
  background:var(--pri-100);border:1px solid var(--pri-200);
  padding: 1.5px 6px;border-radius: var(--r-xs);
}
.plan-card__ver{font-size: 10px;color:var(--ink-400);font-family:var(--ff-num);}
.plan-card__title{font-size: 12px;color:var(--ink-800);font-weight:600;}
.plan-card__meta{font-size: 10px;color:var(--ink-400);margin-top: 4px;}
.plan-card__meta span{color:var(--ok);font-weight:700;font-family:var(--ff-num);}
.meter{height:4px;border-radius: 999px;background:var(--ink-100);margin-top: 8px;overflow:hidden;}
.meter i{display:block;height:100%;border-radius: 999px;background:linear-gradient(90deg,#27AE60,#4FD08A);}

.user-chip{display:flex;align-items:center;gap: 8px;padding: 6px 4px;border-radius: var(--r-md);transition:.16s;}
.user-chip:hover{background:rgba(117,57,255,.07);}
.user-chip__avatar{
  width:30px;height:30px;border-radius: 50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#8B5CFF,#5B21D6);color:#fff;font-size: 12px;font-weight:600;
}
.user-chip__body{min-width:0;flex:1;}
.user-chip__name{font-size: 12px;color:var(--ink-900);font-weight:600;}
.user-chip__role{font-size: 10px;color:var(--ink-400);}
.user-chip__btn{width:26px;height:26px;border-radius: var(--r-sm);color:var(--ink-400);display:grid;place-items:center;transition:.16s;}
.user-chip__btn:hover{background:var(--ink-100);color:var(--ink-700);}
.user-chip__btn svg{width:15px;height:15px;}

/* 折叠态 */
.app.is-collapsed .brand__text,
.app.is-collapsed .org-switch__body,
.app.is-collapsed .org-switch__chev,
.app.is-collapsed .nav__label,
.app.is-collapsed .nav__item span,
.app.is-collapsed .nav__badge,
.app.is-collapsed .plan-card,
.app.is-collapsed .user-chip__body,
.app.is-collapsed .user-chip__btn{display:none;}
.app.is-collapsed .brand{justify-content:center;padding: 12px 0;}
.app.is-collapsed .org-switch{margin:4px 12px 12px;justify-content:center;padding: 8px 0;}
.app.is-collapsed .nav__item{justify-content:center;padding: 10px 0;}
.app.is-collapsed .sidebar__foot{padding: 12px 10px 12px;}
.app.is-collapsed .user-chip{justify-content:center;}

/* ───────── 主区域 ───────── */
.main{display:flex;flex-direction:column;min-width:0;height:100vh;background:var(--canvas);}

.topbar{
  height:var(--tb-h);flex:none;
  display:flex;align-items:center;justify-content:space-between;gap: 16px;
  padding: 0 20px 0 12px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  z-index:30;
}
.topbar__left{display:flex;align-items:center;gap: 10px;min-width:0;}
.topbar__right{display:flex;align-items:center;gap: 8px;}
.topbar__divider{width:1px;height:22px;background:var(--line);margin:0 2px;}

.crumb{display:flex;align-items:center;gap: 8px;font-size: 13px;min-width:0;}
.crumb__item{color:var(--ink-500);white-space:nowrap;}
.crumb__item:last-child{color:var(--ink-900);font-weight:600;}
.crumb__sep{color:var(--ink-300);font-size: 11px;}
.crumb__tag{
  font-size: 10px;font-weight:700;letter-spacing:.06em;
  padding: 2px 8px;border-radius: var(--r-xs);
  background:var(--pri-100);color:var(--pri);
  border:1px solid var(--pri-200);
}

.icon-btn{
  width:32px;height:32px;border-radius: var(--r-md);flex:none;
  display:grid;place-items:center;color:var(--ink-500);
  transition:.16s var(--ease);position:relative;
}
.icon-btn svg{width:17px;height:17px;}
.icon-btn:hover{background:var(--ink-100);color:var(--ink-900);}
.icon-btn--dot::after{
  content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius: 50%;
  background:var(--dang);border:1.5px solid #fff;
}

.omni{
  display:flex;align-items:center;gap: 8px;
  height:34px;padding: 0 8px 0 12px;border-radius: var(--r-md);
  background:var(--surface-2);border:1px solid transparent;color:var(--ink-400);font-size: 13px;transition:.18s var(--ease);
  min-width:280px;
}
.omni:hover{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-1);}
.omni__ico{width:15px;height:15px;flex:none;}
.omni__txt{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.omni__kbd{
  font-family:var(--ff-num);font-size: 10px;color:var(--ink-400);
  border:1px solid var(--line);border-bottom-width:2px;border-radius: var(--r-xs);
  padding: 2px 4px;background:#fff;
}

.switch{
  display:flex;align-items:center;gap: 8px;
  height:34px;padding: 0 12px;border-radius: var(--r-md);
  font-size: 13px;color:var(--ink-600);cursor:pointer;
  border:1px solid transparent;transition:.18s var(--ease);user-select:none;
}
.switch:hover{background:var(--ink-100);color:var(--ink-900);}
.switch__ico{width:15px;height:15px;color:var(--ink-400);}
.switch__track{
  width:30px;height:17px;border-radius: 999px;background:var(--ink-200);
  position:relative;display:block;transition:.2s var(--ease);flex:none;
}
.switch__track b{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius: 50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);
  transition:.2s var(--ease);
}
.switch.is-on{color:var(--pri);background:var(--pri-100);border-color:var(--pri-200);}
.switch.is-on .switch__ico{color:var(--pri);}
.switch.is-on .switch__track{background:var(--pri);}
.switch.is-on .switch__track b{transform:translateX(13px);}

/* ───────── 视图区 ───────── */
.view{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding: 20px 24px 40px;
  scroll-behavior:smooth;
}
.view.is-animating{animation:viewIn .3s var(--ease-out);}
/* 仅做位移，不做透明度动画：避免页面在后台渲染时动画被暂停，导致内容显示为半透明 */
@keyframes viewIn{from{transform:translateY(8px);}to{transform:none;}}

/* 页面头 */
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap: 20px;
  margin-bottom: 16px;flex-wrap:wrap;
}
.page-head__l{min-width:0;}
.page-head__title{
  font-size: 20px;font-weight:700;color:var(--ink-900);letter-spacing:-.015em;
  display:flex;align-items:center;gap: 8px;line-height: 1.2;
}
.page-head__title .tagline{
  font-size: 11px;font-weight:600;color:var(--ink-400);letter-spacing:.04em;
  border:1px solid var(--line);border-radius: var(--r-xs);padding: 2px 6px;
}
.page-head__desc{font-size: 13px;color:var(--ink-500);margin-top: 6px;max-width:860px;line-height: 1.6;}
.page-head__r{display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}

/* 页签条：左页签 + 右侧元信息，避免整条空置 */
.page-bar{
  display:flex;align-items:center;gap: 16px;
  background:var(--surface);border:1px solid var(--line);
  border-radius: var(--r-lg);padding: 4px 12px 4px 4px;
  margin-bottom: 16px;box-shadow:var(--sh-1);
}
.subtabs{display:flex;align-items:center;gap: 2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.subtabs::-webkit-scrollbar{display:none;}
.subtab{
  position:relative;white-space:nowrap;
  padding: 8px 12px;border-radius: var(--r-md);
  font-size: 13px;color:var(--ink-500);font-weight:500;
  cursor:pointer;transition:.16s var(--ease);
  display:flex;align-items:center;gap: 6px;
}
.subtab:hover{color:var(--ink-900);background:var(--ink-050);}
.subtab.is-active{
  background:var(--pri-100);color:var(--pri);font-weight:600;
}
.subtab.is-active .subtab__n{background:var(--pri);color:#fff;}
.subtab__n{
  font-size: 10px;font-weight:700;padding: 2px 6px;border-radius: var(--r-full);
  background:var(--ink-100);color:var(--ink-500);min-width:18px;text-align:center;
  font-family:var(--ff-num);
}
.subtab__n--hot{background:var(--dang-100);color:var(--dang);}
.subtab.is-active .subtab__n--hot{background:var(--dang);color:#fff;}
.page-bar__meta{
  display:flex;align-items:center;gap: 10px;flex:none;
  font-size: 12px;color:var(--ink-400);white-space:nowrap;
  padding-left: 12px;border-left:1px solid var(--line);
}
.page-bar__meta b{color:var(--ink-700);font-weight:600;font-family:var(--ff-num);}

/* 栅格 */
.grid{display:grid;gap: 16px;}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr));}
.grid--6{grid-template-columns:repeat(6,minmax(0,1fr));}
.grid--23{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.grid--32{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
.grid--13{grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
.grid--12-12-12{grid-template-columns:repeat(3,minmax(0,1fr));}

@media (max-width:1500px){
  .grid--6{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1240px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid--3,.grid--23,.grid--32,.grid--13{grid-template-columns:minmax(0,1fr);}
  .grid--6{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .grid--2{grid-template-columns:minmax(0,1fr);}
  .view{padding: 16px 12px 32px;}
}

/* ───────── 窄屏适配 ───────── */
.switch,.crumb__item,.crumb__sep,.omni,.topbar__right{white-space:nowrap;}

@media (max-width:1400px){
  .omni{min-width:210px;}
}
@media (max-width:1180px){
  .omni__txt{display:none;}
  .omni{min-width:auto;padding: 0 8px;}
  .omni__kbd{display:none;}
  .switch span{display:none;}
  .switch{padding: 0 8px;}
}
@media (max-width:1000px){
  .app{grid-template-columns:var(--sb-w-collapsed) 1fr;}
  .sidebar .brand__text,
  .sidebar .org-switch__body,
  .sidebar .org-switch__chev,
  .sidebar .nav__label,
  .sidebar .nav__item span,
  .sidebar .nav__badge,
  .sidebar .plan-card,
  .sidebar .user-chip__body,
  .sidebar .user-chip__btn{display:none;}
  .sidebar .brand{justify-content:center;padding: 12px 0;}
  .sidebar .org-switch{margin:4px 12px 12px;justify-content:center;padding: 8px 0;}
  .sidebar .nav__item{justify-content:center;padding: 10px 0;}
  .sidebar .sidebar__foot{padding: 12px 10px 12px;}
  .sidebar .user-chip{justify-content:center;}
  .crumb__tag{display:none;}
  .page-bar__meta{display:none;}
}
@media (max-width:780px){
  .grid--4,.grid--5,.grid--6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid--12-12-12{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-head__title{font-size: 18px;}
  .view{padding: 12px 12px 28px;}
  .modal-veil{padding: 12px;}
  .modal{width:100%;max-height:calc(100vh - 24px);}
  .modal__foot{flex-wrap:wrap;}
  .modal__foot .btn{flex:1;}
  .modal__foot .foot-l{flex-basis:100%;}
}
@media (max-width:600px){
  .grid--3,.grid--4,.grid--5,.grid--6,.grid--12-12-12{grid-template-columns:minmax(0,1fr);}
  .topbar{padding-right: 12px;}
}