/* ============================================================
   layout.css — 外壳 / 侧栏 / 顶栏 / 页面骨架
   ============================================================ */

.app{display:flex;min-height:100vh}

/* ============================ 侧边导航 ============================ */
.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--nav);color:var(--nav-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  border-right:1px solid #0C1119;z-index:40;
}
.brand{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid #222B39}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--ctf-red-2),var(--ctf-red-deep));color:var(--ctf-red-ink);
  font-weight:800;font-size:11.5px;letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(10,14,20,.45), inset 0 1px 0 rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.08);
}
.brand-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.brand-txt strong{color:#F0F2F6;font-size:13px;font-weight:650;letter-spacing:.01em}
.brand-txt span{color:var(--nav-ink-2);font-size:11px}

.nav{flex:1;overflow-y:auto;padding:10px 8px 16px}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:#2B3648;border:none;border-radius:6px}
.nav-group{margin-bottom:12px}
.nav-group-t{
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#8E99AB;
  padding:6px 10px 5px;text-transform:uppercase;
}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;
  font-size:12.5px;color:var(--nav-ink);margin-bottom:1px;position:relative;
  transition:background .14s,color .14s;
}
.nav-item .ico{width:15px;height:15px;color:#77839A;transition:color .14s;flex:none}
.nav-item:hover{background:var(--nav-2);color:#EAEDF2}
.nav-item:hover .ico{color:#AAB4C4}
.nav-item.is-active{background:var(--nav-3);color:#FFF;font-weight:600}
.nav-item.is-active .ico{color:var(--gold-2)}
.nav-item.is-active::before{
  content:"";position:absolute;left:-8px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;
  background:var(--ctf-red-2);
}
.nav-badge{
  margin-left:auto;font-style:normal;font-size:11px;font-weight:700;
  background:#3A2E13;color:var(--gold-2);padding:1px 6px;border-radius:20px;
  border:1px solid #4C3C19;
}
.nav-badge-warn{background:#40321A;color:#E0B05F;border-color:#55421F}
.nav-badge-bad{background:#40201C;color:#E49385;border-color:#5A2C25}

.sidebar-foot{padding:10px 14px 12px;border-top:1px solid #222B39;font-size:11px;color:var(--nav-ink-2)}
.sf-row{display:flex;align-items:center;gap:7px;padding:2.5px 0}
.sf-val{margin-left:auto;color:#9AA5B6}
.sf-foot{margin-top:8px;padding-top:8px;border-top:1px solid #222B39;color:#8E99AB;font-size:11px;letter-spacing:.03em}
.sf-foot::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:linear-gradient(145deg,var(--ctf-red-2),var(--ctf-red-deep));margin-right:6px;vertical-align:-1px}

/* ============================ 主区 ============================ */
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* —— 顶栏 —— */
.topbar{
  height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:14px;
  padding:0 22px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
}
.nav-toggle{display:none}
.crumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);min-width:0}
.crumb-mod{color:var(--ink-3)}
.crumb strong{color:var(--ink);font-weight:650}
.crumb-sep{width:13px;height:13px;color:var(--ink-4)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.dd{position:relative}
.dd-btn{
  display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-2);
  transition:border-color .15s,background .15s;
}
.dd-btn:hover{border-color:#D2CCBD;background:var(--surface-2)}
.dd-k{color:var(--ink-4);font-size:11px}
.dd-v{font-weight:650;color:var(--ink)}
.dd-btn .ico{width:14px;height:14px;color:var(--ink-4)}
.dd-user .avatar{
  width:21px;height:21px;border-radius:6px;background:var(--gold-soft);color:var(--gold-ink);
  display:grid;place-items:center;font-size:11px;font-weight:700;border:1px solid var(--gold-line);
}
.dd-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:216px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-2);padding:5px;
  display:none;z-index:60;
}
.dd.is-open .dd-menu{display:block}
.dd-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border-radius:6px;
  font-size:12.5px;color:var(--ink-2);text-align:left;
}
.dd-item:hover{background:var(--surface-3);color:var(--ink)}
.dd-item em{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-4)}
.dd-item.is-on{color:var(--ink);font-weight:650}
.dd-dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.dd-dot-dim{background:var(--ink-4)}
.dd-head{padding:8px 9px 9px;border-bottom:1px solid var(--line-2);margin-bottom:4px;display:flex;flex-direction:column}
.dd-head strong{font-size:13px}
.dd-head span{font-size:11px;color:var(--ink-3)}
.pip{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--bad);border:1.5px solid #fff}

/* ============================ 视图容器 ============================ */
.view{flex:1;padding:20px 24px 56px;max-width:1560px;width:100%;margin:0 auto}

.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.page-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.page-mod{
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--gold-ink);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:2px 8px;border-radius:20px;
}
.page-desc{margin-top:5px;font-size:12.5px;color:var(--ink-3);max-width:820px}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}

/* ============================ 栅格 ============================ */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.g-1-1-1{grid-template-columns:repeat(3,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.span6{grid-column:span 6}

/* ============================ 响应式 ============================ */
@media (max-width:1380px){
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1120px){
  .g3,.g-2-1,.g-1-2,.g-3-2,.g-1-1-1{grid-template-columns:1fr}
  .span2,.span3,.span6{grid-column:auto}
}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-3)}
  .sidebar.is-open{transform:none}
  .nav-toggle{display:inline-flex}
  .g2,.g4,.g6{grid-template-columns:1fr}
  .view{padding:16px 14px 48px}
  .topbar{padding:0 12px}
}