/* ============================================================
   Starry Night / Daytime Theme - Custom Color Overrides
   ============================================================ */

/* --- Shared Gradient Override --- */
:root {
  --main-gradient: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
}

/* ============================================================
   DARK MODE - Starry Night
   ============================================================ */
.theme-dark {
  --main-gradient: linear-gradient(
    130deg,
    #7dd3fc,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;

  /* Backgrounds — dark grey-black */
  --background-primary: rgba(15, 20, 40, 0.90) !important;
  --background-primary-alt: rgba(10, 14, 30, 0.94) !important;
  --background-secondary: rgba(25, 30, 55, 0.75) !important;
  --background-secondary-alt: rgba(8, 10, 22, 0.88) !important;
  --background-trans: rgba(255, 255, 255, 0.06) !important;
  --background-backdrop: rgba(15, 20, 40, 0.92) !important;
  --background-blur: rgba(15, 20, 40, 0.12) !important;

  /* Text */
  --text-bright: #f1f5f9 !important;
  --text-invert: #0b0e17 !important;
  --text-normal: #c8d6e5 !important;
  --text-accent: #ffd475 !important;
  --text-sub-accent: #60a5fa !important;
  --text-faint: #7aa2f7 !important;
  --text-dim: #5a6a82 !important;
  --text-link: #c8d6e5 !important;
  --text-a: #7cc4fa !important;
  --text-a-hover: #a8d8ff !important;

  /* Headings */
  --text-title-h1: #ffd475 !important;
  --text-title-h2: #d6e5f0 !important;
  --text-title-h3: #d6e5f0 !important;
  --text-title-h4: #c8d6e5 !important;
  --text-title-h5: #c8d6e5 !important;

  /* Accent backgrounds */
  --bg-accent-05: rgba(255, 212, 117, 0.06) !important;
  --bg-accent-55: rgba(255, 212, 117, 0.45) !important;
  --bg-sub-accent-55: rgba(96, 165, 250, 0.45) !important;

  /* Shadows */
  --accent-shadow: 0 20px 25px -5px rgba(255, 212, 117, 0.08),
    0 10px 10px -5px rgba(11, 14, 23, 0.2) !important;
  --sub-accent-shadow: 0 20px 25px -5px rgba(96, 165, 250, 0.08),
    0 10px 10px -5px rgba(11, 14, 23, 0.2) !important;

  /* Skeleton loading */
  --skeleton-bg: #0f172a !important;
  --skeleton-hl: #1c2540 !important;

  /* Gradient covers — dark navy */
  --gradient-cover: linear-gradient(
    90deg,
    rgba(11, 14, 23, 0) 0%,
    rgba(11, 14, 23, 0.92) 100%
  ) !important;
  --article-cover: linear-gradient(
    180deg,
    rgba(11, 14, 23, 0) 0%,
    rgba(11, 14, 23, 0.92) 100%
  ) !important;
  --banner-cover: linear-gradient(
    180deg,
    rgba(11, 14, 23, 0) 30%,
    rgba(11, 14, 23, 0.92) 100%
  ) !important;
  --nav-cover: linear-gradient(
    180deg,
    rgba(11, 14, 23, 0.92) 0%,
    rgba(11, 14, 23, 0) 100%
  ) !important;

  /* Strong gradient (used in tags, small badges) */
  --strong-gradient: linear-gradient(
    62deg,
    #7dd3fc 0%,
    #0c4a6e 100%
  ) !important;

  /* Search modal */
  --search-modal-key-gradient: linear-gradient(
    -225deg,
    #1c2540,
    #111827
  ) !important;
  --search-modal-key-shadow: inset 0 -2px 0 0 #1c2540,
    inset 0 0 1px 1px #151c2e,
    0 1px 2px 1px rgba(6, 8, 16, 0.5) !important;

  /* Quote colors */
  --custom-quote: #7cc4fa !important;
  --custom-quote-tip: #60a5fa !important;
  --custom-quote-info: #38bdf8 !important;
  --custom-quote-success: #34d399 !important;
  --custom-quote-warning: #ffd475 !important;
  --custom-quote-danger: #ff6b6b !important;

  /* App screen bg */
  --app-screen-bg: #060a14 !important;
}

/* --- Dark mode: grey-black cards --- */
.theme-dark .bg-ob-deep-900 {
  background-color: rgba(11, 14, 23, 0.90) !important;
  border: 1px solid rgba(40, 50, 80, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(100, 130, 200, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.theme-dark .bg-ob-deep-800 {
  background-color: rgba(15, 20, 35, 0.75) !important;
  border: 1px solid rgba(35, 45, 72, 0.32) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.theme-dark .ob-gradient-cut-plate {
  background-color: rgba(11, 14, 23, 0.90) !important;
  border: 1px solid rgba(40, 50, 80, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(100, 130, 200, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.theme-dark .sidebar-box {
  background-color: rgba(13, 17, 30, 0.90) !important;
  border: 1px solid rgba(40, 50, 80, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(100, 130, 200, 0.07),
    0 4px 20px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.theme-dark .feature-article {
  background-color: rgba(11, 14, 23, 0.90) !important;
  border: 1px solid rgba(40, 50, 80, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(100, 130, 200, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Dark mode: tab container */
.theme-dark .tab {
  background-color: rgba(13, 17, 30, 0.90) !important;
  border: 1px solid rgba(40, 50, 80, 0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(100, 130, 200, 0.07),
    0 4px 20px rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.theme-dark .app-banner-image {
  background-color: rgba(4, 6, 14, 0.88) !important;
}

.theme-dark html::-webkit-scrollbar-thumb,
.theme-dark div::-webkit-scrollbar-thumb {
  background: #1c2540 !important;
}

.theme-dark html::-webkit-scrollbar-track,
.theme-dark div::-webkit-scrollbar-track {
  background: linear-gradient(to right, #0b0e17, #111827) !important;
}

.theme-dark #search-modal .search-footer {
  box-shadow: 0 -1px 0 0 #1c2540,
    inset 0 -2px 0 0 #151c2e,
    0 1px 2px 1px rgba(6, 8, 16, 0.4) !important;
}

/* Also catch html[class] scrollbar for non-nested selectors */
html.theme-dark::-webkit-scrollbar-thumb {
  background: #1c2540 !important;
}

html.theme-dark::-webkit-scrollbar-track {
  background: linear-gradient(to right, #0b0e17, #111827) !important;
}

/* Override JS inline backgroundColor on header image */
.theme-dark .app-banner-image[style] {
  background-color: rgba(4, 6, 14, 0.88) !important;
}

/* Velocity toolbar (lightbox) */
.theme-dark .vel-toolbar {
  background-color: rgba(6, 9, 22, 0.92) !important;
}

.theme-dark .vel-toolbar .toolbar-btn:active,
.theme-dark .vel-toolbar .toolbar-btn:hover {
  background-color: rgba(28, 37, 64, 0.85) !important;
}

/* Theme toggle slider */
.theme-dark .slider {
  background-color: #ffd475 !important;
}

/* ============================================================
   LIGHT MODE - Ocean Azure / Deep Sea
   ============================================================ */
.theme-light {
  --main-gradient: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;

  /* Backgrounds — ocean blue */
  --background-primary: rgba(219, 234, 254, 0.92) !important;
  --background-primary-alt: rgba(204, 225, 253, 0.95) !important;
  --background-secondary: rgba(240, 247, 255, 0.88) !important;
  --background-secondary-alt: #1b3a5c !important;
  --background-trans: rgba(37, 99, 235, 0.07) !important;
  --background-backdrop: rgba(219, 234, 254, 0.97) !important;
  --background-blur: rgba(219, 234, 254, 0.12) !important;

  /* Text */
  --text-bright: #0b1f38 !important;
  --text-invert: #ffffff !important;
  --text-normal: #1c3a5e !important;
  --text-accent: #2563eb !important;
  --text-sub-accent: #b86c00 !important;
  --text-faint: #60a5fa !important;
  --text-dim: #3b82f6 !important;
  --text-link: #1c3a5e !important;
  --text-a: #1d4ed8 !important;
  --text-a-hover: #2563eb !important;

  /* Headings */
  --text-title-h1: #082742 !important;
  --text-title-h2: #0c3860 !important;
  --text-title-h3: #0c3860 !important;
  --text-title-h4: #1c3a5e !important;
  --text-title-h5: #1c3a5e !important;

  /* Accent backgrounds */
  --bg-accent-05: rgba(37, 99, 235, 0.07) !important;
  --bg-accent-55: rgba(37, 99, 235, 0.50) !important;
  --bg-sub-accent-55: rgba(184, 108, 0, 0.45) !important;

  /* Shadows */
  --accent-shadow: 0 20px 40px -8px rgba(37, 99, 235, 0.20),
    0 8px 16px -4px rgba(12, 74, 110, 0.10) !important;
  --sub-accent-shadow: 0 20px 40px -8px rgba(184, 108, 0, 0.16),
    0 8px 16px -4px rgba(12, 74, 110, 0.10) !important;

  /* Gradient covers — ocean blue */
  --gradient-cover: linear-gradient(
    90deg,
    rgba(219, 234, 254, 0) 0%,
    rgba(219, 234, 254, 0.95) 100%
  ) !important;
  --article-cover: linear-gradient(
    180deg,
    rgba(219, 234, 254, 0) 0%,
    rgba(219, 234, 254, 0.95) 100%
  ) !important;
  --banner-cover: linear-gradient(
    180deg,
    rgba(219, 234, 254, 0) 30%,
    rgba(219, 234, 254, 0.95) 100%
  ) !important;
  --nav-cover: linear-gradient(
    180deg,
    rgba(219, 234, 254, 0.95) 0%,
    rgba(219, 234, 254, 0) 100%
  ) !important;

  /* Strong gradient */
  --strong-gradient: linear-gradient(
    62deg,
    #38bdf8 0%,
    #0c4a6e 100%
  ) !important;

  /* Search modal */
  --search-modal-key-gradient: linear-gradient(
    -225deg,
    #bfdbfe,
    #dbeafe
  ) !important;
  --search-modal-key-shadow: inset 0 -2px 0 0 #93c5fd,
    inset 0 0 1px 1px #ffffff,
    0 1px 2px 1px rgba(12, 74, 110, 0.22) !important;

  /* Quote colors */
  --custom-quote: #2563eb !important;
  --custom-quote-tip: #1d4ed8 !important;
  --custom-quote-info: #1d4ed8 !important;
  --custom-quote-success: #047857 !important;
  --custom-quote-warning: #b86c00 !important;
  --custom-quote-danger: #dc2626 !important;

  /* App screen bg */
  --app-screen-bg: #dbeafe !important;

  /* Skeleton loading — ocean blue tones */
  --skeleton-bg: #bfdbfe !important;
  --skeleton-hl: #dbeafe !important;
}

/* --- Light mode: layered ocean-blue cards --- */
.theme-light .bg-ob-deep-900 {
  background-color: rgba(219, 234, 254, 0.65) !important;
  border: 1px solid rgba(37, 99, 235, 0.18) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.theme-light .bg-ob-deep-800 {
  background-color: rgba(235, 245, 255, 0.80) !important;
  border: 1px solid rgba(37, 99, 235, 0.12) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.theme-light .ob-gradient-cut-plate {
  background-color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 6px 28px rgba(37, 99, 235, 0.14),
    0 2px 8px rgba(12, 74, 110, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.theme-light .sidebar-box {
  background-color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 22px rgba(37, 99, 235, 0.12),
    0 2px 8px rgba(12, 74, 110, 0.07) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.theme-light .feature-article {
  background-color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 32px rgba(37, 99, 235, 0.14),
    0 3px 10px rgba(12, 74, 110, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Light mode: tab container */
.theme-light .tab {
  background-color: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 18px rgba(37, 99, 235, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.theme-light .app-banner-image {
  background-color: rgba(219, 234, 254, 0.88) !important;
}

.theme-light html::-webkit-scrollbar-thumb,
.theme-light div::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #2563eb, #1d4ed8) !important;
}

.theme-light html::-webkit-scrollbar-track,
.theme-light div::-webkit-scrollbar-track {
  background: linear-gradient(to right, #dbeafe, #eff6ff) !important;
}

.theme-light #search-modal .search-footer {
  box-shadow: 0 -1px 0 0 #93c5fd,
    inset 0 -2px 0 0 #bfdbfe,
    0 1px 2px 1px rgba(12, 74, 110, 0.15) !important;
}

html.theme-light::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #2563eb, #1d4ed8) !important;
}

html.theme-light::-webkit-scrollbar-track {
  background: linear-gradient(to right, #dbeafe, #eff6ff) !important;
}

/* Override JS inline backgroundColor on header image */
.theme-light .app-banner-image[style] {
  background-color: rgba(219, 234, 254, 0.88) !important;
}

/* Velocity toolbar (lightbox) */
.theme-light .vel-toolbar {
  background-color: rgba(240, 250, 255, 0.95) !important;
}

.theme-light .vel-toolbar .toolbar-btn:active,
.theme-light .vel-toolbar .toolbar-btn:hover {
  background-color: rgba(210, 235, 255, 0.85) !important;
}

/* Theme toggle slider */
.theme-light .slider {
  background: linear-gradient(135deg, #38bdf8, #0c4a6e) !important;
}

/* ============================================================
   Shooting Star Keyframes (Dark Mode)
   ============================================================ */
@keyframes shooting-star {
  0% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(min(60vw, 600px)), calc(min(60vw, 600px)))
      rotate(-45deg);
    opacity: 0;
  }
}

.shooting-star {
  position: fixed;
  width: 3px;
  height: 3px;
  background: #ffd475;
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
  animation: shooting-star 1.2s ease-out forwards;
  box-shadow: 0 0 4px 1px rgba(255, 212, 117, 0.6);
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 80px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 212, 117, 0.3),
    rgba(255, 212, 117, 0.8)
  );
  border-radius: 0 1px 1px 0;
}

/* ============================================================
   Cloud Keyframes (Light Mode)
   ============================================================ */
@keyframes cloud-drift {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(calc(100vw + 200px));
  }
}

.floating-cloud {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
  filter: blur(1px);
  animation: cloud-drift linear forwards;
}

/* ============================================================
   Reduced Motion - Disable all custom animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .shooting-star,
  .floating-cloud {
    display: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Aurora Dia Bot — Theme-Aware Colors
   ============================================================ */

/* Dark mode: Dia body gradient */
.theme-dark #Aurora-Dia--body,
.theme-dark #Aurora-Dia--body[data-v-3a8162e1] {
  --aurora-dia--linear-gradient: linear-gradient(130deg, #1d4ed8, #2563eb 45%, #38bdf8 100%) !important;
  --aurora-dia--linear-gradient-hover: linear-gradient(130deg, #1e40af, #1d4ed8 50%, #60a5fa 100%) !important;
  --aurora-dia--platform-light: #60a5fa !important;
}

/* Light mode: Dia body gradient (ocean blue) */
.theme-light #Aurora-Dia--body,
.theme-light #Aurora-Dia--body[data-v-3a8162e1] {
  --aurora-dia--linear-gradient: linear-gradient(130deg, #38bdf8, #2563eb 45%, #0c4a6e 100%) !important;
  --aurora-dia--linear-gradient-hover: linear-gradient(130deg, #7dd3fc, #1d4ed8 50%, #2563eb 100%) !important;
  --aurora-dia--platform-light: #2563eb !important;
}

/* Dark mode: tips bubble */
.theme-dark #Aurora-Dia--tips,
.theme-dark .Aurora-Dia--tips,
.theme-dark .Aurora-Dia--tips[data-v-3a8162e1] {
  background: #0f172a !important;
  border: 1px solid rgba(96, 165, 250, 0.55) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.34) !important;
}

/* Light mode: tips bubble (雲白底深藍字) */
.theme-light #Aurora-Dia--tips,
.theme-light .Aurora-Dia--tips,
.theme-light .Aurora-Dia--tips[data-v-3a8162e1] {
  background: #ffffff !important;
  border: 1px solid rgba(37, 99, 235, 0.30) !important;
  color: #1c3a5e !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12) !important;
}


/* ============================================================
   Category / Tag Filter Tabs — White Text
   ============================================================ */

/* All tab spans: white text (matching active-tab style) */
.tab li span {
  color: #ffffff !important;
}

/* First tab: solid sky blue */
.tab li span.first-tab {
  color: #ffffff !important;
  background: #38bdf8 !important;
}

/* Dark mode first tab: lighter ocean blue */
.theme-dark .tab li span.first-tab {
  background: #1a7ab8 !important;
}

/* Language switcher — prevent multi-char locale names from wrapping */
[data-dia="language"] span {
  white-space: nowrap;
}

/* ============================================================
   Footer — Starfield canvas shows through transparent layers
   ============================================================ */

/* Override inline gradient — let fixed starfield canvas show through */
#footer {
  background: transparent !important;
}


/* Wrapper: transparent + padding */
#footer > span {
  background: transparent !important;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* Content card: frosted glass (dark mode) */
.theme-dark #footer > span > div {
  background: rgba(2, 8, 28, 0.62) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: #e2e8f0 !important;
}

.theme-dark #footer > span > div a,
.theme-dark #footer > span > div b {
  color: #93c5fd !important;
}

.theme-dark #footer > span > div li {
  color: #e2e8f0 !important;
}

/* Dark mode: markdown separator uses footer-link-divider style */
.theme-dark .post-html hr {
  background: transparent !important;
  box-shadow: none !important;
}

.theme-dark .post-html hr::after {
  opacity: 0.42 !important;
  background: linear-gradient(
    130deg,
    #7dd3fc,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
  box-shadow: none !important;
}

/* Light mode: markdown separator — sky to ocean blue */
.theme-light .post-html hr {
  background: transparent !important;
  box-shadow: none !important;
}

.theme-light .post-html hr::after {
  opacity: 0.34 !important;
  background: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
  box-shadow: none !important;
}

.theme-dark .post-html hr::before {
  opacity: 0.95 !important;
  background-color: var(--background-secondary) !important;
  color: #7dd3fc !important;
}

/* Title underline bars (the ::after visual equivalent in theme components) */
span.absolute.bottom-0.h-1.w-14.rounded-full,
span.h-1.w-14.rounded-full.mt-2 {
  opacity: 0.98 !important;
}

.theme-dark span.absolute.bottom-0.h-1.w-14.rounded-full,
.theme-dark span.h-1.w-14.rounded-full.mt-2 {
  background: linear-gradient(
    130deg,
    #7dd3fc,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
}

.theme-light span.absolute.bottom-0.h-1.w-14.rounded-full,
.theme-light span.h-1.w-14.rounded-full.mt-2 {
  background: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
}

/* Section title underline (w-24 variant used in links/friends sections) */
.theme-dark span.absolute.bottom-0.h-1.w-24.rounded-full {
  background: linear-gradient(
    130deg,
    #7dd3fc,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
  opacity: 0.98 !important;
}

.theme-light span.absolute.bottom-0.h-1.w-24.rounded-full {
  background: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
  opacity: 0.98 !important;
}

/* Real heading underline in article/page content (::after) */
.theme-dark .post-html h1:after,
.theme-dark .post-html h2:after,
.theme-dark .post-html h3:after,
.theme-dark .post-html h4:after,
.theme-dark .post-html h5:after,
.theme-dark .post-html h6:after {
  opacity: 0.98 !important;
  background: linear-gradient(
    130deg,
    #7dd3fc,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
}

.theme-light .post-html h1:after,
.theme-light .post-html h2:after,
.theme-light .post-html h3:after,
.theme-light .post-html h4:after,
.theme-light .post-html h5:after,
.theme-light .post-html h6:after {
  opacity: 0.98 !important;
  background: linear-gradient(
    130deg,
    #38bdf8,
    #2563eb 41.07%,
    #0c4a6e 76.05%
  ) !important;
}

/* Content links: remove underline style and show link icon */
.post-html a:not(.headerlink) {
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}

.post-html a:not(.headerlink)::after {
  content: "\f0c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.82em;
  margin-left: 0.38em;
  color: currentColor;
  opacity: 0.82;
  vertical-align: baseline;
}

/* Brand-aware link icons in content */
.post-html a[href*="github.com"]:not(.headerlink)::after {
  content: "\f09b";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.post-html a[href*="instagram.com"]:not(.headerlink)::after {
  content: "\f16d";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.post-html a[href*="discord.com"]:not(.headerlink)::after,
.post-html a[href*="discord.gg"]:not(.headerlink)::after {
  content: "\f392";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

.post-html a[href^="mailto:"]:not(.headerlink)::after {
  content: "\f0e0";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Content card: frosted glass (light mode — white glass over ocean blue) */
.theme-light #footer > span > div {
  background: rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 8px 32px rgba(12, 74, 110, 0.18) !important;
  color: #1c3a5e !important;
}

.theme-light #footer > span > div a,
.theme-light #footer > span > div b {
  color: #2563eb !important;
}

.theme-light #footer > span > div li {
  color: #1c3a5e !important;
}

/* Footer avatar — remove built-in 40% opacity */
.footer-avatar {
  opacity: 1 !important;
}

/* Footer links: make avatar overlap the text panel and remove seam line */
#footer-link .footer-link-divider {
  margin-top: 0.85rem !important;
  margin-bottom: 0.35rem !important;
  overflow: visible !important;
  z-index: 5 !important;
}

#footer-link .footer-link-divider .footer-link-img-wrapper {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 3.3rem !important;
  height: 3.3rem !important;
  border: 0 !important;
  background: transparent !important;
  background-image: url("/media/picture/Avatar.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 6 !important;
}

#footer-link .footer-link-divider .footer-link-avatar {
  display: none !important;
}

#footer-link .footer-link-divider + .flex {
  margin-top: 0.45rem !important;
  padding-top: 3.35rem !important;
}

/* Footer links panel: keep outer frame, remove inner panel border line */
#footer-link .footer-link-divider + .flex.bg-ob-deep-900 {
  border: 0 !important;
  border-bottom: 0 !important;
}

/* ============================================================
   Links Card Layout - 3:2 (top image / bottom text)
   ============================================================ */
#link-card .article {
  display: grid !important;
  grid-template-rows: 3fr 2fr !important;
  height: 15.2rem !important;
  overflow: hidden !important;
}

#link-card .article .article-thumbnail {
  grid-row: 1 / 2 !important;
  position: relative !important;
  overflow: hidden !important;
}

#link-card .article .article-thumbnail img,
#link-card .article .article-thumbnail .thumbnail-screen {
  height: 100% !important;
  width: 100% !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.theme-light #link-card .article .article-thumbnail .thumbnail-screen {
  opacity: 0.2 !important;
}

.theme-dark #link-card .article .article-thumbnail .thumbnail-screen {
  opacity: 0.24 !important;
}

#link-card .article .article-thumbnail:after {
  top: 0 !important;
  height: 100% !important;
  border-radius: 1rem 1rem 0 0 !important;
}

#link-card .article .article-content {
  grid-row: 2 / 3 !important;
  z-index: 40 !important;
  background-color: var(--background-secondary) !important;
  border-radius: 0 0 1rem 1rem !important;
  padding-top: 1.05rem !important;
  padding-bottom: 0.95rem !important;
  position: relative !important;
}

/* Put type badge onto image area */
#link-card .article .article-content > span:first-of-type {
  position: absolute !important;
  top: 0 !important;
  transform: translateY(-52%) !important;
  left: 1rem !important;
  z-index: 55 !important;
}

#link-card .article .article-content > span:first-of-type b {
  display: inline-block !important;
  padding: 0.34rem 0.82rem !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(4px) !important;
}

.theme-dark #link-card .article .article-content > span:first-of-type b {
  background: rgba(11, 31, 74, 0.9) !important;
  color: #f8fbff !important;
  border-color: rgba(125, 211, 252, 0.48) !important;
}

.theme-light #link-card .article .article-content > span:first-of-type b {
  background: rgba(125, 211, 252, 0.96) !important;
  color: #0b3a66 !important;
  border-color: rgba(56, 189, 248, 0.62) !important;
}

#link-card .article .article-content a h1 {
  margin-top: 0.18rem !important;
}

#link-card .article .article-content p {
  margin-top: 0.38rem !important;
}

/* ============================================================
   Post Card Layout - 1:1.5 with 3 equal rows
   ============================================================ */
.article-container:not(#link-card) {
  aspect-ratio: 1 / 1.5 !important;
}

.article-container:not(#link-card):has(> .feature-article) {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
}

.article-container:not(#link-card) .article {
  height: 100% !important;
  /* Reduce image frame height on normal post cards */
  grid-template-rows: 1.25fr 0.95fr 0.55fr !important;
}

.article-container:not(#link-card) .article .article-thumbnail {
  grid-row: 1 / 2 !important;
  overflow: hidden !important;
}

.article-container:not(#link-card) .article .article-thumbnail img,
.article-container:not(#link-card) .article .article-thumbnail .thumbnail-screen {
  top: 0 !important;
  height: 100% !important;
  border-radius: 1rem 1rem 0 0 !important;
}

.article-container:not(#link-card) .article .article-thumbnail:after {
  display: none !important;
}

.article-container:not(#link-card) .article .article-content {
  grid-row: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  column-gap: 0.45rem !important;
  row-gap: 0 !important;
  align-items: start !important;
  background-color: var(--background-secondary) !important;
  border-radius: 0 0 1rem 1rem !important;
  padding-top: 0.45rem !important;
  padding-bottom: 0.95rem !important;
  position: relative !important;
}

/* Move category + tags under title and unify style */
.article-container:not(#link-card) .article .article-content > a {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  order: 1 !important;
}

.article-container:not(#link-card) .article .article-content > span:first-of-type {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  transform: none !important;
  z-index: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0.24rem !important;
  margin-right: 0.45rem !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: start !important;
  text-align: left !important;
  white-space: nowrap !important;
  order: 2 !important;
}

/* Hide category on normal article cards */
.article-container:not(#link-card) .article .article-content > span:first-of-type,
.article-container:not(#link-card) .article .article-content > span:has(> b) {
  display: none !important;
}

.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  position: static !important;
  transform: none !important;
  z-index: auto !important;
  margin-bottom: 0.24rem !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  align-self: start !important;
  text-align: left !important;
  white-space: nowrap !important;
  order: 3 !important;
}

.article-container:not(#link-card) .article .article-content > span:has(> ul) {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) ul {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 0.45rem !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) ul li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: rgba(148, 163, 184, 0.86) !important;
}

.theme-dark .article-container:not(#link-card) .article .article-content > span:first-of-type b {
  background: transparent !important;
  color: rgba(148, 163, 184, 0.86) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.theme-light .article-container:not(#link-card) .article .article-content > span:nth-of-type(2) ul li {
  color: rgba(100, 116, 139, 0.9) !important;
}

.theme-light .article-container:not(#link-card) .article .article-content > span:first-of-type b {
  background: transparent !important;
  color: rgba(100, 116, 139, 0.9) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.article-container:not(#link-card) .article .article-content > span:first-of-type b::before {
  content: "# ";
}

.article-container:not(#link-card) .article .article-content > span:first-of-type b,
.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) li,
.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) li span,
.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) li em {
  font-size: 0.84rem !important;
  line-height: 1.05 !important;
  font-weight: 500 !important;
}

.article-container:not(#link-card) .article .article-content > span:nth-of-type(2) li em {
  font-style: normal !important;
  opacity: 0.7 !important;
}

.article-container:not(#link-card) .article .article-content > p {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin-top: 0.34rem !important;
  order: 4 !important;
}

.article-container:not(#link-card) .article .article-content > a h1 {
  margin-bottom: 0.02rem !important;
}

.article-container:not(#link-card) .article .article-content .article-footer {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  margin-top: 0.25rem !important;
  order: 5 !important;
}

@media (max-width: 768px) {
  .article-container:not(#link-card) {
    aspect-ratio: 1 / 1.35 !important;
  }
}

/* Post page prev/next cards: slightly smaller overall size */
.post-html ~ .grid .article-container:not(#link-card) {
  aspect-ratio: 1 / 1.28 !important;
  max-width: 92% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.post-html ~ .grid .article-container:not(#link-card) .article .article-content {
  padding-top: 0.32rem !important;
  padding-bottom: 0.72rem !important;
}

.post-html ~ .grid .article-container:not(#link-card) .article .article-content > p {
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* ============================================================
   Feature Card Height Fix
   ============================================================ */
.feature-article {
  height: 18rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.feature-article .feature-content > a {
  order: -1 !important;
}

.feature-article .feature-content > span {
  order: 1 !important;
}

/* Let feature cards dictate outer height instead of forces from article-container */
.article-container > .feature-article {
  aspect-ratio: auto !important;
  height: 18rem !important;
  max-height: none !important;
}

.feature-article .feature-thumbnail img,
.feature-article .feature-thumbnail span {
  height: 100% !important;
  width: 100% !important;
}

.feature-article .feature-thumbnail:after {
  left: 76% !important;
  width: 34% !important;
}

.feature-article .feature-content {
  padding: 1.4rem 1.4rem 1.1rem !important;
}

.feature-article .feature-content h1 {
  margin-top: 0.45rem !important;
  margin-bottom: 0.9rem !important;
  font-size: 1.45rem !important;
  line-height: 1.9rem !important;
}

/* First feature card: bigger title, smaller thumbnail */
.inverted-main-grid li:first-child .feature-content h1 {
  font-size: 1.9rem !important;
  line-height: 2.4rem !important;
}

.inverted-main-grid li:first-child .feature-thumbnail {
  max-width: 20% !important;
  min-width: 20% !important;
  max-height: 65% !important;
  align-self: center !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

.feature-article .feature-content p {
  margin-bottom: 0.25rem !important;
  padding-bottom: 0.4rem !important;
  font-size: 0.98rem !important;
  line-height: 1.45rem !important;
}

@media (max-width: 1024px) {
  .feature-article {
    height: 18rem !important;
  }

  .feature-article .feature-content {
    padding: 1rem 1rem 0.85rem !important;
  }
}

/* ============================================================
   About Skills - Monochrome Icons
   ============================================================ */
.theme-light .skill-badge {
  --skill-icon-color: #111111;
}

.theme-dark .skill-badge {
  --skill-icon-color: #f5f5f5;
}

.skill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.48em;
}

.skill-badge::before {
  content: "\f121";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--skill-icon-color, currentColor);
  font-size: 0.92em;
  width: 1em;
  text-align: center;
  line-height: 1;
}

/* Brand icons equivalent to fa-brands */
.skill-html::before { content: "\f13b"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-css::before { content: "\f38b"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-react::before { content: "\f41b"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-vue::before { content: "\f41f"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-javascript::before { content: "\f3b8"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-typescript::before { content: "\f121"; }
.skill-tailwind::before { content: "\f0c3"; }

.skill-astro::before { content: "\f135"; }
.skill-hexo::before { content: "\f0e8"; }
.skill-hugo::before { content: "\f07b"; }

.skill-fastapi::before { content: "\f0e7"; }
.skill-nodejs::before { content: "\f3d3"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-python::before { content: "\f3e2"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-restful::before { content: "\f1e0"; }
.skill-socket::before { content: "\f233"; }

.skill-postgresql::before { content: "\f1c0"; }
.skill-redis::before { content: "\f233"; }
.skill-sqlite::before { content: "\f1c0"; }

.skill-docker::before { content: "\f395"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }
.skill-nginx::before { content: "\f233"; }
.skill-cloudflare::before { content: "\f0c2"; }
.skill-debian::before { content: "\f42a"; font-family: "Font Awesome 6 Brands"; font-weight: 400; }

.skill-pwn::before { content: "\f3ed"; }
.skill-web::before { content: "\f0ac"; }
.skill-misc::before { content: "\f141"; }
.skill-crypto::before { content: "\f084"; }
.skill-reverse::before { content: "\f2f9"; }

/* ============================================================
   Waline - Dual Mode Readability
   ============================================================ */
.theme-dark .wl-panel,
.theme-dark .wl-card,
.theme-dark .wl-sort,
.theme-dark .wl-empty,
.theme-dark .wl-count,
.theme-dark .wl-meta,
.theme-dark .wl-content,
.theme-dark .wl-login-info {
  color: #e7edf7 !important;
}

.theme-dark .wl-card .wl-nick,
.theme-dark .wl-card .wl-user {
  color: #d7e9ff !important;
}

.theme-dark .wl-editor,
.theme-dark .wl-input,
.theme-dark .wl-textarea,
.theme-dark .wl-preview,
.theme-dark .wl-card {
  background: rgba(12, 20, 36, 0.82) !important;
  border-color: rgba(123, 174, 255, 0.35) !important;
}

.theme-dark .wl-textarea {
  color: #f2f7ff !important;
}

.theme-dark .wl-card .wl-content {
  color: #f5f9ff !important;
}

.theme-dark .wl-textarea::placeholder,
.theme-dark .wl-input::placeholder {
  color: #a8bad6 !important;
}

.theme-dark .wl-action,
.theme-dark .wl-like,
.theme-dark .wl-reply,
.theme-dark .wl-delete,
.theme-dark .wl-admin {
  color: #9fcbff !important;
}

/* Hide browser / OS tags in comment meta */
.theme-dark .wl-card .wl-os,
.theme-dark .wl-card .wl-browser,
.theme-light .wl-card .wl-os,
.theme-light .wl-card .wl-browser {
  display: none !important;
}

.theme-dark .wl-btn,
.theme-dark .wl-submit {
  background: #0b3a82 !important;
  border-color: #5fa9ff !important;
  color: #f4f8ff !important;
}

.theme-light .wl-panel,
.theme-light .wl-card,
.theme-light .wl-sort,
.theme-light .wl-empty,
.theme-light .wl-count,
.theme-light .wl-meta,
.theme-light .wl-content,
.theme-light .wl-login-info {
  color: #1f3b5a !important;
}

.theme-light .wl-editor,
.theme-light .wl-input,
.theme-light .wl-textarea,
.theme-light .wl-preview,
.theme-light .wl-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(56, 189, 248, 0.32) !important;
}

.theme-light .wl-textarea {
  color: #163a60 !important;
}

.theme-light .wl-textarea::placeholder,
.theme-light .wl-input::placeholder {
  color: #6f8fb3 !important;
}

.theme-light .wl-btn,
.theme-light .wl-submit {
  background: #7dd3fc !important;
  border-color: #38bdf8 !important;
  color: #0b3a66 !important;
}

/* :::success quote block support */
.post-html .custom-quote.success .custom-quote-svg {
  color: var(--custom-quote-success) !important;
}

.post-html .custom-quote.success {
  border-left: 3px solid var(--custom-quote-success) !important;
}

.post-html .custom-quote.success .custom-quote-title {
  color: var(--custom-quote-success) !important;
}

.post-html .custom-quote.success:before,
.post-html .custom-quote.success:after {
  background: linear-gradient(
    90deg,
    var(--custom-quote-success),
    var(--background-primary)
  ) !important;
}

.post-html .custom-quote.info .custom-quote-svg {
  color: var(--custom-quote-info) !important;
}

.post-html .custom-quote.info {
  border-left: 3px solid var(--custom-quote-info) !important;
}

.post-html .custom-quote.info .custom-quote-title {
  color: var(--custom-quote-info) !important;
}

.post-html .custom-quote.info:before,
.post-html .custom-quote.info:after {
  background: linear-gradient(
    90deg,
    var(--custom-quote-info),
    var(--background-primary)
  ) !important;
}

.feature-article .feature-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.feature-article .feature-content p {
  flex: 1 1 auto !important;
  order: 2 !important;
  max-height: calc(1.45rem * 5) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
}

.feature-article .feature-content .article-footer {
  order: 3 !important;
  margin-top: auto !important;
}

/* Hide category badge, show tags (#) in feature cards */
.feature-article .article-tag,
.feature-article .feature-content > span:not([class]) {
  display: none !important;
}

@media (max-width: 1024px) {
  .feature-article .feature-content p {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }

  .article-container:not(#link-card) .article .article-content > p {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* ---- Recommended Articles Section ---- */
/* Override Tailwind py-7 gap-7 */
.inverted-main-grid {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
  gap: 1.25rem !important;
  grid-template-columns: 245px minmax(0, 1fr) !important;
  align-items: stretch !important;
}

.inverted-main-grid > ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem !important;
}

/* 外層 li（含多餘包層）撐滿高度 */
.inverted-main-grid > ul > li {
  display: flex !important;
  flex-direction: column !important;
  height: 30rem !important;
}

.inverted-main-grid .article-container {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
}

.inverted-main-grid .article-container .article {
  height: 100% !important;
  overflow: hidden !important;
}

/* Banner: override Tailwind h-56 (14rem) */
.inverted-main-grid > div:first-child {
  height: auto !important;
}

/* Override ob-gradient-plate pb-10 (2.5rem) */
.inverted-main-grid .ob-gradient-plate {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* Override h2 pb-8 lg:pb-14 */
.inverted-main-grid h2.text-3xl {
  padding-bottom: 0.5rem !important;
  font-size: 1.1rem !important;
}

/* Article card content */
.inverted-main-grid .article-container:not(#link-card) .article .article-content {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  row-gap: 0 !important;
  overflow: hidden !important;
}

/* Description 佔滿剩餘空間並截斷 */
.inverted-main-grid .article-container:not(#link-card) .article .article-content > p {
  flex: 1 1 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Footer 固定在底部 */
.inverted-main-grid .article-container:not(#link-card) .article .article-content .article-footer {
  margin-top: auto !important;
  flex-shrink: 0 !important;
}

/* Force stable vertical layout for list cards: footer always pinned at bottom */
#article-list .article-container .article {
  height: 100% !important;
  overflow: hidden !important;
}

#article-list .article-container .article .article-content {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#article-list .article-container .article .article-content > p {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-bottom: 0.25rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
}

#article-list .article-container .article .article-content .article-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}