:root.xun-no-oklch { --color-white: #ffffff; --color-text: rgba(0, 0, 0, 0.88);
--color-text-secondary: rgba(0, 0, 0, 0.65);
--color-text-tertiary: rgba(0, 0, 0, 0.45);
--color-text-quaternary: rgba(0, 0, 0, 0.25); --color-border: #d9d9d9;
--color-border-secondary: #f0f0f0; --color-fill: rgba(0, 0, 0, 0.15);
--color-fill-secondary: rgba(0, 0, 0, 0.06);
--color-fill-tertiary: rgba(0, 0, 0, 0.04);
--color-fill-quaternary: rgba(0, 0, 0, 0.02); --color-bg-container: #ffffff;
--color-bg-elevated: #ffffff;
--color-bg-layout: #f5f5f5;
--color-bg-spotlight: rgba(0, 0, 0, 0.85);
--color-bg-mask: rgba(0, 0, 0, 0.45); --color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
--color-neutral-200: #e5e5e5;
--color-neutral-300: #d4d4d4;
--color-neutral-400: #a3a3a3;
--color-neutral-500: #737373;
--color-neutral-600: #525252;
--color-neutral-700: #404040;
--color-neutral-800: #262626;
--color-neutral-900: #171717;
--color-neutral-950: #0a0a0a; --color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-700: #374151;
--color-gray-900: #111827;
--color-red-500: #ef4444;
--color-blue-500: #3b82f6; --color-primary: var(--xun-primary, #1677ff);
--color-primary-hover: var(--xun-primary-hover, #4096ff);
--color-primary-active: var(--xun-primary-active, #0958d9);
--color-primary-bg: #e6f4ff;
--color-primary-bg-hover: #bae0ff;
--color-primary-border: #91caff;
--color-primary-border-hover: #69b1ff;
--color-primary-text: var(--xun-primary, #1677ff);
--color-primary-text-hover: var(--xun-primary-hover, #4096ff);
--color-primary-text-active: var(--xun-primary-active, #0958d9); --color-success: var(--xun-secondary, #52c41a);
--color-success-hover: #73d13d;
--color-success-active: #389e0d;
--color-success-bg: #f6ffed;
--color-success-bg-hover: #d9f7be;
--color-success-border: #b7eb8f;
--color-success-border-hover: #95de64;
--color-success-text: var(--xun-secondary, #52c41a);
--color-success-text-hover: #73d13d;
--color-success-text-active: #389e0d; --color-warning: #faad14;
--color-warning-hover: #d48806;
--color-warning-active: #ad6800;
--color-warning-bg: #fffbe6;
--color-warning-bg-hover: #fff1b8;
--color-warning-border: #ffe58f;
--color-warning-border-hover: #ffd666;
--color-warning-text: #faad14;
--color-warning-text-hover: #d48806;
--color-warning-text-active: #ad6800; --color-error: #ff4d4f;
--color-error-hover: #ff7875;
--color-error-active: #d9363e;
--color-error-bg: #fff2f0;
--color-error-bg-hover: #ffccc7;
--color-error-border: #ffa39e;
--color-error-border-hover: #ff7875;
--color-error-text: #ff4d4f;
--color-error-text-hover: #ff7875;
--color-error-text-active: #d9363e; --color-info: var(--xun-primary, #1677ff);
--color-info-bg: #e6f4ff;
--color-info-border: #91caff;
--color-link: var(--xun-primary, #1677ff);
--color-link-hover: var(--xun-primary-hover, #4096ff);
--color-link-active: var(--xun-primary-active, #0958d9); --page-bg: var(--color-bg-layout);
--text-primary: var(--color-text);
--text-secondary: var(--color-text-secondary);
--text-muted: var(--color-text-tertiary);
} @media (prefers-color-scheme: dark) {
:root.xun-no-oklch:not(.light):not(.dark) {
--color-text: rgba(255, 255, 255, 0.85);
--color-text-secondary: rgba(255, 255, 255, 0.65);
--color-text-tertiary: rgba(255, 255, 255, 0.45);
--color-text-quaternary: rgba(255, 255, 255, 0.25);
--color-border: #303030;
--color-border-secondary: #262626;
--color-fill: rgba(255, 255, 255, 0.18);
--color-fill-secondary: rgba(255, 255, 255, 0.12);
--color-fill-tertiary: rgba(255, 255, 255, 0.08);
--color-fill-quaternary: rgba(255, 255, 255, 0.04);
--color-bg-container: #1f1f1f;
--color-bg-elevated: #262626;
--color-bg-layout: #0f0f0f;
--color-bg-spotlight: rgba(255, 255, 255, 0.85);
--color-bg-mask: rgba(0, 0, 0, 0.65);
--page-bg: var(--color-bg-layout);
--text-primary: var(--color-text);
--text-secondary: var(--color-text-secondary);
--text-muted: var(--color-text-tertiary); --color-primary-bg: rgba(22, 119, 255, 0.18);
--color-primary-bg-hover: rgba(22, 119, 255, 0.24);
--color-success-bg: rgba(82, 196, 26, 0.18);
--color-success-bg-hover: rgba(82, 196, 26, 0.24);
--color-warning-bg: rgba(250, 173, 20, 0.18);
--color-warning-bg-hover: rgba(250, 173, 20, 0.24);
--color-error-bg: rgba(255, 77, 79, 0.18);
--color-error-bg-hover: rgba(255, 77, 79, 0.24);
}
} :root.xun-no-oklch.dark {
--color-text: rgba(255, 255, 255, 0.85);
--color-text-secondary: rgba(255, 255, 255, 0.65);
--color-text-tertiary: rgba(255, 255, 255, 0.45);
--color-text-quaternary: rgba(255, 255, 255, 0.25);
--color-border: #303030;
--color-border-secondary: #262626;
--color-fill: rgba(255, 255, 255, 0.18);
--color-fill-secondary: rgba(255, 255, 255, 0.12);
--color-fill-tertiary: rgba(255, 255, 255, 0.08);
--color-fill-quaternary: rgba(255, 255, 255, 0.04);
--color-bg-container: #1f1f1f;
--color-bg-elevated: #262626;
--color-bg-layout: #0f0f0f;
--color-bg-spotlight: rgba(255, 255, 255, 0.85);
--color-bg-mask: rgba(0, 0, 0, 0.65);
--page-bg: var(--color-bg-layout);
--text-primary: var(--color-text);
--text-secondary: var(--color-text-secondary);
--text-muted: var(--color-text-tertiary);
--color-primary-bg: rgba(22, 119, 255, 0.18);
--color-primary-bg-hover: rgba(22, 119, 255, 0.24);
--color-success-bg: rgba(82, 196, 26, 0.18);
--color-success-bg-hover: rgba(82, 196, 26, 0.24);
--color-warning-bg: rgba(250, 173, 20, 0.18);
--color-warning-bg-hover: rgba(250, 173, 20, 0.24);
--color-error-bg: rgba(255, 77, 79, 0.18);
--color-error-bg-hover: rgba(255, 77, 79, 0.24);
} .mask,
.bottom-sheet-overlay,
.xun-modal,
.xun-modal-overlay,
.xun-auth-loading-modal,
.xun-auth-loading-modal .xun-modal-overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
} .mask {
background-color: rgba(0, 0, 0, 0.45);
background-color: var(--color-bg-mask);
}
.xun-modal-overlay,
.xun-auth-loading-modal .xun-modal-overlay {
background-color: rgba(0, 0, 0, 0.45);
background-color: var(--color-bg-mask);
}
.dark .mask,
body.dark .mask {
background-color: rgba(0, 0, 0, 0.65);
background-color: var(--color-bg-mask);
}
.dark .xun-modal-overlay,
body.dark .xun-modal-overlay,
.dark .xun-auth-loading-modal .xun-modal-overlay,
body.dark .xun-auth-loading-modal .xun-modal-overlay {
background-color: rgba(0, 0, 0, 0.65);
background-color: var(--color-bg-mask);
}
.modal {
background-color: #ffffff;
background-color: var(--color-bg-container);
}
.dark .modal,
body.dark .modal {
background-color: #1f1f1f;
background-color: var(--color-bg-container);
}
.xun-modal-content,
.xun-auth-loading-content {
background: #ffffff;
background: var(--color-bg-elevated);
}
.dark .xun-modal-content,
body.dark .xun-modal-content,
.dark .xun-auth-loading-content,
body.dark .xun-auth-loading-content {
background: #1f1f1f;
background: var(--color-bg-elevated);
}
.bottom-sheet {
background: #f5f5f5;
background: var(--color-bg-layout);
}
.dark .bottom-sheet,
body.dark .bottom-sheet {
background: #111111;
background: var(--color-bg-layout);
} .xun-posts-list .xun-post-thumb {
align-self: flex-start;
}