/* Extracted from index.html: style-11 */
/* batch24+25: 暗色模式 + 移动端适配 */

/* ============ 暗色模式 ============ */
body.hb-dark { background:#0F1620 !important; color:#E0E6ED !important; }
body.hb-dark .topbar { background:#1A2233 !important; border-bottom-color:#2D3748 !important; }
body.hb-dark .topbar input { background:#0F1620 !important; border-color:#2D3748 !important; color:#E0E6ED !important; }
body.hb-dark .topbar input::placeholder { color:#64748B !important; }
body.hb-dark .h-card { background:#1A2233 !important; box-shadow:0 1px 3px rgba(0,0,0,.3) !important; }
body.hb-dark .h-stat-num, body.hb-dark h3, body.hb-dark h4 { color:#E0E6ED !important; }
body.hb-dark .h-stat-label, body.hb-dark .ai-tip-desc { color:#94A3B8 !important; }
body.hb-dark .ai-tip { background:#0F1620 !important; }
body.hb-dark .ai-tip-title { color:#E0E6ED !important; }
body.hb-dark .msg-row:hover { background:#0F1620 !important; }
body.hb-dark .brand-card { background:#1A2233 !important; }
body.hb-dark .brand-card.active { background:linear-gradient(135deg,#1A2D4D,#1A2233) !important; border-color:#1677FF !important; }
body.hb-dark .rank-row { border-bottom-color:#2D3748 !important; }
body.hb-dark #page-dashboard { background:#0F1620 !important; }
body.hb-dark .card { background:#1A2233 !important; color:#E0E6ED; }
body.hb-dark .card-title, body.hb-dark .page-title { color:#E0E6ED !important; }
body.hb-dark .t-table thead th { background:#0F1620 !important; color:#94A3B8 !important; border-color:#2D3748 !important; }
body.hb-dark .t-table tbody td { background:#1A2233 !important; color:#E0E6ED !important; border-color:#2D3748 !important; }
body.hb-dark input, body.hb-dark select, body.hb-dark textarea {
  background:#0F1620 !important; color:#E0E6ED !important; border-color:#2D3748 !important;
}

/* ============ 移动端 (≤768px) ============ */
@media (max-width: 768px) {
  /* 顶栏紧凑 */
  .topbar { padding:0 10px !important; height:54px !important; gap:8px !important; }
  .topbar input { font-size:12px !important; }
  .topbar .brand-switcher { display:none !important; }
  /* 顶栏隐藏部分图标 */
  .topbar [title="帮助"], .topbar [title="全屏"] { display:none !important; }
  .topbar #admin-display-name { display:none !important; }
  /* 面包屑 hide */
  #hb-breadcrumb { display:none !important; }

  /* 左侧栏变 drawer */
  .sidebar {
    position:fixed !important; top:0 !important; left:0 !important;
    height:100vh !important; z-index:9999 !important;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:0 0 30px rgba(0,0,0,.4);
  }
  .sidebar.hb-mobile-open { transform:translateX(0); }
  .hb-mobile-mask { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9998; }
  .hb-mobile-mask.show { display:block; }

  /* 主内容区 全宽 */
  .layout { display:block !important; }
  .content { padding:12px !important; }

  /* dashboard 重排 */
  #page-dashboard { padding:12px !important; }
  #page-dashboard > div[style*="grid-template-columns:1fr 280px"] { grid-template-columns:1fr !important; gap:12px !important; }
  #page-dashboard div[style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
  #page-dashboard div[style*="grid-template-columns:1.6fr 1fr"] { grid-template-columns:1fr !important; }
  #page-dashboard div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr !important; gap:10px !important; }
  #page-dashboard .brand-card { padding:12px !important; }
  #page-dashboard .brand-icon { width:44px !important; height:44px !important; font-size:22px !important; }
  #page-dashboard div[style*="display:flex"][style*="gap:14px"] { flex-direction:column !important; }
  #page-dashboard .h-stat { padding:10px 12px !important; }
  #page-dashboard .h-stat-num { font-size:18px !important; }
  #page-dashboard .h-stat-icon { width:36px !important; height:36px !important; font-size:16px !important; }
  #hb-trend-chart { height:200px !important; }
  #hb-pie-chart { height:200px !important; }
}

/* 暗色 + 移动端 通用 */
.topbar [title]:hover { background:rgba(0,0,0,.04); }
body.hb-dark .topbar [title]:hover { background:rgba(255,255,255,.08) !important; }