/*
 * lzmyselfai.cn — shared visual language
 * Inspired by the supplied editorial portfolio reference:
 * warm paper, dot grid, oversized typography and small accent colors.
 */
:root {
  --site-paper: #f5f4ef;
  --site-paper-deep: #ebe9e1;
  --site-ink: #171715;
  --site-muted: #777872;
  --site-faint: #a3a39b;
  --site-line: rgba(23, 23, 21, 0.16);
  --site-line-strong: rgba(23, 23, 21, 0.34);
  --site-accent: #e36b22;
  --site-hot: #ef476f;
  --site-green: #4b8069;
  --site-shadow: 0 22px 70px rgba(30, 29, 23, 0.12);
  --site-radius: 4px;
}

html,
body {
  background: var(--site-paper) !important;
  color: var(--site-ink);
}

body {
  position: relative;
  isolation: isolate;
  font-family: "Inter", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(23, 23, 21, 0.35) 0.8px, transparent 0.9px);
  background-size: 20px 20px;
  opacity: 0.16;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 12%, rgba(239, 71, 111, 0.08), transparent 24rem),
    radial-gradient(circle at 12% 88%, rgba(227, 107, 34, 0.09), transparent 28rem);
}

body > *:not(.liquid-ether-container):not(#pageLoader) {
  position: relative;
  z-index: 1;
}

.liquid-ether-container {
  z-index: 0;
  opacity: 0.055 !important;
  mix-blend-mode: multiply;
  filter: saturate(0.55) contrast(0.92);
}

.site-footer,
.site-footer a {
  color: var(--site-muted) !important;
}

.site-footer .divider {
  background: var(--site-line) !important;
}

/* Shared editorial controls */
.theme-auth button,
.theme-console button,
.theme-party button,
.theme-python button,
.theme-article a,
.theme-error a {
  -webkit-tap-highlight-color: transparent;
}

.theme-auth .back-link,
.theme-article .back-link,
.theme-error a {
  color: var(--site-muted) !important;
}

.theme-auth .back-link:hover,
.theme-article .back-link:hover,
.theme-error a:hover {
  color: var(--site-ink) !important;
}

/* Login / register */
.theme-auth .auth-wrapper {
  z-index: 3;
}

.theme-auth .auth-card {
  background: rgba(255, 255, 252, 0.72) !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow) !important;
  backdrop-filter: blur(18px) saturate(110%);
}

.theme-auth .auth-title {
  color: var(--site-ink) !important;
  font-family: "Home Chinese Display", "STKaiti", serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: none;
}

.theme-auth .input-group label,
.theme-auth .auth-switch,
.theme-auth .toggle-pwd {
  color: var(--site-muted) !important;
}

.theme-auth .input-group input {
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, 0.56) !important;
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
}

.theme-auth .input-group input::placeholder {
  color: var(--site-faint) !important;
}

.theme-auth .input-group input:focus {
  border-color: var(--site-accent) !important;
  box-shadow: 0 0 0 3px rgba(227, 107, 34, 0.12) !important;
}

.theme-auth .auth-btn {
  color: #fff !important;
  background: var(--site-ink) !important;
  border-color: var(--site-ink) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.theme-auth .auth-btn:hover {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
  box-shadow: none !important;
}

.theme-auth .auth-switch a {
  color: var(--site-accent) !important;
}

/* Console */
.theme-console {
  overflow: hidden;
}

.theme-console .topbar {
  background: rgba(245, 244, 239, 0.82) !important;
  border-bottom: 1px solid var(--site-line) !important;
  backdrop-filter: blur(18px);
}

.theme-console .brand-icon,
.theme-console .brand-text,
.theme-console .page-title,
.theme-console .stat-number,
.theme-console .detail-value,
.theme-console .section-title {
  color: var(--site-ink) !important;
}

.theme-console .topbar-greeting,
.theme-console .page-subtitle,
.theme-console .stat-label,
.theme-console .detail-label {
  color: var(--site-muted) !important;
}

.theme-console .sidebar {
  background: rgba(245, 244, 239, 0.7) !important;
  border-right: 1px solid var(--site-line) !important;
  backdrop-filter: blur(16px);
}

.theme-console .nav-item {
  color: var(--site-muted) !important;
  border-radius: var(--site-radius) !important;
}

.theme-console .nav-item:hover {
  color: var(--site-ink) !important;
  background: rgba(23, 23, 21, 0.06) !important;
}

.theme-console .nav-item.active {
  color: var(--site-ink) !important;
  background: rgba(227, 107, 34, 0.13) !important;
  box-shadow: none !important;
}

.theme-console .nav-item.active::before {
  background: var(--site-accent) !important;
}

.theme-console .stat-card,
.theme-console .welcome-banner,
.theme-console .profile-card,
.theme-console .empty-state,
.theme-console .fav-item,
.theme-console .message-item,
.theme-console .setting-card,
.theme-console .admin-card,
.theme-console .announcement-item,
.theme-console .user-list-table {
  background: rgba(255, 255, 252, 0.62) !important;
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.theme-console .stat-card:hover,
.theme-console .fav-item:hover,
.theme-console .announcement-item:hover {
  border-color: var(--site-line-strong) !important;
  background: rgba(255, 255, 252, 0.9) !important;
  box-shadow: var(--site-shadow) !important;
}

.theme-console .welcome-banner {
  background: linear-gradient(105deg, rgba(227, 107, 34, 0.12), rgba(239, 71, 111, 0.08)) !important;
}

.theme-console .primary-btn,
.theme-console .setting-btn,
.theme-console .admin-btn,
.theme-console .admin-tab.active {
  background: var(--site-ink) !important;
  color: #fff !important;
  border-color: var(--site-ink) !important;
}

.theme-console .primary-btn:hover,
.theme-console .setting-btn:hover,
.theme-console .admin-btn:hover,
.theme-console .admin-tab.active:hover {
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
}

.theme-console .logout-btn {
  color: var(--site-muted) !important;
  border-color: var(--site-line) !important;
}

.theme-console .logout-btn:hover {
  color: var(--site-hot) !important;
  border-color: var(--site-hot) !important;
  background: rgba(239, 71, 111, 0.08) !important;
}

.theme-console .topbar-avatar,
.theme-console .profile-avatar-large {
  background: var(--site-ink) !important;
}

/* Python challenge already has tokens; bring them into the shared system. */
.theme-python .app {
  background:
    radial-gradient(circle, rgba(23, 23, 21, 0.24) 0.8px, transparent 0.9px),
    var(--site-paper) !important;
  background-size: 20px 20px !important;
}

.theme-python .primary-btn,
.theme-python .tab-btn.active,
.theme-python .route-btn.active,
.theme-python .mission-btn.active {
  background: var(--site-ink) !important;
  border-color: var(--site-ink) !important;
}

.theme-python .hero-art,
.theme-python .metric,
.theme-python .card,
.theme-python .mission-card,
.theme-python .challenge-card {
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

/* Party exam variables are inherited by every component in its page. */
.theme-party {
  --bg: var(--site-paper);
  --bg-card: rgba(255, 255, 252, 0.68);
  --bg-card-hover: rgba(255, 255, 252, 0.94);
  --border: var(--site-line);
  --border-active: var(--site-line-strong);
  --text: var(--site-ink);
  --text-dim: var(--site-muted);
  --text-muted: var(--site-faint);
  --accent: var(--site-accent);
  --accent2: var(--site-hot);
  --red: #c94253;
  --green: var(--site-green);
  --gold: var(--site-accent);
  --red-bg: rgba(201, 66, 83, 0.1);
  --green-bg: rgba(75, 128, 105, 0.12);
  --shadow: var(--site-shadow);
}

.theme-party #app {
  position: relative;
  z-index: 1;
}

.theme-party .btn-primary,
.theme-party .submit-btn,
.theme-party .modal-btn:not(.outline) {
  background: var(--site-ink) !important;
  box-shadow: none !important;
}

.theme-party .btn-primary:hover,
.theme-party .submit-btn:hover,
.theme-party .modal-btn:not(.outline):hover {
  background: var(--site-accent) !important;
}

.theme-party .q-card,
.theme-party .home-stat,
.theme-party .lb-item,
.theme-party .err-item,
.theme-party .modal {
  box-shadow: none !important;
  backdrop-filter: blur(14px);
}

/* Welcome, article and error pages use small inline style blocks for their
 * layout; these overrides keep their visual language in the same system. */
.theme-welcome #particleCanvas {
  opacity: 0.14;
  mix-blend-mode: multiply;
}

.theme-welcome .welcome-line-sub,
.theme-welcome .welcome-line-sub2,
.theme-welcome .arrow-label {
  color: var(--site-muted) !important;
  text-shadow: none !important;
}

.theme-welcome .welcome-line-main {
  color: var(--site-ink) !important;
  text-shadow: none !important;
  font-family: "Home Chinese Display", "STKaiti", serif;
  font-weight: 400;
}

.theme-welcome .welcome-line-main .username-highlight {
  color: var(--site-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

.theme-welcome .arrow-icon {
  color: var(--site-ink) !important;
  filter: none !important;
}

.theme-article,
.theme-error {
  min-height: 100vh;
  overflow: auto !important;
}

.theme-article {
  color: var(--site-ink) !important;
}

.theme-article .container {
  position: relative;
  z-index: 1;
}

.theme-article .badge {
  color: var(--site-accent) !important;
  background: rgba(227, 107, 34, 0.1) !important;
  border-color: rgba(227, 107, 34, 0.24) !important;
}

.theme-article h1 {
  color: var(--site-ink) !important;
  text-shadow: none !important;
}

.theme-article .date,
.theme-article .intro,
.theme-article .update-item p,
.theme-article .footer-note {
  color: var(--site-muted) !important;
}

.theme-article .intro,
.theme-article .update-item {
  background: rgba(255, 255, 252, 0.62) !important;
  border-color: var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: none !important;
}

.theme-article .update-item:hover {
  border-color: var(--site-line-strong) !important;
  background: rgba(255, 255, 252, 0.92) !important;
  box-shadow: var(--site-shadow) !important;
}

.theme-article .update-item h3 {
  color: var(--site-ink) !important;
}

.theme-article .back-link {
  color: var(--site-accent) !important;
}

.theme-error {
  color: var(--site-ink) !important;
}

.theme-error main {
  position: relative;
  z-index: 1;
}

.theme-error h1 {
  color: var(--site-ink) !important;
}

.theme-error p {
  color: var(--site-muted) !important;
}

.theme-error a {
  color: #fff !important;
  background: var(--site-ink) !important;
  border-color: var(--site-ink) !important;
  border-radius: 999px !important;
}

.theme-error a:hover {
  color: #fff !important;
  background: var(--site-accent) !important;
  border-color: var(--site-accent) !important;
}

#pageLoader {
  background: var(--site-paper) !important;
}

@media (max-width: 720px) {
  .theme-console .main-content {
    padding: 24px 18px !important;
  }

  .theme-console .topbar {
    padding-inline: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}