/* ============================================================
   theme.css — blue dark palette
   ============================================================ */

/* --- Design tokens (blue dark) --- */
:root {
    --bg-page: #060b18;
    --bg-surface: #0c1425;
    --bg-elevated: #121d35;
    --bg-code: #0a1020;
    --border: #1a2744;
    --border-hover: #253a5e;

    --text-heading: #e4eaf4;
    --text-body: #8fa4c8;
    --text-muted: #5e7499;
    --text-code: #bfcfe6;
    --text-line-nr: #3d5275;

    --primary: #3b82f6;
    --primary-hover: #60a5fa;
    --primary-light: #93c5fd;
    --primary-bg: rgba(59, 130, 246, 0.12);

    --green-bg: rgba(34, 197, 94, 0.1);
    --purple-bg: rgba(168, 85, 247, 0.1);
    --orange-bg: rgba(249, 115, 22, 0.1);
    --pink-bg: rgba(236, 72, 153, 0.1);
    --amber-bg: rgba(245, 158, 11, 0.1);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 24px rgba(59, 130, 246, 0.3);
}

/* --- Light override (for admin/auth toggle) --- */
html.light {
    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --border: #e2e8f0;
    --border-hover: #cbd5e1;

    --text-heading: #0f172a;
    --text-body: #475569;
    --text-muted: #94a3b8;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- Self-hosted Inter (woff2, variable weight 400-900) --- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/static/fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/static/fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100vh; }
body { font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; }

/* --- Buttons --- */
.btn-primary {
    background: #2563eb;
    color: #dbeafe;
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 24px;
    transition: all 0.25s ease;
}
.btn-primary:hover {
    background: #3b82f6;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.btn-secondary {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-heading);
    font-weight: 600;
    border-radius: 12px;
    padding: 10px 24px;
    transition: all 0.25s ease;
}
.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--border-hover);
}

/* --- Cards --- */
.card {
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}
.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.plugin-card, .feature-card, .info-card, .plan-card {
    background: var(--bg-surface);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}
.plugin-card:hover, .plan-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--primary);
}
.feature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}
.plan-card.popular {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.skeleton-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

/* --- Hero & banners --- */
.hero-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 50%, #2563eb 100%);
}
.hero-glow { display: none; }
.gradient-text { color: var(--primary-hover); }

.funpay-banner {
    background: var(--primary-bg);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
}

/* --- Text --- */
.text-secondary { color: var(--text-body); }

/* --- Inputs (filter chips) --- */
.filter-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.filter-chip:hover, .filter-chip.active {
    background: var(--primary-bg);
    border-color: var(--primary);
    color: var(--primary-light);
}

/* --- Links in content body --- */
.content-body a {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s;
}
.content-body a:hover { color: var(--primary-light); }

/* --- Footer links --- */
.footer-link {
    color: var(--text-body);
    transition: color 0.2s ease;
}
.footer-link:hover { color: var(--primary-light); }

/* --- Skeleton loading --- */
.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--border-hover) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Animations --- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.slide-up { animation: slideUp 0.6s ease-out forwards; }
.slide-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.slide-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.slide-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
.slide-up-delay-4 { animation-delay: 0.4s; opacity: 0; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.toast { animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-150 { animation-delay: 150ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }

/* --- Scrollbar --- */
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: var(--bg-surface); }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --- Status badges --- */
.status-active { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.status-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-error { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.status-info { background: var(--primary-bg); color: var(--primary-light); border: 1px solid rgba(59, 130, 246, 0.3); }

/* Light mode status badges */
html.light .status-active { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
html.light .status-pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
html.light .status-error { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
html.light .status-info { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }

/* ============================================================
   Tailwind CDN overrides — !important wins over dynamic <style>
   ============================================================ */

/* Gray text → blue-tinted */
.text-gray-900 { color: var(--text-heading) !important; }
.text-gray-800 { color: #c8d5e8 !important; }
.text-gray-700 { color: var(--text-code) !important; }
.text-gray-600 { color: var(--text-body) !important; }
.text-gray-500 { color: var(--text-body) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-body) !important; }

/* Gray backgrounds → navy */
.bg-white { background-color: var(--bg-surface) !important; }
.bg-gray-50 { background-color: var(--bg-page) !important; }
.bg-gray-100 { background-color: var(--bg-elevated) !important; }
.bg-gray-200 { background-color: var(--border) !important; }

/* Gray borders → navy */
.border-border { border-color: var(--border) !important; }
.border-gray-100 { border-color: var(--border) !important; }
.border-gray-200 { border-color: var(--border) !important; }
.border-gray-300 { border-color: var(--border) !important; }

/* Dividers */
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Gray hovers */
.hover\:bg-gray-50:hover { background-color: var(--bg-elevated) !important; }
.hover\:bg-gray-100:hover { background-color: var(--bg-elevated) !important; }
.hover\:bg-gray-200:hover { background-color: var(--border-hover) !important; }
.hover\:text-gray-900:hover { color: var(--text-heading) !important; }
.hover\:text-gray-200:hover { color: #e4eaf4 !important; }

/* Strikethrough */
.line-through.text-gray-400 { color: var(--text-muted) !important; }

/* Colored text */
.text-green-600 { color: #4ade80 !important; }
.text-green-700 { color: #4ade80 !important; }
.text-green-400 { color: #4ade80 !important; }
.text-blue-600 { color: #60a5fa !important; }
.text-cyan-600 { color: #22d3ee !important; }
.text-orange-600 { color: #fb923c !important; }
.text-yellow-400 { color: #facc15 !important; }
.text-red-600 { color: #f87171 !important; }
.text-red-500 { color: #f87171 !important; }
.text-red-400 { color: #f87171 !important; }
.text-indigo-400 { color: var(--primary-hover) !important; }

/* Colored backgrounds — translucent on navy */
.bg-blue-50 { background-color: var(--primary-bg) !important; }
.bg-green-50 { background-color: var(--green-bg) !important; }
.bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
.bg-purple-50 { background-color: var(--purple-bg) !important; }
.bg-orange-50 { background-color: var(--orange-bg) !important; }
.bg-pink-50 { background-color: var(--pink-bg) !important; }
.bg-indigo-50 { background-color: var(--primary-bg) !important; }
.bg-amber-50 { background-color: var(--amber-bg) !important; }

/* Colored borders */
.border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; }
.border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; }
.border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; }

/* Colored hovers */
.hover\:bg-blue-100:hover { background-color: rgba(59, 130, 246, 0.15) !important; }
.hover\:bg-green-100:hover { background-color: rgba(34, 197, 94, 0.15) !important; }
.hover\:text-green-600:hover { color: #4ade80 !important; }

/* Ring / focus */
.ring-1 { --tw-ring-color: var(--border) !important; }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--primary) !important; }

/* ============================================================
   Components
   ============================================================ */

/* --- Code viewer --- */
.code-viewer {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.code-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.code-viewer__body {
    overflow: auto;
    max-height: 70vh;
}
.code-viewer__lines {
    flex-shrink: 0;
    width: 52px;
    text-align: right;
    padding: 20px 12px 20px 0;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    line-height: 1.7;
    color: var(--text-line-nr);
    user-select: none;
    -webkit-user-select: none;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-code);
}
.code-viewer__code {
    padding: 20px 20px 20px 8px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    line-height: 1.7;
    color: var(--text-code);
    white-space: pre;
}

/* --- Install command --- */
.install-command {
    background: var(--bg-surface);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 12px;
    padding: 20px 24px;
}
.install-command__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
}
.install-command__text {
    background: var(--bg-code);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 13px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    color: #7dd3a8;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

/* --- Button icon --- */
.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-body);
    transition: all 0.2s ease;
}
.btn-icon:hover {
    border-color: var(--border-hover);
    color: var(--text-heading);
    background: var(--border);
}
.btn-icon--primary {
    border-color: rgba(59, 130, 246, 0.3);
    background: var(--primary-bg);
    color: var(--primary-light);
}
.btn-icon--primary:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.18);
}