/* ============================================================
   KAMUCL 官网预览 · 站点专属样式（启动画面 / 应用揭示 / Toast / 静态化补丁）
   —— 启动器里由 Electron 窗口与 Vue Transition 承担的部分，在网页端补齐
   ============================================================ */

/* ---------------- 页面基底：浏览器里没有系统亚克力，用主题底色 + 轻晕染 ---------------- */
body {
  background:
    radial-gradient(1100px 500px at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, var(--accent-soft), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* 视图显隐与切换 */
.view[hidden] { display: none; }
.route-view.route-in { animation: routeFade 180ms ease both; }
@keyframes routeFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .route-view.route-in { animation: none; }
}

/* 资源管理子菜单折叠（启动器里由 v-show 控制） */
.nav-sub { display: none; }
.nav-sub.expanded { display: flex; }

/* ---------------- 启动画面（splash.css 网页化移植，颜色走主题变量） ---------------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  transition: opacity 200ms ease;
}
#splash.leaving { opacity: 0; pointer-events: none; }
#splash-pixels { position: fixed; inset: 0; width: 100%; height: 100%; }
#splash-caption {
  position: fixed;
  left: 50%;
  top: calc(50% + 135px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  color: var(--text);
  font: 12px/1.5 'Segoe UI', 'Microsoft YaHei', sans-serif;
  white-space: nowrap;
}
#splash-caption strong { font-size: 19px; letter-spacing: 4px; font-weight: 650; }
#splash-skip {
  position: fixed;
  right: 18px;
  bottom: 14px;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.65;
  user-select: none;
}

/* ---------------- 主界面揭示：启动画面停留展示后渐显 ---------------- */
#app { opacity: 0; }
body.app-ready #app {
  opacity: 1;
  transition: opacity 260ms ease;
}

/* ---------------- Toast（Toasts.vue 移植） ---------------- */
.toasts {
  position: fixed;
  top: 76px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--card-solid);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  border: 1px solid var(--border);
  border-left-width: 3px;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  animation: toastIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  pointer-events: auto;
}
.toast.leaving { opacity: 0; transform: translateX(10px); transition: opacity 300ms ease, transform 300ms ease; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--cyan); }
.toast-success { border-left-color: var(--ok); }
.toast-success .toast-dot { background: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-dot { background: var(--danger); }
.toast-info { border-left-color: var(--accent); }
.toast-info .toast-dot { background: var(--accent); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------------- 网页端小修 ---------------- */
/* 搜索框在浏览器中可聚焦，去掉应用区的拖拽语义 */
.topbar { -webkit-app-region: no-drag; }
/* 链接色统一 */
a { color: var(--accent); }
::selection { background: var(--accent-soft); }