/* Opus：靛紫晨昏。柔光大圆角与铜色点缀，浅色为瓷白冷紫，深色为午夜靛与月华紫。 */
/* 规则尽量只依赖语义变量，深色仅在基础样式写死浅色时才单独覆盖。 */
:root[data-ui-theme="opus"] {
  color-scheme: light;
  --bg: #f4f4fa;
  --surface: #ffffff;
  --surface-soft: #edecf8;
  --text: #1d1b2e;
  --muted: #63607d;
  --line: #e2e0f0;
  --accent: #4c3fa8;
  --accent-strong: #362b80;
  --sun: #c4823c;
  --blue: #3c6ea8;
  --red: #c1526a;
  --shadow: 0 20px 54px rgba(38, 32, 78, 0.1);
  --shadow-soft: 0 10px 28px rgba(38, 32, 78, 0.06);
  --radius: 18px;
  --theme-accent-fill: #4c3fa8;
  --theme-accent-fill-hover: #3b2f92;
  --theme-accent-on-fill: #ffffff;
  --opus-copper: #c4823c;
  --opus-glow: rgba(76, 63, 168, 0.16);
  --opus-veil: rgba(76, 63, 168, 0.07);
  --opus-ink: #241f45;
  --opus-ink-deep: #1b1738;
}

:root[data-ui-theme="opus"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0c1a;
  --surface: #17142a;
  --surface-soft: #201d38;
  --text: #ecebf8;
  --muted: #a29ec2;
  --line: #2f2b4d;
  --accent: #a99bf7;
  --accent-strong: #cdc4ff;
  --sun: #e0a967;
  --blue: #8db6e8;
  --red: #f0879e;
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.34);
  --theme-accent-fill: #5b4bd6;
  --theme-accent-fill-hover: #6c5cea;
  --theme-accent-on-fill: #f8f6ff;
  --opus-copper: #e0a967;
  --opus-glow: rgba(169, 155, 247, 0.2);
  --opus-veil: rgba(169, 155, 247, 0.1);
  --opus-ink: #221d42;
  --opus-ink-deep: #100e20;
}

:root[data-ui-theme="opus"] body {
  background:
    radial-gradient(980px 460px at 100% -12%, var(--opus-glow), transparent 62%),
    radial-gradient(860px 460px at -8% 2%, color-mix(in srgb, var(--opus-copper) 14%, transparent), transparent 58%),
    var(--bg);
}

:root[data-ui-theme="opus"] h1,
:root[data-ui-theme="opus"] h2,
:root[data-ui-theme="opus"] h3 {
  letter-spacing: -0.018em;
}

:root[data-ui-theme="opus"] ::selection {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--text);
}

:root[data-ui-theme="opus"] button:focus-visible,
:root[data-ui-theme="opus"] a:focus-visible,
:root[data-ui-theme="opus"] input:focus-visible,
:root[data-ui-theme="opus"] select:focus-visible,
:root[data-ui-theme="opus"] textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 3px;
}

:root[data-ui-theme="opus"] .sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface) 62%);
  border-right-color: var(--line);
}

:root[data-ui-theme="opus"] .portal-header {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px var(--opus-veil);
}

:root[data-ui-theme="opus"] .home-search-shell .topbar-search-panel,
:root[data-ui-theme="opus"] .mobile-tabs,
:root[data-ui-theme="opus"] .submit-navigation {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

:root[data-ui-theme="opus"] .brand-mark,
:root[data-ui-theme="opus"] .portal-brand-mark {
  background: linear-gradient(150deg, #6a5ad4 0%, #3b2f92 68%);
  border: 1px solid color-mix(in srgb, var(--opus-copper) 34%, transparent);
  box-shadow: 0 12px 28px rgba(38, 32, 78, 0.26);
}

:root[data-ui-theme="opus"] .brand-mark-sun {
  background: var(--opus-copper);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--opus-copper) 18%, transparent),
    0 0 14px color-mix(in srgb, var(--opus-copper) 46%, transparent);
}

:root[data-ui-theme="opus"] .brand-mark-gate {
  border-color: rgba(248, 246, 255, 0.9);
  border-radius: 16px 16px 3px 3px;
}

:root[data-ui-theme="opus"] .brand-mark-gate::before,
:root[data-ui-theme="opus"] .brand-mark-gate::after {
  background: rgba(248, 246, 255, 0.9);
}

:root[data-ui-theme="opus"] .eyebrow {
  color: var(--accent);
  letter-spacing: 0.14em;
}

:root[data-ui-theme="opus"] .nav-item.active,
:root[data-ui-theme="opus"] .nav-item:hover,
:root[data-ui-theme="opus"] .portal-nav-item.active,
:root[data-ui-theme="opus"] .portal-nav-item:hover,
:root[data-ui-theme="opus"] .mobile-tabs button.active,
:root[data-ui-theme="opus"] .community-tab.active,
:root[data-ui-theme="opus"] .home-search-toggle:hover,
:root[data-ui-theme="opus"] .home-search-shell.is-open .home-search-toggle {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

:root[data-ui-theme="opus"] .primary-button,
:root[data-ui-theme="opus"] .auth-page .wide,
:root[data-ui-theme="opus"] .submit-steps button.is-active,
:root[data-ui-theme="opus"] .message-chat-row.is-mine .message-chat-bubble {
  border-color: var(--theme-accent-fill);
  background: var(--theme-accent-fill);
  color: var(--theme-accent-on-fill);
}

:root[data-ui-theme="opus"] .primary-button {
  border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-accent-fill) 26%, transparent);
}

:root[data-ui-theme="opus"] .primary-button:hover,
:root[data-ui-theme="opus"] .auth-page .wide:hover {
  background: var(--theme-accent-fill-hover);
}

:root[data-ui-theme="opus"] .text-button {
  color: var(--accent);
}

:root[data-ui-theme="opus"] .home-hero-card {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background:
    radial-gradient(540px 280px at 12% -6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%),
    radial-gradient(420px 260px at 100% 108%, color-mix(in srgb, var(--opus-copper) 18%, transparent), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow);
}

:root[data-ui-theme="opus"] .home-hero-card::after {
  background: var(--opus-veil);
}

:root[data-ui-theme="opus"] .home-hero-card p:not(.eyebrow) {
  color: var(--muted);
}

:root[data-ui-theme="opus"] .home-hero-trust span {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--accent-strong);
}

:root[data-ui-theme="opus"] .eyebrow-dot {
  background: var(--opus-copper);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--opus-copper) 16%, transparent);
}

:root[data-ui-theme="opus"] .motif-sun {
  background: linear-gradient(145deg, #e8bb84, #c4823c);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--opus-copper) 30%, transparent),
    0 0 0 12px color-mix(in srgb, var(--accent) 7%, transparent);
}

:root[data-ui-theme="opus"] .motif-gate,
:root[data-ui-theme="opus"] .motif-gate-back {
  color: var(--accent);
  border-color: var(--accent);
  opacity: 0.14;
}

:root[data-ui-theme="opus"] .market-card {
  border-color: color-mix(in srgb, var(--accent) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent),
    color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow-soft);
}

:root[data-ui-theme="opus"] .market-card.is-marquee-static .market-viewport {
  scrollbar-color: color-mix(in srgb, var(--accent) 46%, transparent) transparent;
}

:root[data-ui-theme="opus"] .market-label,
:root[data-ui-theme="opus"] .market-note-inline {
  color: var(--muted);
}

:root[data-ui-theme="opus"] .market-item strong {
  color: var(--text);
}

:root[data-ui-theme="opus"] .market-separator {
  color: color-mix(in srgb, var(--accent) 28%, transparent);
}

:root[data-ui-theme="opus"] .up {
  color: #2f9e73;
}

:root[data-ui-theme="opus"] .down {
  color: var(--red);
}

:root[data-ui-theme="opus"] .neutral {
  color: var(--muted);
}

:root[data-ui-theme="opus"] .news-block,
:root[data-ui-theme="opus"] .news-list,
:root[data-ui-theme="opus"] .news-item,
:root[data-ui-theme="opus"] .platform-discussion-item {
  border-color: var(--line);
}

:root[data-ui-theme="opus"] .news-block-head span {
  background: linear-gradient(180deg, var(--accent), var(--opus-copper));
}

:root[data-ui-theme="opus"] .news-item[href]:hover {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
}

:root[data-ui-theme="opus"] .skeleton-line,
:root[data-ui-theme="opus"] .skeleton-thumb {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface)) 25%,
    color-mix(in srgb, var(--accent) 3%, var(--surface)) 42%,
    color-mix(in srgb, var(--accent) 9%, var(--surface)) 62%
  );
  background-size: 300% 100%;
}

:root[data-ui-theme="opus"] .search-card {
  background: linear-gradient(140deg, #4c3fa8 0%, #2b2258 62%, var(--opus-ink) 100%);
  color: #f5f3ff;
}

:root[data-ui-theme="opus"] .search-card p {
  color: rgba(245, 243, 255, 0.76);
}

:root[data-ui-theme="opus"] .my-hero {
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--opus-copper) 26%, transparent) 0 5%, transparent 6%),
    linear-gradient(130deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 58%);
}

:root[data-ui-theme="opus"] .profile-cover {
  background: linear-gradient(128deg, #2b2258 0%, #4c3fa8 56%, var(--opus-copper) 100%);
}

:root[data-ui-theme="opus"] .profile-back {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--accent-strong);
  box-shadow: 0 6px 18px var(--opus-veil);
}

:root[data-ui-theme="opus"] .guide-list a,
:root[data-ui-theme="opus"] .password-form input,
:root[data-ui-theme="opus"] .submit-form textarea,
:root[data-ui-theme="opus"] .submit-form select,
:root[data-ui-theme="opus"] .auth-form input,
:root[data-ui-theme="opus"] .static-language-control select,
:root[data-ui-theme="opus"] .contact-form input,
:root[data-ui-theme="opus"] .contact-form textarea {
  background: var(--surface);
  border-color: var(--line);
}

:root[data-ui-theme="opus"] .bbs-badge.highlighted,
:root[data-ui-theme="opus"] .my-submission-status.status-published,
:root[data-ui-theme="opus"] .module-row span.module-state.ok {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-strong);
}

:root[data-ui-theme="opus"] .platform-content-type {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* 以下为基础样式里写死浅色、深色模式需要单独接管的部分。 */
:root[data-ui-theme="opus"][data-theme="dark"] body {
  background:
    radial-gradient(920px 480px at 6% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%),
    radial-gradient(880px 500px at 100% 4%, color-mix(in srgb, var(--opus-copper) 12%, transparent), transparent 60%),
    var(--bg);
}

:root[data-ui-theme="opus"][data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--bg) 70%);
}

:root[data-ui-theme="opus"][data-theme="dark"] .home-hero-card {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

:root[data-ui-theme="opus"][data-theme="dark"] .home-hero-trust span {
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

:root[data-ui-theme="opus"][data-theme="dark"] .site-footer {
  color: var(--muted);
}

:root[data-ui-theme="opus"][data-theme="dark"] .search-card {
  background: linear-gradient(140deg, #2f2662 0%, var(--surface) 64%, var(--opus-ink-deep) 100%);
}

:root[data-ui-theme="opus"][data-theme="dark"] .profile-cover {
  background: linear-gradient(128deg, #100e20 0%, #3b2f92 58%, var(--opus-copper) 100%);
}

:root[data-ui-theme="opus"][data-theme="dark"] .my-submission-status {
  background: var(--surface-soft);
  color: var(--muted);
}

:root[data-ui-theme="opus"][data-theme="dark"] .verify-banner,
:root[data-ui-theme="opus"][data-theme="dark"] .my-profile-deletion-status {
  border-color: color-mix(in srgb, var(--opus-copper) 54%, transparent);
  background: color-mix(in srgb, var(--opus-copper) 14%, var(--surface));
  color: var(--sun);
}

:root[data-ui-theme="opus"][data-theme="dark"] .guide-list a,
:root[data-ui-theme="opus"][data-theme="dark"] .auth-tabs,
:root[data-ui-theme="opus"][data-theme="dark"] .bbs-visual-toolbar {
  background: var(--surface-soft);
}

:root[data-ui-theme="opus"][data-theme="dark"] .up {
  color: #63d3a4;
}