:root {
  /* Layout */
  --rail-width: 68px;
  --nav-width: 200px;
  --sidebar-width: calc(var(--rail-width) + var(--nav-width));
  --topbar-height: 72px;

  /* Colors - Backgrounds */
  --bg-main: #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-rail: #f5f5f5;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-hover-light: rgba(0, 0, 0, 0.02);
  --bg-active: rgba(0, 0, 0, 0.06);
  --bg-active-light: rgba(0, 0, 0, 0.04);
  --menu-active-bg: linear-gradient(
    90deg,
    rgba(124, 79, 238, 0.18) 0%,
    rgba(124, 79, 238, 0.08) 100%
  );
  --menu-active-text: #5332be;
  --menu-active-indicator: #7c4fee;
  --menu-active-shadow: inset 0 -8px 14px rgba(124, 79, 238, 0.08);
  --rail-active-bg: rgba(124, 79, 238, 0.14);
  --bg-topbar: rgba(255, 255, 255, 0.95);
  --bg-backdrop: rgba(0, 0, 0, 0.5);

  /* Colors - Text */
  --text-primary: #2d2d2d;
  --text-secondary: #656565;
  --text-muted: #94a3b8;
  --text-light: #8b95a5;
  --text-active: #c7c2c2;
  --text-white: #ffffff;
  --text-dark: #333333;

  /* Colors - UI Elements */
  --primary-color: #7c4fee;
  --accent-color: #2c3e50;
  --danger-color: #e74c3c;
  --border-color: #ebebeb;
  --tree-line-color: var(--border-color);
  --badge-bg: #6c757d;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  /* Shadows */
  --shadow-sidebar: 4px 0 20px rgba(0, 0, 0, 0.05);
  --shadow-topbar: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-rail-logo: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-badge: 0 2px 8px rgba(245, 87, 108, 0.4);

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-fast: 0.2s;
  --ease-main: cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav Item Density */
  --nav-item-padding-y: 10px;
  --nav-item-margin-y: 2px;
}

.container.compact {
  --nav-item-padding-y: 6px;
  --nav-item-margin-y: 1px;
}

/* ===== Dark Mode ===== */
.dark-mode {
  /* Backgrounds */
  --bg-main: #1a1a2e;
  --bg-sidebar: #16213e;
  --bg-rail: #0f3460;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-hover-light: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(255, 255, 255, 0.1);
  --bg-active-light: rgba(255, 255, 255, 0.08);
  --menu-active-bg: linear-gradient(
    90deg,
    rgba(124, 79, 238, 0.4) 0%,
    rgba(124, 79, 238, 0.2) 100%
  );
  --menu-active-text: #f3ecff;
  --menu-active-indicator: #c0a8ff;
  --menu-active-shadow: inset 0 -8px 14px rgba(124, 79, 238, 0.14);
  --rail-active-bg: rgba(124, 79, 238, 0.3);
  --bg-topbar: rgba(22, 33, 62, 0.95);
  --bg-backdrop: rgba(0, 0, 0, 0.7);

  /* Text */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #6b7b8d;
  --text-light: #5a6a7a;
  --text-active: #f0f0f0;
  --text-white: #1a1a2e;
  --text-dark: #d0d0d0;

  /* UI Elements */
  --accent-color: #a8c0d8;
  --border-color: rgba(255, 255, 255, 0.1);
  --tree-line-color: var(--border-color);

  /* Shadows */
  --shadow-sidebar: 4px 0 20px rgba(0, 0, 0, 0.3);
  --shadow-topbar: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-rail-logo: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Dark mode - OverlayScrollbars */
.dark-mode .os-scrollbar.os-e-theme {
  --os-track-bg: rgba(255, 255, 255, 0.03);
  --os-handle-bg: rgba(255, 255, 255, 0.15);
  --os-handle-bg-hover: rgba(255, 255, 255, 0.25);
  --os-handle-bg-active: rgba(255, 255, 255, 0.45);
}

/* Dark mode - Shimmer sweep */
.dark-mode .container.router-pending .sidebar-nav::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
}

/* Dark mode - iframe 與 loading 保持白底（外站內容不受深色模式影響） */
.dark-mode .page-iframe {
  background: #ffffff;
}

.dark-mode .loading-overlay {
  background: #ffffff;
}

/* Dark mode - Skeleton placeholders */
.dark-mode .container.router-pending .nav-header::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0 0 /
      140px 22px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0
      28px / 85px 12px no-repeat;
}

.dark-mode .container.router-pending .nav-scroll::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0
      1px / 90% 15px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      27px / 70% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      49px / 54% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      71px / 63% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0
      111px / 90% 15px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      137px / 70% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      159px / 54% 10px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)) 0px
      181px / 63% 10px no-repeat;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(-1px);
  }
  25% {
    transform: translateY(-2px);
  }
  37.5% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(0);
  }
  62.5% {
    transform: translateY(1px);
  }
  75% {
    transform: translateY(2px);
  }
  87.5% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

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

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei",
    sans-serif;
  background: var(--bg-main);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-dark);
  min-height: 100vh;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

@font-face {
  font-family: "EIP Noto Sans TC Subset";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-tc-zh-hant-700.woff2") format("woff2");
}

svg.iconify {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em; /* 這是字體圖標常用的水平對齊修正 */
  stroke-width: 1.8 !important;
}
svg.iconify [stroke-width] {
  stroke-width: inherit !important;
}

.container {
  display: flex;
  height: 100vh;
}

/* 路由初始化前隱藏會閃動的內容 */
.container.router-pending .header-content,
.container.router-pending .topbar-title-group,
.container.router-pending .nav-content {
  visibility: hidden;
}

/* Nav-header skeleton 標題佔位（靜態灰條） */
.container.router-pending .nav-header::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 18px;
  width: calc(100% - 40px);
  height: 44px;
  z-index: 1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0 0 / 140px 22px
      no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0 28px / 85px 12px
      no-repeat;
}

/* Nav-scroll skeleton 選單佔位（靜態灰條） */
.container.router-pending .nav-scroll {
  position: relative;
}

.container.router-pending .nav-scroll::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 20px;
  right: 20px;
  height: 200px;
  z-index: 1;
  background:
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0 1px / 90% 15px
      no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 27px / 70%
      10px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 49px / 54%
      10px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 71px / 63%
      10px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0 111px / 90% 15px
      no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 137px / 70%
      10px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 159px / 54%
      10px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 0px 181px / 63%
      10px no-repeat;
}

/* Shimmer 掃光效果 */
.container.router-pending .sidebar-nav {
  position: relative;
}

.container.router-pending .sidebar-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer-sweep 1.8s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 側邊欄 */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  box-shadow: var(--shadow-sidebar);
  z-index: 100;
  transition:
    transform var(--transition-speed) var(--ease-main),
    width var(--transition-speed) var(--ease-main);
  position: relative;
}

.sidebar-rail {
  width: var(--rail-width);
  background: var(--bg-rail);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 0 10px 0;
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  overflow: hidden;
  transition:
    width 0.3s ease,
    min-width 0.3s ease;
  width: var(--nav-width);
  min-width: var(--nav-width);
  opacity: 1;
}

.rail-logo {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  isolation: isolate;
  margin: 0 auto; /* 保持原有的居中設定 */
  /* 平滑過渡：確保進入動畫前沒有位移 */
  transition: transform 0.6s ease;
}

/* 3. 內部的 SVG */
.rail-logo .logo-svg {
  width: 100%;
  height: 100%;
  display: block;
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.8s ease;
}

/* 優化後的原地懸浮：起點與終點皆為 0，先下後上以消除「提高」感 */
@keyframes steady-float {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(1.5px);
  }
  75% {
    transform: translateY(-1.5px);
  }
  100% {
    transform: translateY(0);
  }
}

.logo-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--shadow-rail-logo));
}

.rail-menu {
  flex: 1; /* 佔滿剩餘空間 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

.rail-footer {
  display: flex;
  flex-direction: column;
  margin-top: auto; /* 確保推到最底部 */
}

/* 針對次要功能的 rail-item 進行輕量化 */
.rail-footer .rail-item {
  height: 35px; /* 高度縮小 */
  font-size: 20px; /* 圖示稍微縮小 */
  opacity: 0.8;
}

.rail-footer .rail-item::before {
  width: 36px; /* 懸浮底色也縮小 */
  height: 36px;
}

.rail-footer .rail-item:hover {
  opacity: 1;
  color: var(--text-active); /* 變黑 */
}

/* 移除次要功能的文字提示與位移動效 */
.rail-footer .rail-item:hover::after {
  display: none; /* 不顯示文字 */
}

.rail-footer .rail-item:hover::before {
  width: 36px; /* 保持小尺寸 */
  height: 36px;
}

.rail-footer .rail-item:hover svg.iconify {
  transform: none; /* 圖示不位移 */
}

.rail-user {
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rail-user img,
.rail-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--bg-sidebar);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  object-fit: cover;
}

.rail-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.rail-user:hover img,
.rail-user:hover .rail-user-avatar {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.rail-user.active img {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  border-color: var(--primary-color);
}

.rail-item {
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 25px;
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-main);
  position: relative;
  background: transparent;
}

.rail-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 22px;
  transition: all var(--transition-fast) var(--ease-main);
  z-index: 1;
}

.rail-item svg.iconify {
  position: relative;
  z-index: 2;
  transition: transform var(--transition-fast) var(--ease-main);
}

.rail-item::after {
  content: attr(title);
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: all var(--transition-fast) var(--ease-main);
  pointer-events: none;
  z-index: 2;
}

.rail-item:hover::before {
  background: var(--bg-hover);
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.rail-item:hover {
  color: var(--primary-color);
}

.rail-item:hover svg.iconify {
  transform: translateY(-8px);
}

.rail-item:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  bottom: 10px;
}

.rail-item.active::before {
  background: var(--rail-active-bg);
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.rail-item.active {
  color: var(--menu-active-text);
}

.rail-item.active svg.iconify {
  --iconify-secondary-opacity: 0.25;
}

.nav-header {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  flex-shrink: 0;
  padding: 5px 20px 0 20px;
  background:
    radial-gradient(
      circle at top right,
      rgba(124, 79, 238, 0.12) 0%,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(124, 79, 238, 0.07) 0%,
      rgba(124, 79, 238, 0) 72%
    ),
    var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.topbar-toggle-btn {
  position: relative;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(15, 23, 42, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  align-self: auto;
  margin-top: 0;
  opacity: 1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  backdrop-filter: none;
  transition:
    transform 120ms ease,
    border-color var(--transition-fast) var(--ease-main),
    background-color var(--transition-fast) var(--ease-main),
    box-shadow var(--transition-fast) var(--ease-main),
    color var(--transition-fast) var(--ease-main),
    opacity var(--transition-fast) var(--ease-main);
}

.topbar-toggle-btn::before {
  display: none;
}

.topbar-toggle-btn::after {
  display: none;
}

.topbar-toggle-btn:hover {
  color: rgba(15, 23, 42, 0.88);
  opacity: 1;
  border-color: rgba(15, 23, 42, 0.34);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.topbar-toggle-btn:active {
  transform: scale(0.94);
}

.topbar-toggle-btn:focus-visible {
  outline: none;
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.25),
    0 1px 3px rgba(15, 23, 42, 0.12);
}

.topbar-toggle-btn.active {
  color: rgba(15, 23, 42, 0.9);
  opacity: 1;
  border-color: rgba(15, 23, 42, 0.36);
  background: rgba(248, 250, 252, 0.95);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.topbar-toggle-line {
  display: block;
  width: 8px;
  height: 1px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  transition: transform var(--transition-fast) var(--ease-main);
  transform: translateY(-2px);
}

.topbar-toggle-btn.active .topbar-toggle-line {
  transform: translateY(2px);
}

.nav-header .topbar-toggle-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* 底部細線分隔 */
.nav-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-color);
}

.header-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.header-content::after {
  display: none;
}

/* 側邊欄收合按鈕 - nav-header 右側外掛 */
.sidebar-collapse-btn {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateX(100%) translateY(-50%);
  width: 12px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 3px 3px 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 200;
  padding: 0;
}

.sidebar-collapse-btn svg.iconify {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.sidebar.collapsed .sidebar-collapse-btn {
  background: var(--bg-rail);
}

.sidebar.collapsed .sidebar-collapse-btn svg.iconify {
  transform: rotate(180deg);
}

/* 收合狀態：只收合 sidebar-nav，保留 rail */
.sidebar.collapsed {
  width: var(--rail-width);
}

.sidebar.collapsed .sidebar-nav {
  width: 0;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}

.system-label {
  font-size: 23px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  white-space: nowrap;
  line-height: 1;
}

.system-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0px;
}

/* 模組標題使用自架字型 */
#nav-module-title {
  font-family:
    "EIP Noto Sans TC Subset",
    -apple-system,
    BlinkMacSystemFont,
    "Microsoft JhengHei",
    sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: inherit;
  background: linear-gradient(135deg, var(--text-primary) 0%, #7f5ad8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* AI 星芒裝飾 */
.ai-sparkles {
  width: 20px;
  height: 20px;
  position: relative;
  top: -7px;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease;
  filter: brightness(1.1) saturate(1.3) contrast(1.1);
}

.dark-mode .topbar-toggle-btn {
  background: rgba(22, 33, 62, 0.9);
  color: rgba(224, 231, 255, 0.78);
  border-color: rgba(224, 231, 255, 0.22);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dark-mode .topbar-toggle-line {
  background: rgba(224, 231, 255, 0.38);
}

.dark-mode .topbar-toggle-btn:hover,
.dark-mode .topbar-toggle-btn.active {
  background: rgba(30, 42, 79, 0.96);
  color: rgba(238, 242, 255, 0.95);
  border-color: rgba(224, 231, 255, 0.38);
}

.ai-sparkle-main {
  transform-origin: 7px 8px;
}

.ai-sparkle-sub {
  transform-origin: 15px 3.5px;
}

.nav-header:hover .ai-sparkle-main,
.sidebar:has(.rail-logo:hover) .ai-sparkle-main {
  animation: sparkleFlash 2.6s ease-in-out forwards;
}

.nav-header:hover .ai-sparkle-sub,
.sidebar:has(.rail-logo:hover) .ai-sparkle-sub {
  animation: sparkleFlash 2.6s ease-in-out 1s forwards;
}

@keyframes sparkleFlash {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  40% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes aiPulse {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@keyframes neonColorShift {
  0% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(0deg);
  }
  16.7% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(90deg);
  }
  33.3% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(180deg);
  }
  50% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(270deg);
  }
  66.7% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(360deg);
  }
  100% {
    filter: brightness(1.2) saturate(1.6) contrast(1.15) hue-rotate(360deg);
  }
}

.nav-header:hover .ai-sparkles,
.sidebar:has(.rail-logo:hover) .ai-sparkles {
  transform: rotate(15deg) scale(1.2);
  filter: brightness(1.35) saturate(1.8) contrast(1.25);
  animation:
    aiPulse 1.2s ease-in-out forwards,
    neonColorShift 6s linear forwards;
}

.nav-content {
  display: none;
}

.nav-content.active {
  display: block;
}

.nav-scroll {
  flex: 1;
  min-height: 0;
  background: var(--bg-sidebar);
  overflow: hidden;
}

/* OverlayScrollbars 樣式自定義 - 灰階風格 */
.os-scrollbar.os-e-theme {
  --os-size: 6px;

  --os-track-bg: rgba(0, 0, 0, 0.03);

  --os-handle-bg: rgba(0, 0, 0, 0.15); /* 中性灰 */
  --os-handle-bg-hover: rgba(0, 0, 0, 0.25); /* 懸浮深灰 */
  --os-handle-bg-active: rgba(0, 0, 0, 0.45); /* 點擊深色 */

  --os-handle-border-radius: 999px;
  --os-padding-perpendicular: 2px;
  --os-padding-axis: 4px;
}

.nav-section {
  margin-bottom: 25px;
}

.nav-section:first-child {
  margin-top: 16px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--nav-item-padding-y) 12px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition:
    background var(--transition-fast) var(--ease-main),
    color var(--transition-fast) var(--ease-main),
    box-shadow var(--transition-fast) var(--ease-main);
  gap: 10px;
  border-radius: 6px;
  margin: var(--nav-item-margin-y) 8px;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover-light);
  color: var(--primary-color);
}

.nav-item.active {
  color: var(--menu-active-text);
  background: var(--menu-active-bg);
  font-weight: 700;
  box-shadow: var(--menu-active-shadow);
}

/* 呼吸點點 - 精確定位於引導線上 */
.tree-children .nav-item.active::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 5px;
  height: 5px;
  background: var(--menu-active-indicator);
  border-radius: 50%;
  animation: float 2.8s linear infinite;
  z-index: 5;
}
.tree-children.layer3 .nav-item.active::before {
  left: 15px;
}

/* 讓作用中的色塊「跨越」在直線上 */
.tree-children .nav-item,
.tree-children .tree-header {
  margin-left: 20px;
}

.tree-children .nav-item.active,
.tree-children .nav-item:hover,
.tree-children .tree-header:hover {
  margin-left: 0px;
  padding-left: 32px;
  border-radius: 6px;
}

.nav-item svg.iconify,
.tree-header svg.iconify {
  font-size: 18px;
  transition: all var(--transition-fast) var(--ease-main);
}

.nav-item.active svg.iconify,
.nav-item:hover svg.iconify,
.tree-header:hover svg.iconify {
  opacity: 1;
}

/* 樹狀結構引導線 */
.nav-subgroup {
  position: relative;
}

.tree-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--nav-item-padding-y) 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast) var(--ease-main);
  user-select: none;
  position: relative;
  border-radius: 6px;
  margin: var(--nav-item-margin-y) 8px;
}

.tree-header:hover {
  background: var(--bg-hover-light);
  color: var(--primary-color);
}

.tree-header::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform var(--transition-fast) var(--ease-main);
}

.nav-subgroup.collapsed .tree-header::after {
  transform: rotate(-135deg);
}

.tree-children {
  position: relative;
  padding-left: 0;
  max-height: 500px;
  overflow: visible;
  transition:
    max-height 0.4s var(--ease-main),
    opacity var(--transition-speed) var(--ease-main);
  opacity: 1;
}

.tree-children.layer2 {
  margin-left: 16px;
}
.tree-children.layer2::after {
  left: 12px;
}

.tree-children.layer3 {
  margin-left: 22px;
}
.tree-children.layer3::after {
  left: 17px;
}

.tree-children::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border-color);
  z-index: 0;
  pointer-events: none;
}

.nav-subgroup.collapsed .tree-children {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-bottom: 0;
}

.tree-item {
  position: relative;
}

.nav-badge {
  margin-left: auto;
  padding: 2px 6px;
  background: var(--badge-bg);
  color: var(--text-white);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* 主要內容區 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  background: var(--bg-topbar);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  box-shadow: none;
  border-bottom: 1px solid transparent;
  z-index: 50;
  position: relative;
  padding: 0px 10px;
  transition:
    height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.topbar.topbar-visible {
  height: var(--topbar-height);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  box-shadow: var(--shadow-topbar);
  border-bottom-color: var(--border-color);
}

.topbar-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 0;
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-content {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 15px;
  min-width: 0;
}

.topbar-logo {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-color);
  flex-shrink: 0;
  cursor: pointer;
}

.topbar-logo svg.iconify {
  font-size: 24px;
}

.topbar-logo span {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.5px;
}

.topbar-title-group {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding-left: 23px;
  padding-top: 10px;
  gap: 12px;
  min-width: 0;
}

.topbar h1 {
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-clip: text;
}

.tab-bar-wrapper {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 2px;
  transition:
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar:not(.topbar-visible) .topbar-row,
.topbar:not(.topbar-visible) .tab-bar-wrapper {
  opacity: 0;
  transform: translateY(-8px);
}

.topbar.topbar-visible .topbar-row,
.topbar.topbar-visible .tab-bar-wrapper {
  opacity: 1;
  transform: translateY(0);
}

.user-dropdown {
  position: fixed;
  bottom: 20px;
  left: 80px;
  width: 260px;
  background: var(--bg-sidebar);
  border-radius: 12px;
  box-shadow: var(--shadow-dropdown);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all var(--transition-speed) var(--ease-main);
  z-index: 3000;
}

.user-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.dropdown-header {
  padding: 24px 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-avatar {
  width: 48px;
  height: 48px;
  background: var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-white);
  flex-shrink: 0;
}

.dropdown-info {
  flex: 1;
  min-width: 0;
}

.dropdown-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dropdown-email {
  font-size: 12px;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast) var(--ease-main);
  font-size: 14px;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--bg-hover-light);
}

.dropdown-item svg.iconify {
  font-size: 18px;
  color: var(--primary-color);
  width: 20px;
  text-align: center;
}

.dropdown-item.logout {
  color: var(--danger-color);
}

.dropdown-item.logout:hover {
  background: rgba(231, 76, 60, 0.08);
}

/* ===== Tab Bar ===== */

.tab-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 2px;
  flex-shrink: 0;
  font-size: 12px;
  transition: all 0.15s ease;
}

.tab-scroll-btn:hover {
  color: var(--primary-color);
}

.tab-scroll-btn:active {
  transform: scale(0.9);
}

.tab-bar {
  display: flex;
  align-items: center;
  flex: 1;
  height: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  gap: 4px;
  scrollbar-width: none; /* Firefox */
}

.tab-bar::-webkit-scrollbar {
  display: none; /* Chrome / Edge / Safari */
}

.tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
  user-select: none;
  position: relative;
  background: var(--bg-hover);
}

.tab-item:hover {
  color: var(--text-primary);
}

.tab-item.active {
  background: var(--bg-sidebar);
  color: var(--text-primary);
  font-weight: 500;
}

.tab-item-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SSO 入口頁籤：標題前綴外部連結圖示，與一般頁籤區分 */
.tab-item[data-sso="true"] .tab-item-title::before {
  content: "🔗";
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.7;
}

/* 浮動關閉按鈕 — 掛在 body 層級，不受 tab-bar overflow 裁切 */
.tab-close-float {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: var(--bg-topbar);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-shadow: 0 0 0 1px var(--border-color);
}

.tab-close-float.visible {
  opacity: 1;
  pointer-events: auto;
}

.tab-close-float:hover {
  background: var(--primary-color);
  color: var(--text-white);
}

/* 右鍵選單 */
.tab-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px;
  display: none;
}

.tab-context-menu.active {
  display: block;
}

.tab-context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-context-menu-item svg.iconify {
  font-size: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.tab-context-menu-item:hover:not(.disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.tab-context-menu-item:hover:not(.disabled) svg.iconify {
  color: var(--text-primary);
}

.tab-context-menu-item.disabled {
  opacity: 0.35;
  cursor: default;
}

.tab-context-menu-sep {
  height: 1px;
  background: var(--border-color);
  margin: 10px 8px;
}

/* 拖曳視覺回饋 */
.tab-item.dragging {
  background: var(--bg-sidebar);
  border-style: dashed;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.tab-item.drag-over-left::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--primary-color);
  border-radius: 1px;
}

.tab-item.drag-over-right::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--primary-color);
  border-radius: 1px;
}

/* iframe 內容區域 */
.content-frame {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.page-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--bg-sidebar);
  display: none;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--ease-main);
}

.page-iframe.loaded {
  opacity: 1;
}

.page-iframe:first-child {
  display: block;
}

/* 載入動畫 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  transition: opacity var(--transition-speed) var(--ease-main);
  pointer-events: none;
}

.loading-overlay.hidden {
  opacity: 0;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(102, 126, 234, 0.1);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-light);
  font-weight: 500;
}

/* 響應式設計 */

/* 平板及手機 (768px 以下) */
@media (max-width: 768px) {
  :root {
    --nav-width: 240px;
    --rail-width: 68px;
    --topbar-height: 72px;
  }

  /* 手機版隱藏側邊欄收合按鈕 */
  .sidebar-collapse-btn {
    display: none;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 2000;
    transition:
      transform var(--transition-speed) var(--ease-main),
      box-shadow var(--transition-speed) var(--ease-main);
  }

  .sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-backdrop);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--ease-main);
  }

  .sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    background: rgba(15, 23, 42, 0.05);
    border: none;
    border-radius: 10px;
    font-size: 20px;
    color: rgba(15, 23, 42, 0.7);
    cursor: pointer;
    transition: all var(--transition-fast) var(--ease-main);
  }

  .menu-toggle:hover {
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.85);
  }

  .menu-toggle:active {
    transform: translateY(-50%) scale(0.95);
  }

  .topbar {
    padding-left: 20px;
    height: var(--topbar-height);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: var(--shadow-topbar);
    border-bottom-color: var(--border-color);
  }

  .tab-bar-wrapper {
    display: none;
  }

  .topbar-content {
    padding-top: 0;
  }

  .topbar-logo {
    display: flex;
    width: 42px;
    height: 42px;
  }

  .topbar-logo .logo-svg {
    width: 100%;
    height: 100%;
  }

  .topbar h1 {
    font-size: 20px;
  }

  .topbar-title-group {
    gap: 8px;
    padding-left: 0;
    padding-top: 0;
  }

  @keyframes slideInFromTop {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .user-dropdown {
    left: 80px;
    bottom: 20px;
  }

  /* 確保手機版側邊欄能完整顯示 */
  .sidebar-nav {
    width: 100%;
  }

  .nav-header {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 18px;
  }

  /* 手機版 rail 優化 - 簡化懸浮效果 */
  .sidebar-rail {
    flex-shrink: 0;
  }

  .rail-item:hover::after {
    display: none; /* 手機版不顯示懸浮文字提示 */
  }

  .rail-item:hover svg.iconify {
    transform: none; /* 手機版不做位移動畫 */
  }

  /* 保持 active 狀態視覺回饋 */
  .rail-item.active::before {
    background: var(--rail-active-bg);
  }
}

/* 小手機 (480px 以下) */
@media (max-width: 480px) {
  :root {
    --topbar-height: 72px;
  }

  .topbar {
    padding-left: 12px;
  }

  .topbar h1 {
    font-size: 17px;
  }

  .topbar-title-group {
    gap: 6px;
  }

  .user-dropdown {
    width: 240px;
    left: 80px;
    bottom: 20px;
  }

  .dropdown-header {
    padding: 16px;
  }

  .dropdown-avatar {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .nav-header {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 16px;
  }

  .topbar-toggle-btn {
    display: none;
  }
}

/* 桌面版 */
@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }

  .sidebar-backdrop {
    display: none;
  }

  /* 桌面版強制重置側邊欄狀態 */
  .sidebar {
    position: relative;
    transform: translateX(0) !important;
    transition: none !important;
  }

  /* 確保桌面版不受手機版狀態影響 */
  body.sidebar-open .sidebar {
    transform: translateX(0) !important;
  }
}