/* ============================================================
   console.css — 控制台布局（B3）
   ============================================================ */
#console-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
.cs-side { background: var(--bg-elevated); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; }
.cs-brand { height: var(--header-h); display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-5); font-weight: 800; border-bottom: 1px solid var(--border); }
.cs-brand .logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--c-primary), var(--c-accent)); }
.cs-tenant { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.cs-tenant select, .cs-role select { width: 100%; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); }
.cs-nav { padding: var(--sp-3); overflow-y: auto; flex: 1; }
.cs-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.cs-nav a:hover { background: var(--surface-2); color: var(--text); }
.cs-nav a.active { background: var(--c-primary-soft); color: var(--c-primary); }
.cs-nav a .dot { margin-left: auto; font-size: 10px; }
.cs-main { display: flex; flex-direction: column; min-width: 0; }
.cs-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; z-index: 20; }
.cs-top .crumbs { font-weight: 700; }
.cs-top .right { display: flex; align-items: center; gap: var(--sp-3); }
.cs-content { padding: var(--sp-5); }
.cs-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.cs-page-head h1 { font-size: var(--fs-22); font-weight: 800; }
.cs-page-head p { color: var(--text-2); }

/* 移动端抽屉 */
.cs-menu-btn { display: none; }
@media (max-width: 860px) {
  #console-shell { grid-template-columns: 1fr; }
  .cs-side { position: fixed; z-index: 100; width: 248px; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--sh-3); }
  .cs-side.open { transform: translateX(0); }
  .cs-menu-btn { display: inline-flex; }
  .cs-overlay { display: none; position: fixed; inset: 0; background: rgba(8,12,20,.5); z-index: 99; }
  .cs-overlay.show { display: block; }
}
/* 通用：控制台内网格 */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-4, .cards-3, .cards-2 { grid-template-columns: 1fr; } }
.col-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); align-items: start; }
@media (max-width: 980px) { .col-split { grid-template-columns: 1fr; } }