/* ===== 简库主题覆盖 CSS ===== */
/* 此文件由 header.php 提取，依赖 :root 中以下 CSS 变量：
   --jk-radius, --jk-radius-sm, --jk-radius-lg
   --jk-primary, --jk-primary-light, --jk-primary-dark
   --jk-primary-r, --jk-primary-g, --jk-primary-b (RGB分量)
*/

/* ===== 基础样式 ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: var(--jk-bg-secondary, #f8fafc);
}

/* Fix Markdown background */
.markdown-body { background-color: transparent !important; }

/* Fix Markdown Italic */
.markdown-body em, .markdown-body i { font-style: italic !important; }

/* Markdown enhancements */
.markdown-body h1 { font-size: 1.75em; font-weight: 700; margin: 1.2em 0 0.6em; padding-bottom: 0.3em; border-bottom: 1px solid #e5e7eb; }
.markdown-body h2 { font-size: 1.4em; font-weight: 600; margin: 1em 0 0.5em; padding-bottom: 0.25em; border-bottom: 1px solid #e5e7eb; }
.markdown-body h3 { font-size: 1.2em; font-weight: 600; margin: 0.8em 0 0.4em; }
.markdown-body h4 { font-size: 1.05em; font-weight: 600; margin: 0.6em 0 0.3em; }
.markdown-body p { margin: 0.6em 0; line-height: 1.75; }
.markdown-body ul, .markdown-body ol { margin: 0.6em 0; padding-left: 2em; }
.markdown-body li { margin: 0.25em 0; line-height: 1.7; }
.markdown-body li > ul, .markdown-body li > ol { margin: 0.15em 0; }
.markdown-body blockquote {
    margin: 1em 0; padding: 0.5em 1em;
    border-left: 4px solid #d1d5db; background: #f9fafb;
    border-radius: 0 8px 8px 0; color: #4b5563;
}
.markdown-body blockquote p { margin: 0.3em 0; }
.markdown-body code {
    background: #f3f4f6; padding: 0.15em 0.4em;
    border-radius: 4px; font-size: 0.88em;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
}
.markdown-body pre {
    background: #1e293b; border-radius: 12px;
    padding: 1em 1.25em; margin: 1em 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.markdown-body pre code { background: transparent; padding: 0; font-size: 0.85em; color: #e2e8f0; border-radius: 0; }
.markdown-body table { border-collapse: collapse; width: 100%; margin: 1em 0; overflow-x: auto; display: block; }
.markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; }
.markdown-body th { background: #f9fafb; font-weight: 600; }
.markdown-body tr:nth-child(even) { background: #f9fafb; }
.markdown-body hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.markdown-body img { max-width: 100%; border-radius: 8px; margin: 0.5em 0; }
.markdown-body a { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
.markdown-body a:hover { color: #1d4ed8; }
.markdown-body input[type="checkbox"] { margin-right: 0.4em; }

/* Golden Ripple Animation */
@keyframes golden-ripple {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.golden-ripple { background: linear-gradient(45deg, #FFD700, #FDB931, #FFD700); background-size: 200% 200%; animation: none; }
.golden-ripple:hover { animation: golden-ripple 3s ease infinite; }
@media (prefers-reduced-motion: reduce) {
    .golden-ripple, .golden-ripple:hover { animation: none !important; }
}

/* ===== 圆角覆盖 ===== */
.glass-card, .card-shadow { border-radius: var(--jk-radius) !important; }
.ai-container { border-radius: var(--jk-radius-lg) !important; }
.ai-content { border-radius: var(--jk-radius-lg) !important; }
.ai-glow-border { border-radius: calc(var(--jk-radius-lg) + 10px) !important; }
.ai-trigger-btn { border-radius: var(--jk-radius) !important; }
.btn-primary:not([class*="rounded-full"]),
.btn-accent:not([class*="rounded-full"]) { border-radius: var(--jk-radius) !important; }
input[type="text"]:not([class*="rounded-full"]):not([class*="rounded-\["]),
input[type="email"]:not([class*="rounded-full"]),
input[type="password"]:not([class*="rounded-full"]),
input[type="number"]:not([class*="rounded-full"]),
input[type="url"]:not([class*="rounded-full"]),
textarea:not([class*="rounded-full"]),
select:not([class*="rounded-full"]) { border-radius: var(--jk-radius-sm) !important; }
[class*="glass-card"][class*="p-6"],
[class*="glass-card"][class*="p-8"] { border-radius: var(--jk-radius-lg) !important; }
button:not([class*="rounded-full"]):not([class*="rounded-\["]),
a[class*="btn-"]:not([class*="rounded-full"]) { border-radius: var(--jk-radius) !important; }
[class*="rounded-full"].btn-primary,
[class*="rounded-full"].btn-accent,
button[class*="rounded-full"],
a[class*="rounded-full"],
.rounded-full { border-radius: 9999px !important; }
.dropdown-menu, [class*="shadow-lg"][class*="py-1"],
[class*="shadow-lg"][class*="py-2"] { border-radius: var(--jk-radius) !important; }

/* ===== 配色覆盖（使用 CSS 变量，无需 PHP） ===== */

.btn-primary {
    background-color: var(--jk-primary) !important;
    box-shadow: 0 4px 10px rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important;
}
.btn-primary:hover {
    background-color: var(--jk-primary-dark) !important;
    box-shadow: 0 6px 14px rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important;
}
.btn-primary:active {
    box-shadow: 0 2px 5px rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important;
}
.cat-card:hover {
    box-shadow: 0 8px 30px rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.cat-card-glow {
    background: radial-gradient(circle, rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.07) 0%, rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.03) 35%, transparent 70%) !important;
}
.btn-primary[class*="shadow-"] {
    --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}
.btn-primary:hover[class*="shadow-"] {
    --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.4) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}
button[class*="bg-primary"][class*="shadow-"],
a[class*="bg-primary"][class*="shadow-"] {
    --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}
button[class*="bg-primary"]:hover[class*="shadow-"],
a[class*="bg-primary"]:hover[class*="shadow-"] {
    --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.4) !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}
.btn-accent { background-color: var(--jk-primary-light) !important; color: var(--jk-primary) !important; }
.text-primary { color: var(--jk-primary) !important; }
.bg-primary { background-color: var(--jk-primary) !important; }
.ring-primary\/10, .ring-primary\/20 { --tw-ring-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.focus\:ring-primary\/20:focus, .focus\:ring-primary\/10:focus { --tw-ring-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.border-primary\/20 { border-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.hover\:bg-primary:hover { background-color: var(--jk-primary-dark) !important; }
.bg-primary\/10 { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.bg-primary\/5 { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.05) !important; }
.bg-primary\/\[0\.02\] { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.02) !important; }
.hover\:bg-primary\/5:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.05) !important; }
.hover\:bg-primary\/10:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.hover\:bg-primary\/20:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.hover\:bg-primary\/50:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.5) !important; }
.hover\:bg-primary\/90:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.9) !important; }
.hover\:bg-primary\/\[0\.02\]:hover { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.02) !important; }
.hover\:text-primary:hover { color: var(--jk-primary) !important; }
.hover\:text-primary\/80:hover { color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.8) !important; }
.group:hover .group-hover\:bg-primary\/10 { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.group:hover .group-hover\:bg-primary\/20 { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.group:hover .group-hover\:text-primary { color: var(--jk-primary) !important; }
.group:hover .group-hover\:border-primary { border-color: var(--jk-primary) !important; }
.shadow-primary\/20 { --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.shadow-primary\/30 { --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.hover\:shadow-primary\/30:hover { --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.hover\:shadow-primary\/40:hover { --tw-shadow-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.4) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
.border-primary\/10 { border-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.border-primary\/20 { border-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.hover\:border-primary\/20:hover { border-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.2) !important; }
.text-primary\/30 { color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.3) !important; }
.text-primary\/70 { color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.7) !important; }
.peer:checked ~ .peer-checked\:bg-primary { background-color: var(--jk-primary) !important; }
.from-primary\/5 {
    --tw-gradient-from: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.05) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-primary\/10 {
    --tw-gradient-to: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) var(--tw-gradient-to-position) !important;
}
.file\:bg-primary::file-selector-button { background-color: var(--jk-primary) !important; }
.file\:bg-primary\/10::file-selector-button { background-color: rgba(var(--jk-primary-r), var(--jk-primary-g), var(--jk-primary-b), 0.1) !important; }
.file\:text-primary::file-selector-button { color: var(--jk-primary) !important; }
input[type="radio"].text-primary,
input[type="checkbox"].text-primary,
input[type="radio"]:checked,
input[type="checkbox"]:checked { accent-color: var(--jk-primary) !important; }
