/* =========================================================
   Pellosy 暗黑模式（html.dark）
   适配 index3 / social2 / about2 / download2
   ========================================================= */

html.dark {
  color-scheme: dark;
  --paper: #0f1011;
  --paper-light: #17191a;
  --paper-dark: #0b0c0d;
  --ink: #f0efe9;
  --ink-soft: #9aa09c;
  --line: rgba(240, 239, 233, .14);
  --line-light: rgba(240, 239, 233, .22);
}

html.dark .about-page {
  --about-paper: #0f1011;
  --about-black: #f0efe9;
}

html.dark .social-page {
  --social-paper: #0f1011;
  --social-white: #f8f7f1;
  --social-black: #f0efe9;
  --social-muted: #9aa09c;
  --social-line: rgba(240, 239, 233, .16);
}

/* ---------- 基础 ---------- */

html.dark body {
  color: var(--ink);
  background: var(--paper);
}

html.dark body::before {
  opacity: .05;
}

/* ---------- 按钮（style3 系） ---------- */

html.dark .primary-button {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

html.dark .primary-button:hover {
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
}

html.dark .contact-button {
  color: var(--ink);
  border-color: var(--line-light);
}

html.dark .contact-button:hover {
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
}

html.dark .secondary-button {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

html.dark .secondary-button:hover {
  color: var(--black);
  background: transparent;
  border-color: var(--ink);
}

html.dark .contact-cta {
  color: var(--white);
  border-color: rgba(248, 247, 241, .55);
}

html.dark .contact-cta:hover {
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
}

/* ---------- 以墨色为表面的组件 ---------- */

html.dark .hero-visual-frame,
html.dark .project-image,
html.dark .phone-frame,
html.dark .dl-console,
html.dark .manifest-panel {
  background: #101112;
}

html.dark .capabilities-section {
  color: var(--white);
  background: #101112;
}

html.dark .capabilities-section .section-marker {
  color: rgba(248, 247, 241, .55);
}

html.dark .project-card:hover {
  box-shadow: 0 22px 44px rgba(0, 0, 0, .4);
}

/* ---------- Bento / 音乐区（index3） ---------- */

html.dark .bento-cell p {
  color: var(--ink-soft);
}

html.dark .bento-cell-accent p {
  color: rgba(16, 17, 18, .62);
}

html.dark .music-features li small {
  color: var(--ink-soft);
}

html.dark .music-features li {
  color: var(--ink);
}

/* ---------- 认证菜单 ---------- */

html.dark .auth-menu a:hover,
html.dark .auth-menu button:hover {
  color: var(--black);
  background: var(--acid);
}

/* ---------- 右键控制台（固定深色） ---------- */

html.dark .pellosy-menu {
  color: var(--white);
  background:
    linear-gradient(
      120deg,
      rgba(255, 104, 72, .12),
      transparent 42%
    ),
    #101112;
  border-color: rgba(248, 247, 241, .22);
  box-shadow: 10px 10px 0 var(--orange);
}

html.dark .menu-item {
  color: rgba(248, 247, 241, .82);
}

html.dark .menu-item:hover {
  color: var(--black);
  background: var(--acid);
}

html.dark .menu-item.is-danger:hover {
  color: var(--white);
  background: var(--orange);
}

/* ---------- 暗黑模式切换按钮 ---------- */

.dark-toggle {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 16px;
  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .25s var(--ease);
}

.dark-toggle:hover {
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .dark-toggle {
    width: 38px;
    height: 38px;
  }
}

/* ---------- 下载中心（download3.css） ---------- */

html.dark .download-button {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

html.dark .download-button:hover {
  color: var(--black);
  background: var(--acid);
  border-color: var(--acid);
}

html.dark .download-button.is-downloaded {
  color: var(--ink-soft);
  background: transparent;
}

html.dark .category-button.is-active {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

html.dark .outline-button:hover {
  color: var(--black);
  background: var(--white);
  border-color: var(--white);
}

html.dark .resource-card:hover {
  box-shadow: 10px 12px 0 rgba(0, 0, 0, .45);
}

html.dark .manifest-panel {
  color: var(--white);
}

/* ---------- 关于页（about2） ---------- */

html.dark .about-marquee-section,
html.dark .about-not-section {
  color: var(--about-paper);
  background: #16181a;
}

html.dark .about-opening-mark {
  background: var(--paper);
}

/* ---------- 社交页（social2） ---------- */

html.dark .social-page {
  color: var(--social-black);
  background: var(--social-paper);
}

html.dark .social-header {
  background: #101112;
}

html.dark .composer-console,
html.dark .trend-panel,
html.dark .people-panel {
  background: #16181a;
}

html.dark .signal-panel {
  background: rgba(240, 239, 233, .05);
}

html.dark .signal-panel,
html.dark .trend-panel,
html.dark .people-panel {
  border-color: var(--social-line);
}

html.dark .composer-main textarea,
html.dark .reply-form textarea {
  color: var(--social-black);
  background: rgba(240, 239, 233, .07);
  border-color: var(--social-line);
}

html.dark .composer-main textarea::placeholder,
html.dark .reply-form textarea::placeholder {
  color: rgba(240, 239, 233, .4);
}

html.dark .reply-modal-window {
  color: var(--social-black);
  background: var(--social-paper);
}

html.dark .profile-menu {
  color: var(--social-black);
  background: #16181a;
  border-color: rgba(248, 247, 241, .28);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .45);
}

html.dark .profile-menu a:hover,
html.dark .profile-menu button:hover {
  color: var(--social-white);
  background: var(--social-orange);
}

html.dark .profile-menu-head {
  border-bottom-color: var(--social-line);
}

html.dark .reply-item {
  color: var(--social-black);
}

html.dark .social-header .dark-toggle {
  color: var(--social-white);
  border-color: rgba(248, 247, 241, .25);
}

html.dark .social-header .dark-toggle:hover {
  color: var(--social-black);
  background: var(--social-yellow);
  border-color: var(--social-yellow);
}