/* ===== Notion-like minimal + light/dark (compat) ===== */
:root{
  --sidebar:260px;
  /* 紧凑宽度：约只让“直方图（自动分箱）”出现省略号，可微调 148~160px */
  --sidebar-compact:150px;

  --radius:6px;

  /* 工具组占位：由 JS 写入“展开时真实高度” */
  --controls-h: 64px;
  --controls-gap: 18px;

  /* light */
  --bg:#ffffff; --surface:#ffffff; --fg:#111827; --muted:#6b7280;
  --primary:#2563eb; --border:#e5e7eb; --table-header:#f8fafc;
  --glass: rgba(255,255,255,.05);
}
:root[data-theme="dark"]{
  --bg:#0f172a; --surface:#0b1222; --fg:#e5e7eb; --muted:#a3aab7;
  --primary:#60a5fa; --border:rgba(255,255,255,.16); --table-header:rgba(255,255,255,.06);
  --glass: rgba(11,18,34,.05);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
       Roboto, Helvetica, Arial, "PingFang SC","Noto Sans SC","Microsoft YaHei", sans-serif;
}

/* ===== Layout ===== */
.app{
  display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh;
}
body.sidebar-compact .app{
  grid-template-columns:var(--sidebar-compact) 1fr;
}

.sidebar{
  position:sticky; top:0; height:100vh; padding:16px;
  border-right:1px solid var(--border);
  /* 兼容：直接使用主题表面色作为侧栏背景，避免 color-mix 兼容问题 */
  background:var(--surface);
  display:flex; flex-direction:column;
  /* 放慢到 1.1s，更柔和 */
  transition:
    transform 1.1s cubic-bezier(.22,.7,.18,1),
    width     1.1s cubic-bezier(.22,.7,.18,1);
  position:relative;
  overflow:hidden;
}

/* 品牌区：把手对齐用的定位上下文 */
.brand{
  position:relative;
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.brand h1{ margin:0; font-size:18px; font-weight:700; letter-spacing:.2px; white-space:nowrap }

/* 圆形 DL 徽章（仅紧凑时显示） */
.brand .badge-dl{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; letter-spacing:.5px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
}

/* 紧凑：隐藏“Data Lab”文字，只显示 DL 徽章 + 小号主题按钮 */
body.sidebar-compact .brand h1{ display:none }
body.sidebar-compact .brand .badge-dl{ display:flex }
body.sidebar-compact .theme-toggle{ padding:6px; width:34px; height:34px; border-radius:50%; font-size:14px }

/* 展开：显示“Data Lab”文字，隐藏 DL 徽章，主题按钮用常规样式 */
body:not(.sidebar-compact) .brand .badge-dl{ display:none }
body:not(.sidebar-compact) .theme-toggle{ padding:6px 10px; font-size:12px; width:auto; height:auto }

/* 侧栏把手（与 Data Lab 同行垂直对齐，放在品牌区内部） */
#sidebarPin{
  position:absolute;               /* 相对 .brand 定位 */
  top:50%;                         /* 垂直居中 */
  right:8px;
  transform:translateY(-50%);
  z-index:1100;

  border:1px solid var(--border);
  background:var(--surface);
  color:var(--fg);
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}

/* 导航与子菜单（单行省略号） */
.nav{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:0 }
.nav-item{ border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden }
.nav-head{
  padding:10px 12px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
}
.nav-head .title{ display:flex; align-items:center; gap:8px; min-width:0; width:100% }
.nav-head .title span{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-item:hover .nav-head{ background:var(--table-header) }
.submenu{
  border-top:1px solid var(--border); padding:0 8px 0 18px;
  max-height:0; opacity:0; transform:translateY(-2px);
  overflow:hidden;
  transition:max-height .2s ease, opacity .2s ease, transform .2s ease, padding .2s ease;
}
.nav-item.open .submenu{ padding:6px 8px 10px 18px; max-height:420px; opacity:1; transform:translateY(0) }
.submenu a{
  display:block; padding:6px 8px; border-radius:6px; color:inherit; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.submenu a:hover{ background:var(--table-header) }

.nav-footer{ margin-top:12px }
.nav-footer .btn.small{ padding:6px 10px; font-size:12px }

/* 主内容为工具组留白：按“展开时高度 + 18px”，不随折叠变化 */
.main{
  padding:18px;
  padding-top:calc(var(--controls-h) + var(--controls-gap)) !important;
}

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px }
.h{ margin:0 0 8px; font-size:18px; font-weight:600 }
.muted{ color:var(--muted) }

/* ===== 按钮/输入 ===== */
.inline{ display:flex; align-items:center; gap:6px }
.badge,.chip{ border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:var(--muted); background:var(--surface) }
.chip{ padding:2px 8px }
.btn{ appearance:none; border:1px solid var(--border); background:var(--primary); color:#fff; padding:8px 12px; border-radius:var(--radius); cursor:pointer; font-weight:600; box-shadow:none }
.btn.secondary{ background:var(--surface); color:var(--fg) }
.btn.ghost{ background:transparent; color:var(--primary); border-color:transparent }
.btn:hover{ filter:brightness(0.98) }
.btn.sm{ padding:6px 10px; font-size:13px }
input[type=file], select, input, textarea{ border:1px solid var(--border); background:var(--surface); color:var(--fg); padding:8px 10px; border-radius:var(--radius) }
select.sm, input.sm{ padding:6px 8px; font-size:13px }
.w-72{ width:72px }

/* ===== 表格 ===== */
table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--surface) }
th,td{ border:1px solid var(--border); padding:6px 8px; text-align:left }
th{ background:var(--table-header) }
.grid{ display:grid; gap:12px }
.sep{ height:1px; background:var(--border); margin:12px 0 }
.kbd{ font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--fg); background:var(--table-header); padding:2px 6px; border-radius:6px; border:1px solid var(--border) }
.pass{ color:#16a34a }.fail{ color:#dc2626 }

/* ===== 悬浮工具组（玻璃） ===== */
.controls-wrap{
  position:fixed; top:12px; left:calc(var(--sidebar) + 24px); right:24px; z-index:50;
  pointer-events:none;                /* 外层不拦点击 */
  transition:left .3s ease;
}
body.sidebar-compact .controls-wrap{
  left:calc(var(--sidebar-compact) + 24px);
}
.controls{
  pointer-events:auto;                /* 内层可交互 */
  background:var(--glass);
  backdrop-filter:saturate(120%) blur(10px);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition: transform 1.1s cubic-bezier(.22,.7,.18,1), opacity 1.1s ease, visibility 1.1s;
  transform-origin:right center; /* 收扇子效果 */
}
.controls-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; white-space:nowrap }
.control-toggle.tiny{
  margin-left:auto; border:1px solid var(--border);
  background:var(--surface); color:var(--fg);
  padding:4px 8px; border-radius:var(--radius);
  font-size:12px; line-height:1; cursor:pointer;
}
#controlsWrap.is-collapsed .controls{
  transform:perspective(900px) rotateY(-16deg) scaleX(.86) translateX(26%);
  opacity:0; visibility:hidden;
}

/* 固定右上工具组把手：坐标锁死 */
#controlsHandle{
  position:fixed; top:14px; right:18px; z-index:1200;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  padding:6px 10px; border-radius:6px; font-size:12px; line-height:1; cursor:pointer; box-shadow:none;
}
body:not(.controls-collapsed) #controlsHandle{ opacity:0; pointer-events:none }
body.controls-collapsed      #controlsHandle{ opacity:.95 }

/* ===== 响应式 ===== */
@media (max-width:1000px){
  :root{ --sidebar:220px; --sidebar-compact:120px }
  .controls-wrap{ left:calc(var(--sidebar) + 12px); right:12px }
  body.sidebar-compact .controls-wrap{ left:calc(var(--sidebar-compact) + 12px) }
}
@media (max-width:900px){
  .app{ grid-template-columns:1fr }
  :root{ --sidebar:0px; --sidebar-compact:0px }
  .controls-wrap{ left:12px; right:12px }
}

/* ===== 兜底：永不阻挡点击（即使前面某处语法出错也不至于整页失效） ===== */
#controlsWrap{ pointer-events: none !important; }
#controlsWrap .controls{ pointer-events: auto !important; }