/* ═══════════════════════════════════════════════════════════════════
   白昼森林 · 工作台
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --wb-bg-mist:       #F5F7F6;
  --wb-bg-paper:      #F7F6F2;
  --wb-bg-card:       rgba(255, 255, 255, 0.52);
  --wb-moss-deep:     #2F4F44;
  --wb-moss-mid:      #4A6B5D;
  --wb-mint-glass:    rgba(168, 208, 186, 0.38);
  --wb-mint-edge:     rgba(143, 175, 158, 0.55);
  --wb-mist-border:   rgba(143, 175, 158, 0.28);
  --wb-mist-text:     #8B9A94;
  --wb-mist-faint:    rgba(139, 154, 148, 0.45);
  --wb-dawn-spark:    rgba(240, 230, 206, 0.85);
  --wb-ink-logo:      #1A2420;
  --wb-shadow-soft:   0 18px 48px rgba(47, 79, 68, 0.06);
  --wb-ease:          cubic-bezier(0.4, 0, 0.2, 1);
}

.workbench {
  overflow: hidden;
  height: 100%;
  padding: 0;
  background: var(--wb-bg-mist);
}

#pane-dashboard.workbench {
  display: block;
}

.workbench-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(168, 208, 186, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 20%, rgba(232, 220, 196, 0.65) 0%, transparent 50%),
    linear-gradient(180deg, var(--wb-bg-paper) 0%, var(--wb-bg-mist) 42%, var(--wb-bg-mist) 100%);
  position: relative;
}

.workbench-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.workbench-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 8px;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.tree-scene {
  position: relative;
  width: min(480px, 90vw);
  height: min(500px, 58vh);
  perspective: 960px;
}

.tree-group {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: wbTreeBreathe 7s var(--wb-ease) infinite;
}

@keyframes wbTreeBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .tree-group { animation: none; }
  .tree-shadow { animation: none; }
  .light-orb { animation: none; }
  .leaf-diamond.swaying { animation: none !important; }
}

.crown-glow {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 82%;
  height: 62%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(168, 208, 186, 0.16) 0%,
    rgba(143, 175, 158, 0.06) 55%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.tree-shadow {
  position: absolute;
  bottom: 4%;
  left: 50%;
  width: 72%;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(47,79,68,0.11) 0%, transparent 72%);
  filter: blur(12px);
  animation: wbShadowBreathe 7s var(--wb-ease) infinite;
}

@keyframes wbShadowBreathe {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 0.5; transform: translateX(-50%) scaleX(0.94); }
}

.stem {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 4px;
  height: 28%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(143,175,158,0.62) 0%,
    rgba(120,155,135,0.38) 45%,
    rgba(168,208,186,0.22) 80%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(168,208,186,0.22);
  z-index: 1;
}

.petiole-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.petiole-svg line {
  stroke: rgba(143, 175, 158, 0.42);
  stroke-width: 0.35;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.crown-mosaic {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 92%;
  height: 76%;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  perspective: 960px;
  z-index: 2;
}

.leaf-slot {
  position: absolute;
  width: 0;
  height: 0;
  z-index: var(--z, 1);
  transform-style: preserve-3d;
  transform: translateZ(var(--depth-z, 0px));
}

.leaf-diamond {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lw, 48px);
  height: var(--lh, 66px);
  padding: 0;
  border: none;
  background: none;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  overflow: hidden;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(1.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.45);
  filter: drop-shadow(0 3px 10px rgba(74, 107, 93, 0.12));
  transition: filter 0.35s var(--wb-ease);
  --mx: 40%;
  --my: 36%;
  --glint: 0.32;
  touch-action: manipulation;
}

@media (prefers-reduced-transparency: reduce) {
  .leaf-diamond {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.75);
  }
}

.leaf-diamond:focus { outline: none; }
.leaf-diamond:focus-visible {
  filter: drop-shadow(0 0 0 2px var(--wb-moss-mid)) drop-shadow(0 3px 10px rgba(74, 107, 93, 0.12));
}

.leaf-diamond::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255,255,255,0.82) 0%,
      var(--wb-dawn-spark) 12%,
      var(--wb-mint-glass) 28%,
      transparent 54%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 3;
  opacity: var(--glint, 0.32);
  transition: opacity 0.35s var(--wb-ease);
}

.leaf-diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(168,208,186,0.32) 0%, transparent 42%),
    linear-gradient(315deg, rgba(74,107,93,0.10) 0%, transparent 38%);
  pointer-events: none;
  z-index: 1;
}

.leaf-diamond .leaf-body {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(158deg,
      rgba(255,255,255,0.58) 0%,
      rgba(168,208,186,0.30) 32%,
      rgba(143,175,158,0.24) 68%,
      rgba(255,255,255,0.16) 100%);
  opacity: var(--leaf-op, 0.94);
}

.leaf-diamond .leaf-vein {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(143,175,158,0.28) 49.5%, rgba(143,175,158,0.28) 50.5%, transparent 51.5%),
    linear-gradient(0deg, transparent 48.5%, rgba(143,175,158,0.22) 49.5%, rgba(143,175,158,0.22) 50.5%, transparent 51.5%);
  opacity: 0.55;
}

.leaf-diamond .leaf-fold {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(175deg,
    transparent 50%,
    rgba(47, 79, 68, 0.06) 75%,
    rgba(47, 79, 68, 0.10) 100%);
  z-index: 2;
  opacity: var(--fold, 0.35);
}

.leaf-diamond.swaying,
.leaf-diamond.is-active {
  animation: planeWobble var(--sway-dur, 2.4s) ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(74, 107, 93, 0.16));
  --glint: 1;
}

@keyframes planeWobble {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg))
      rotateX(0deg) rotateY(0deg);
  }
  30% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg))
      rotateX(5deg) rotateY(-6deg);
  }
  60% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg))
      rotateX(-4deg) rotateY(5deg);
  }
  85% {
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg))
      rotateX(2deg) rotateY(-3deg);
  }
}

.light-orb {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 15%;
  right: 10%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--wb-dawn-spark) 0%,
    rgba(232,220,196,0.2) 40%,
    transparent 70%);
  filter: blur(24px);
  opacity: 0.55;
  pointer-events: none;
  animation: wbOrbDrift 12s var(--wb-ease) infinite alternate;
}

@keyframes wbOrbDrift {
  from { transform: translate(0, 0); opacity: 0.45; }
  to   { transform: translate(-12px, 8px); opacity: 0.65; }
}

.workbench-launcher {
  flex-shrink: 0;
  padding: 4px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.workbench-launcher-card {
  position: relative;
  min-width: min(260px, 88vw);
  padding: 18px 32px;
  border: 1px solid var(--wb-mist-border);
  border-radius: 12px;
  background: var(--wb-bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--wb-shadow-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wb-moss-deep);
  transition: border-color 300ms var(--wb-ease), box-shadow 300ms var(--wb-ease);
}

.workbench-launcher-card::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-moss-mid);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform 300ms var(--wb-ease), opacity 300ms var(--wb-ease);
  box-shadow: 0 0 8px rgba(74, 107, 93, 0.35);
}

.workbench-launcher-card:hover {
  border-color: var(--wb-mint-edge);
  box-shadow: 0 20px 44px rgba(47, 79, 68, 0.08);
}

.workbench-launcher-card:hover::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

.workbench-launcher-card:focus { outline: none; }
.workbench-launcher-card:focus-visible {
  border-color: var(--wb-moss-mid);
  box-shadow: 0 0 0 3px rgba(74, 107, 93, 0.2);
}

.workbench-launcher-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--wb-mist-faint);
  letter-spacing: 0.04em;
}

.workbench-footer {
  flex-shrink: 0;
  padding: 8px 24px 22px;
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--wb-mist-faint);
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .workbench-stage { padding: 12px 16px 4px; }
  .tree-scene { height: min(440px, 52vh); }
}

@media (hover: none) {
  .workbench-launcher-hint::after {
    content: " · 轻触叶片感受偏光";
  }
}

/* ── 应用顶栏（白昼森林 / 工作流双态） ─────────────────────────── */
.app-header.is-home {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(168, 208, 186, 0.14) 0%, transparent 55%),
    linear-gradient(180deg, var(--wb-bg-paper) 0%, var(--wb-bg-mist) 100%);
  border-bottom: none;
}

.app-header.is-workflow {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.app-nav {
  padding: 28px 32px 12px;
  border-bottom: none;
}

.app-header.is-workflow .app-nav {
  padding: 12px 24px;
}

.app-brand-block {
  flex-shrink: 0;
}

.app-brand-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: default;
  font-family: inherit;
  text-align: left;
  transition: opacity 200ms var(--wb-ease);
}

.app-header.is-workflow .app-brand-btn {
  cursor: pointer;
}

.app-header.is-workflow .app-brand-btn:hover {
  opacity: 0.72;
}

.app-header.is-workflow .app-brand-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 107, 93, 0.2);
  border-radius: 6px;
}

.app-logo {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wb-ink-logo);
  line-height: 1.3;
}

.app-logo-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wb-mist-faint);
  line-height: 1.3;
}

.app-header.is-home .kb-link {
  color: var(--wb-mist-text);
}

.app-header.is-home .kb-link:hover,
.app-header.is-home .kb-link.open {
  background: rgba(255, 255, 255, 0.45);
  color: var(--wb-moss-deep);
}

.app-header.is-home .kb-link-count {
  color: var(--wb-mist-faint);
}

.app-header.is-home .kb-link:hover .kb-link-count,
.app-header.is-home .kb-link.open .kb-link-count {
  color: var(--wb-mist-text);
}

.app-header.is-home .user-menu-btn {
  border-color: var(--wb-mist-border);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-header.is-home .user-menu-btn:hover,
.app-header.is-home .user-menu-btn.open {
  border-color: var(--wb-mint-edge);
  box-shadow: var(--wb-shadow-soft);
}

.app-header.is-home .user-menu-avatar {
  background: rgba(168, 208, 186, 0.35);
  color: var(--wb-moss-deep);
}

@media (max-width: 720px) {
  .app-nav { padding: 20px 20px 10px; }
  .app-header.is-workflow .app-nav { padding: 10px 16px; }
  .app-logo-sub { font-size: 10px; }
}