/* ===== Design Tokens — 3 color themes ===== */
:root {
  --color0: #DEDEDE;              /* bg */
  --color1: #1E5EFF;              /* primary */
  --color2: #0CFD00;              /* secondary */
  --color3: #FFED25;              /* accent */
  --color4: #FF40B9;              /* pop */
  --color0-overlay: rgba(222,222,222,0.6);
  --color1-faded: rgba(30,94,255,0.35);
  --color1-light: rgba(30,94,255,0.2);
  --color1-mid:   rgba(30,94,255,0.5);

  --color-black:          #111111;
  --color-white:          #FBFBFB;
  --color-secondary-text: #898989;
  --color5-secondary-green: #E1FCDF;
  --color6-secondary-blue:  #80D0FF;
  --color7-selecting-blue:  #5485FF;
}
html[data-theme="orange"] {
  --color0: #B6C5AD;
  --color1: #F37100;
  --color2: #1D2AD5;
  --color3: #049D59;
  --color4: #0ED57D;
  --color0-overlay: rgba(182,197,173,0.6);
  --color1-faded: rgba(243,113,0,0.35);
  --color1-light: rgba(243,113,0,0.2);
  --color1-mid:   rgba(243,113,0,0.5);
  --color5-secondary-green: #BDC378;
  --color6-secondary-blue:  #FF9940;
  --color7-selecting-blue:  #FF9940;
}
html[data-theme="purple"] {
  --color0: #DED9E6;
  --color1: #793AE3;
  --color2: #B4FF1D;
  --color3: #B591EF;
  --color4: #F418DE;
  --color0-overlay: rgba(222,217,230,0.6);
  --color1-faded: rgba(121,58,227,0.35);
  --color1-light: rgba(121,58,227,0.2);
  --color1-mid:   rgba(121,58,227,0.5);
  --color5-secondary-green: #BADF72;
  --color6-secondary-blue:  #A772FF;
  --color7-selecting-blue:  #A772FF;
}

/* ===== Disable selection / long-press save / drag ===== */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* disable iOS/Android long-press context menu on all elements */
  -webkit-touch-callout: none;
}

img, video {
  /* prevent drag-to-save on desktop */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* restore pointer-events for interactive images (links, buttons) */
a img, button img, [role="button"] img {
  pointer-events: auto;
}

/* ===== Custom Cursor ===== */
/* 默认 */
html,
body {
  cursor: url("../assets/cursor/cursor-default.svg") 2 2, auto;
}
/* 可点击 */
a,
button,
[role="button"],
.nav a,
.folderLink,
.folderLink *,
.folderCard,
.folderCard *,
.expandedFolderBackLink,
.projectCard,
.projectCard * {
  cursor: url("../assets/cursor/cursor-pointer.svg") 6 2, pointer;
}
/* 文本输入 */
input,
textarea,
[contenteditable="true"] {
  cursor: url("../assets/cursor/cursor-text.svg") 12 12, text;
}
/* 禁用 */
[disabled],
.is-disabled,
.disabled {
  cursor: url("../assets/cursor/cursor-not-allowed.svg") 12 12, not-allowed;
}
/* 加载中 */
.is-loading,
.loading,
[aria-busy="true"] {
  cursor: url("../assets/cursor/cursor-wait.svg") 12 12, wait;
}
/* 拖拽 */
.global,
.global canvas,
.draggable {
  cursor: url("../assets/cursor/cursor-grab.svg") 12 12, grab;
}
.global:active,
.global:active canvas,
.draggable:active {
  cursor: url("../assets/cursor/cursor-grabbing.svg") 12 12, grabbing;
}
/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {
  margin: 0 auto;
  width: min(1240px, calc(100% - 40px));
}
/* 导航栏 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  z-index: 9999;
  background: var(--color0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 1.56vw, 20px);
  box-sizing: border-box;
}
.navLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.navDiceBtn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: url("../assets/cursor/cursor-pointer.svg") 6 2, pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav .logo {
  width: clamp(120px, 11.56vw, 148px);
  height: auto;
  flex-shrink: 0;
}
.nav .logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.nav .right ul {
  display: flex;
  gap: clamp(20px, 3.9vw, 50px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav .right ul li a {
  position: relative;
  display: inline-block;
  padding: 4px 6px;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--color-black);
}
.nav .right ul li a span {
  position: relative;
  display: inline-block;
  font-size: clamp(15px, 1.41vw, 18px);
  line-height: 1;
}
.nav .right ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 1.5px;
  background-color: var(--color1);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}
.nav .right ul li a:hover::after {
  transform: scaleX(1);
}
.nav .right ul li a::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 7px;
  height: 7px;
  background: var(--color-white);
  border: 1.5px solid var(--color1);
  box-sizing: border-box;
  display: none;
}
.nav .right ul li a .cornerTopRight {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 7px;
  height: 7px;
  background: var(--color-white);
  border: 1.5px solid var(--color1);
  box-sizing: border-box;
  display: none;
}
.nav .right ul li a span::before {
  content: '';
  position: absolute;
  left: -10px;
  bottom: -8px;
  width: 7px;
  height: 7px;
  background: var(--color-white);
  border: 1.5px solid var(--color1);
  box-sizing: border-box;
  display: none;
}
.nav .right ul li a span::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: -8px;
  width: 7px;
  height: 7px;
  background: var(--color-white);
  border: 1.5px solid var(--color1);
  box-sizing: border-box;
  display: none;
}
.nav .right ul li.active a {
  border-color: var(--color1);
}
.nav .right ul li.active a::after {
  transform: scaleX(1);
}
.nav .right ul li.active a::before {
  display: block;
}
.nav .right ul li.active a .cornerTopRight {
  display: block;
}
.nav .right ul li.active a span::before {
  display: block;
}
.nav .right ul li.active a span::after {
  display: block;
}
/* ── Nav action buttons ── */
.nav .right {
  display: flex;
  align-items: center;
}
.navMusicBtn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: url("../assets/cursor/cursor-pointer.svg") 6 2, pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: 60px;
}
.navMusicIcon {
  width: 20px;
  height: 20px;
  display: block;
}
.navMusicBars {
  width: 20px;
  height: 16px;
  display: none;
  align-items: flex-end;
  gap: 2px;
}
.navMusicBars .bar {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background-color: var(--color1);
  transform-origin: bottom center;
}
.navMusicBtn.isPaused .navMusicIcon { display: block; }
.navMusicBtn.isPaused .navMusicBars { display: none; }
.navMusicBtn.isPlaying .navMusicIcon { display: none; }
.navMusicBtn.isPlaying .navMusicBars { display: flex; }
.navMusicBtn.isPlaying .navMusicBars .bar:nth-child(1) { animation: musicBounce1 0.9s ease-in-out infinite; }
.navMusicBtn.isPlaying .navMusicBars .bar:nth-child(2) { animation: musicBounce2 0.7s ease-in-out infinite; }
.navMusicBtn.isPlaying .navMusicBars .bar:nth-child(3) { animation: musicBounce3 1.0s ease-in-out infinite; }
.navMusicBtn.isPlaying .navMusicBars .bar:nth-child(4) { animation: musicBounce2 0.8s ease-in-out infinite; }
.navMusicBtn.isPlaying .navMusicBars .bar:nth-child(5) { animation: musicBounce1 0.6s ease-in-out infinite; }
@keyframes musicBounce1 {
  0%, 100% { transform: scaleY(1); }
  25% { transform: scaleY(1.8); }
  50% { transform: scaleY(0.9); }
  75% { transform: scaleY(1.4); }
}
@keyframes musicBounce2 {
  0%, 100% { transform: scaleY(1.2); }
  25% { transform: scaleY(0.8); }
  50% { transform: scaleY(1.9); }
  75% { transform: scaleY(1.1); }
}
@keyframes musicBounce3 {
  0%, 100% { transform: scaleY(0.9); }
  20% { transform: scaleY(1.6); }
  40% { transform: scaleY(1.1); }
  60% { transform: scaleY(2); }
  80% { transform: scaleY(1.3); }
}
.navLangBtn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: url("../assets/cursor/cursor-pointer.svg") 6 2, pointer;
  padding: 0;
  flex-shrink: 0;
  margin-left: 8px;
}
.navLangCircle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color0);
  user-select: none;
  transition: background 0.15s ease;
}
.navLangBtn.isZh .navLangCircle {
  background: var(--color4);
}
/* 首页导航栏透明 —— 一定要写在 .nav 外面 */
.home .nav {
  background: transparent;
  backdrop-filter: none;
}
/* ===============================
   Responsive - common
================================= */
@media (max-width: 1200px) {
  .wrapper {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .nav {
    padding: 0 24px;
  }
  .nav .logo {
    width: 132px;
  }
  .nav .right ul {
    gap: 32px;
  }
  .nav .right ul li a span {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .wrapper {
    padding: 0 16px;
  }
  .nav {
    height: 64px;
    padding: 0 16px;
  }
  .nav .logo {
    width: 112px;
  }
  .nav .right ul {
    gap: 16px;
  }
  .nav .right li a {
    padding: 2px 4px;
  }
  .nav .right li a span {
    font-size: 13px;
  }
  .navLeft {
    gap: 8px;
  }
  .navMusicBtn {
    margin-left: 20px;
  }
}
/* ── Settings Panel ── */
.settingsPanel {
  position: fixed;
  left: 0;
  top: 80px;
  width: 350px;
  height: calc(100vh - 80px);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 60px 20px 40px;
  box-sizing: border-box;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.3s;
  z-index: 9997;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.settingsPanel.isOpen {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}
.settingsSectionTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-black);
  margin: 0 0 10px 0;
}
.colorOptions {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.colorOption {
  width: 100px;
  height: 52px;
  background: var(--color0);
  border-radius: 4px;
  padding: 10px;
  border: 1.4px solid transparent;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}
.colorOption.isSelected {
  border-color: var(--color1);
}
.colorOption img {
  width: 36px;
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
}
.colorOption span {
  font-size: 7px;
  font-weight: 400;
  color: var(--color-secondary-text);
  line-height: 1.3;
}
/* ── Part 3: congrui ── */
.profileOptions {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.profileOption {
  width: 100px;
  height: 38px;
  background: var(--color0);
  border-radius: 4px;
  padding: 6px;
  border: 1.4px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.profileOption.isSelected {
  border-color: var(--color1);
}
.profileOption img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  pointer-events: none;
}
/* ── Panel Action Buttons ── */
.settingsActions {
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.settingsBtn {
  width: 148px;
  height: 27px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  padding: 0;
  box-sizing: border-box;
}
.settingsBtnSave {
  background: var(--color3);
  color: var(--color1);
}
.settingsBtnDefault {
  background: var(--color0);
  color: var(--color1);
}
.settingsBtnCancel {
  background: transparent;
  color: var(--color-secondary-text);
  border: 1px solid var(--color1);
}
/* ── Part 2: Particle Rain ── */
.settingsSection + .settingsSection {
  margin-top: 20px;
}
.particleRow {
  display: flex;
  gap: 3px;
}
.particleRow + .particleRow {
  margin-top: 4px;
}
.particleOption {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  padding: 0;
}
.particleBase {
  width: 100%;
  height: 38px;
  background: var(--color0);
  border-radius: 3px;
  border: 1.4px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.particleOption.isSelected .particleBase {
  border-color: var(--color1);
}
.particleOption.isPink.isSelected .particleBase {
  border-color: #FF40B9;
}
.particleBase img {
  max-width: 20px;
  max-height: 20px;
  width: auto;
  height: auto;
  pointer-events: none;
}
.particleLabel {
  font-size: 7px;
  font-weight: 400;
  color: var(--color-secondary-text);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (max-width: 768px) {
  .settingsPanel {
    top: 64px;
    width: 100%;
    height: calc(100svh - 64px);
    padding-bottom: 60px;
  }
}
@media (max-width: 420px) {
  .navLeft {
    gap: 4px;
  }
  .nav .logo {
    width: 92px;
  }
  .nav .right ul {
    gap: 10px;
  }
  .nav .right li a span {
    font-size: 11px;
  }
  .navMusicBtn {
    margin-left: 8px;
    width: 26px;
    height: 26px;
  }
  .navLangBtn {
    margin-left: 4px;
    width: 26px;
    height: 26px;
  }
  .navLangCircle {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
}