/* ========== 全局布局 ========== */
/* 概念图风格：奶油米色渐变背景 + 浮动面板 + 极简 Hero */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  /* 核心：奶油米色渐变（来自概念图） */
  background: 
    radial-gradient(ellipse at top left, #F8F2E0 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, #FAF6E8 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-page-top) 0%, var(--bg-page-bottom) 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}

/* ---- 浮动顶栏 ---- */
/* 关键：对齐到 8px 网格。
   - left/right 都为 --floating-offset (16px)，与侧边栏、工作区共享同一条左基线。
   - 不再使用 left:50% + transform 居中，避免脱离网格。 */

.topbar {
  position: fixed;
  top: var(--floating-offset);
  left: var(--floating-offset);
  right: var(--floating-offset);
  height: var(--topbar-height);
  z-index: 100;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--grid-unit) * 3);  /* 24px → 8 倍数 */
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

.topbar:hover {
  box-shadow: var(--shadow-lg);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-md) 0 var(--space-lg);  /* 16px / 24px — 全部 8 倍数 */
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);  /* 16px */
}

.topbar-logo {
  display: block;
  border-radius: var(--grid-half);
}

.topbar-brand {
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.topbar-divider {
  width: 1px;
  height: var(--space-md);  /* 16px */
  background: var(--border-subtle);
  margin: 0 var(--grid-half);
}

.topbar-title {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-xs);  /* 4px — 仅按钮之间紧凑 */
}

.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-item-size);  /* 40px = 5u */
  height: var(--sidebar-item-size);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 
    color var(--duration-normal) var(--ease-smooth),
    background var(--duration-normal) var(--ease-smooth);
}

.topbar-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* ---- 浮动侧边栏 ---- */
/* 关键：top = floating-offset + topbar-height + floating-gap (16+48+16=80px)，
   让侧边栏的顶部与工作区顶部严格对齐到同一水平基线。 */

.sidebar {
  position: fixed;
  top: calc(var(--floating-offset) + var(--topbar-height) + var(--floating-gap));
  left: var(--floating-offset);
  width: var(--sidebar-width);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md) 0;  /* 16px — 8 倍数 */
  gap: var(--space-xs);        /* 4px — 按钮间紧凑 */
}

/* Sidebar 顶部"快速开始"小标签 */
.sidebar-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
  width: 32px;
  text-align: center;
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

/* ---- 主工作区容器 ---- */
/* 关键：top/left 与侧边栏完全对齐到同一基线；
   right/bottom 也对齐到 8px 网格。 */

.workspace {
  position: fixed;
  top: calc(var(--floating-offset) + var(--topbar-height) + var(--floating-gap));
  left: calc(var(--floating-offset) + var(--sidebar-width) + var(--floating-gap));
  right: var(--floating-offset);
  bottom: var(--floating-offset);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);  /* 24/24/48 — 8 倍数 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: bottom var(--duration-normal) var(--ease-smooth);
}

.workspace.log-expanded {
  bottom: calc(var(--floating-offset) + var(--log-drawer-max-height) + var(--grid-unit));  /* 16px */
}

.workspace::-webkit-scrollbar {
  width: 6px;
}
.workspace::-webkit-scrollbar-track {
  background: transparent;
}
.workspace::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 3px;
}
.workspace::-webkit-scrollbar-thumb:hover {
  background: var(--border-default);
}

/* ---- Hero 极简化（Awwwards 建议：弱化或去掉） ---- */
/* 改为：极简 eyebrow 小条 + 大标题 + 副标题（不要"开始使用"按钮） */

.hero {
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: var(--workspace-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.hero-title {
  font-size: var(--font-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  line-height: 1.15;
}

.hero-subtitle {
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--text-secondary);
}

/* 当工作区展开时，Hero 进一步缩小 */
.workspace.has-work .hero {
  margin-bottom: var(--space-xl);
}

.workspace.has-work .hero-title {
  font-size: var(--font-2xl);
}

.workspace.has-work .hero-subtitle {
  font-size: var(--font-sm);
}