/* 方太 · 研发营销一体化平台 — 共享样式 (Liquid Glass / 液态玻璃) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; }

body {
  font-family: 'Noto Sans SC', sans-serif;
  color: #eef0fb;
  background:
    radial-gradient(640px 420px at 10% 6%, rgba(99,102,241,0.30), transparent 60%),
    radial-gradient(560px 460px at 94% 92%, rgba(225,29,72,0.20), transparent 60%),
    radial-gradient(720px 520px at 82% 2%, rgba(139,92,246,0.20), transparent 55%),
    linear-gradient(160deg, #0b1020, #0c1027 55%, #0a0f24);
  background-attachment: fixed;
}

/* ── 玻璃容器 ── */
.glass-panel {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 30px rgba(4,6,20,0.45);
}

/* 内容卡片 — 磨砂玻璃 */
.data-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 28px rgba(4,6,20,0.40);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.data-card:hover {
  border-color: rgba(165,180,252,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 12px 36px rgba(4,6,20,0.5);
  transform: translateY(-1px);
}

.ai-glow { box-shadow: 0 0 18px rgba(224,105,125,0.28); }
.glow-indigo { box-shadow: 0 0 24px rgba(99,102,241,0.45); }

/* 斑马条纹（暗底） */
.zebra-row:nth-child(even) { background-color: rgba(255,255,255,0.03); }
.zebra-row:nth-child(odd)  { background-color: transparent; }

/* 滚动条 */
.scroll-hidden::-webkit-scrollbar { display: none; }
.scroll-hidden { -ms-overflow-style: none; scrollbar-width: none; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: rgba(165,180,252,0.28); border-radius: 9999px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; }
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* ── 表单元素（暗色玻璃） ── */
input, select, textarea {
  color: #eef0fb;
}
input::placeholder, textarea::placeholder { color: #8089ad; }
select option { background: #131838; color: #eef0fb; }
input[type="text"], input[type="search"], select, textarea {
  background-color: rgba(255,255,255,0.06);
  border-color: rgba(165,180,252,0.22);
}
input:focus, select:focus, textarea:focus { border-color: #fb5070; }
.form-checkbox { background-color: rgba(255,255,255,0.08); border-color: rgba(165,180,252,0.4); }
.form-checkbox:checked { background-color: #fb5070; border-color: #fb5070; }

/* ── 侧栏导航 ── */
.nav-link {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-radius: 0.625rem;
  color: #aab2d5; transition: all 0.18s ease;
  border: 1px solid transparent;
}
.nav-link:hover { background: rgba(255,255,255,0.06); color: #eef0fb; }
.nav-link.active {
  background: rgba(99,102,241,0.20);
  color: #dfe3ff;
  border-color: rgba(165,180,252,0.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 20px rgba(99,102,241,0.28);
}
.nav-link.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; color: #c7d0ff; }

/* ── 渐入 ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease both; }

/* ── 移动端抽屉 ── */
#app-sidebar { transition: transform 0.28s ease; }
@media (max-width: 767px) {
  #app-sidebar { transform: translateX(-100%); box-shadow: 0 0 50px rgba(0,0,0,0.6); }
  #app-sidebar.open { transform: translateX(0); }
}
#nav-backdrop {
  position: fixed; inset: 0; background: rgba(6,8,22,0.55); backdrop-filter: blur(2px); z-index: 39;
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
#nav-backdrop.open { opacity: 1; pointer-events: auto; }

/* ── AI 设计实验室渲染景深 ── */
.render-vignette { box-shadow: inset 0 0 130px 28px rgba(0,0,0,0.42); pointer-events: none; }
.render-floor-shadow {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  width: 46%; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  filter: blur(3px); pointer-events: none;
}

/* ── Toast ── */
#toast-root { position: fixed; top: 76px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: rgba(20,24,56,0.82); backdrop-filter: blur(16px); color: #eef0fb;
  padding: 10px 16px; border-radius: 0.625rem; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 32px rgba(4,6,20,0.5); display: flex; align-items: center; gap: 8px;
  animation: fadeUp 0.25s ease both;
}
.toast.ok { border-left: 3px solid #34d399; }
.toast.info { border-left: 3px solid #818cf8; }

/* 尊重减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}