/* =============================================
   Blog Enhanced Styles - Online Sidehustles
   Loaded after inline styles to upgrade visuals
   ============================================= */

/* ---- Reading progress bar ---- */
#oc-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #32CD32, #FFD700, #32CD32);
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite;
    z-index: 99999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(50,205,50,0.7);
}
@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Brighter page background ---- */
body {
    background: linear-gradient(160deg, #0f2b10 0%, #122b12 40%, #0f231a 100%) !important;
}
body::before {
    background:
        radial-gradient(circle at 15% 25%, rgba(50,205,50,0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(100,220,100,0.12) 0%, transparent 45%) !important;
}

/* ---- Wider article + brighter card ---- */
article {
    max-width: 1080px !important;
    margin: 110px auto 60px !important;
    padding: 3rem 3.5rem !important;
    background: rgba(18, 38, 20, 0.88) !important;
    border: 1px solid rgba(50,205,50,0.25) !important;
    border-radius: 22px !important;
    box-shadow:
        0 0 0 1px rgba(50,205,50,0.08),
        0 8px 48px rgba(0,0,0,0.55),
        0 1px 0 rgba(80,220,80,0.15) inset !important;
    backdrop-filter: blur(12px);
}

/* ---- Article hero banner ---- */
.oc-hero {
    background: linear-gradient(135deg, #0e2a10 0%, #143318 45%, #0f2420 100%);
    border-bottom: 1px solid rgba(50,205,50,0.25);
    margin: -3rem -3.5rem 2.5rem;
    padding: 3rem 3.5rem 2.5rem;
    position: relative;
    overflow: hidden;
    border-radius: 22px 22px 0 0;
}
.oc-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(50,205,50,0.16) 0%, transparent 65%);
    pointer-events: none;
}
.oc-hero::after {
    content: '';
    position: absolute;
    bottom: -50px; left: 15%;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.oc-hero .breadcrumb {
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
    position: relative;
    z-index: 1;
    color: rgba(144,238,144,0.7);
}
.oc-hero .breadcrumb a { color: rgba(144,238,144,0.7); text-decoration: none; }
.oc-hero .breadcrumb a:hover { color: #90EE90; }
.oc-hero .category-badge {
    position: relative;
    z-index: 1;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    display: inline-block;
    background: rgba(50,205,50,0.2) !important;
    border: 1px solid rgba(50,205,50,0.4) !important;
    color: #6ee86e !important;
    padding: 0.35rem 1rem !important;
    border-radius: 20px !important;
}
.oc-hero h1 {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    line-height: 1.22;
    margin-bottom: 1.2rem;
    background: linear-gradient(135deg, #ffffff 0%, #b0ffb0 55%, #50e050 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.oc-hero .article-meta {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(50,205,50,0.18);
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.oc-hero .article-meta .meta-item {
    background: rgba(50,205,50,0.12);
    border: 1px solid rgba(50,205,50,0.25);
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: rgba(180,255,180,0.85);
}

/* ---- Section headings ---- */
article h2 {
    font-size: 1.65rem !important;
    color: #5de85d !important;
    margin: 3rem 0 1.2rem !important;
    padding: 0.85rem 1.4rem !important;
    background: linear-gradient(90deg, rgba(50,205,50,0.14) 0%, rgba(50,205,50,0.03) 100%) !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    position: relative;
}
article h2::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #50e050, #FFD700);
    border-radius: 4px 0 0 4px;
}
article h3 {
    font-size: 1.2rem !important;
    color: #a0f0a0 !important;
    margin: 1.8rem 0 0.8rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(50,205,50,0.2) !important;
}

/* ---- Body text ---- */
article p, article li {
    color: #cceacc !important;
    line-height: 1.9 !important;
    font-size: 1.01rem;
}
article strong { color: #90EE90 !important; }
article a { color: #5de85d !important; text-decoration: underline; text-decoration-color: rgba(93,232,93,0.3); }
article a:hover { color: #b0ffb0 !important; }
article ul li::marker { color: #50e050; }
article ol li::marker { color: #50e050; font-weight: 700; }

/* ---- Stat cards ---- */
.stat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
    margin: 2rem 0 !important;
}
.stat-card {
    background: linear-gradient(135deg, rgba(20,50,22,0.95), rgba(12,35,14,0.95)) !important;
    border: 1px solid rgba(50,205,50,0.35) !important;
    border-radius: 16px !important;
    padding: 1.6rem !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(80,220,80,0.1) !important;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.stat-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(80,220,80,0.65) !important;
    box-shadow: 0 12px 32px rgba(50,205,50,0.18) !important;
}
.stat-number {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block !important;
    line-height: 1.1;
}
.stat-label {
    font-size: 0.82rem !important;
    color: rgba(160,240,160,0.8) !important;
    margin-top: 0.4rem !important;
}

/* ---- TOC ---- */
.toc {
    background: linear-gradient(135deg, rgba(16,42,18,0.95), rgba(10,28,12,0.95)) !important;
    border: 1px solid rgba(50,205,50,0.35) !important;
    border-radius: 18px !important;
    padding: 2rem 2.2rem !important;
    margin: 2rem 0 !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(80,220,80,0.12) !important;
    position: relative;
    overflow: hidden;
}
.toc::before {
    content: '📋';
    position: absolute;
    top: -10px; right: 1.2rem;
    font-size: 6rem;
    opacity: 0.05;
    pointer-events: none;
}
.toc h3 {
    color: #5de85d !important;
    font-size: 0.85rem !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(50,205,50,0.2) !important;
    padding-bottom: 0.8rem !important;
    margin-bottom: 1.1rem !important;
    margin-top: 0 !important;
}
.toc ul { list-style: none !important; margin: 0 !important; }
.toc li {
    margin: 0.45rem 0 !important;
    padding-left: 1.6rem !important;
    position: relative;
}
.toc li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #5de85d;
    font-size: 0.8rem;
    top: 0.18rem;
}
.toc a {
    color: rgba(160,240,160,0.9) !important;
    text-decoration: none !important;
    font-size: 0.96rem !important;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}
.toc a:hover { color: #90EE90 !important; padding-left: 4px !important; }

/* ---- Highlight / tip boxes ---- */
.highlight-box {
    background: linear-gradient(135deg, rgba(20,60,22,0.9), rgba(14,42,16,0.9)) !important;
    border: 1px solid rgba(50,205,50,0.35) !important;
    border-left: none !important;
    border-radius: 14px !important;
    padding: 1.6rem 2rem !important;
    margin: 2rem 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(80,220,80,0.12) !important;
}
.highlight-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, #50e050, #90EE90);
    border-radius: 4px 0 0 4px;
}
.highlight-box h4 {
    color: #6ee86e !important;
    font-size: 1rem !important;
    margin-bottom: 0.6rem !important;
    margin-top: 0 !important;
}
.highlight-box p, .highlight-box ul, .highlight-box li {
    color: #cceacc !important;
    margin-bottom: 0 !important;
}
.highlight-box code {
    background: rgba(50,205,50,0.18) !important;
    border: 1px solid rgba(50,205,50,0.3) !important;
    color: #90EE90 !important;
    padding: 0.1rem 0.45rem;
    border-radius: 5px;
    font-size: 0.88rem;
}

/* ---- Warn boxes ---- */
.warn-box {
    background: linear-gradient(135deg, rgba(50,38,6,0.9), rgba(35,27,4,0.9)) !important;
    border: 1px solid rgba(255,193,7,0.4) !important;
    border-left: none !important;
    border-radius: 14px !important;
    padding: 1.6rem 2rem !important;
    margin: 2rem 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,193,7,0.1) !important;
}
.warn-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, #FFC107, #FF8F00);
}
.warn-box h4 { color: #FFD54F !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; }
.warn-box p { color: #e8d8b0 !important; margin-bottom: 0 !important; }

/* ---- Code blocks ---- */
.code-block {
    background: rgba(4, 14, 5, 0.9) !important;
    border: 1px solid rgba(50,205,50,0.25) !important;
    border-radius: 12px !important;
    margin: 1.2rem 0 !important;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    position: relative;
    padding-bottom: 1rem !important;
}
.code-block::before {
    content: 'TERMINAL';
    display: block;
    background: rgba(50,205,50,0.14);
    border-bottom: 1px solid rgba(50,205,50,0.2);
    padding: 0.45rem 1.1rem;
    font-size: 0.68rem;
    font-family: 'Consolas', monospace;
    color: rgba(80,220,80,0.65);
    letter-spacing: 2px;
    font-weight: 600;
}
code {
    font-family: 'Consolas', 'Fira Code', 'Monaco', monospace !important;
    color: #90EE90 !important;
}

/* ---- Tables ---- */
table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 1.5rem 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
    border: 1px solid rgba(50,205,50,0.2) !important;
}
table thead tr { background: linear-gradient(90deg, rgba(50,205,50,0.22), rgba(50,205,50,0.10)) !important; }
th {
    color: #a0f0a0 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 1rem 1.3rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(50,205,50,0.25) !important;
}
td {
    padding: 0.9rem 1.3rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(50,205,50,0.1) !important;
    color: #cceacc !important;
    font-size: 0.95rem !important;
}
tr:last-child td { border-bottom: none !important; }
tr:nth-child(even) td { background: rgba(50,205,50,0.05) !important; }
tr:hover td { background: rgba(50,205,50,0.1) !important; transition: background 0.2s; }

/* ---- CTA box ---- */
.cta-box {
    background: linear-gradient(135deg, rgba(20,60,22,0.95), rgba(15,45,18,0.95)) !important;
    border: 1px solid rgba(50,205,50,0.4) !important;
    border-radius: 22px !important;
    padding: 2.8rem !important;
    text-align: center !important;
    margin: 3rem 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(0,0,0,0.5), inset 0 1px 0 rgba(80,220,80,0.18) !important;
}
.cta-box::before {
    content: '';
    position: absolute;
    top: -60%; left: -20%;
    width: 140%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(50,205,50,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.cta-box h3 { color: #FFD700 !important; font-size: 1.65rem !important; margin-top: 0 !important; position: relative; z-index: 1; }
.cta-box p { color: rgba(200,240,200,0.85) !important; margin-bottom: 1.5rem !important; position: relative; z-index: 1; }
.cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, #40d840, #228B22) !important;
    color: white !important;
    padding: 1rem 2.8rem !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    box-shadow: 0 8px 28px rgba(50,205,50,0.38) !important;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    z-index: 1;
}
.cta-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px rgba(50,205,50,0.5) !important;
}

/* ---- Blockquotes ---- */
article blockquote {
    border-left: none !important;
    background: linear-gradient(135deg, rgba(20,55,22,0.8), rgba(0,0,0,0.3)) !important;
    border-radius: 14px !important;
    padding: 1.6rem 2rem 1.6rem 3.5rem !important;
    margin: 2rem 0 !important;
    font-size: 1.12rem !important;
    font-style: italic !important;
    color: #a0f0a0 !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
article blockquote::before {
    content: '"';
    font-size: 5rem;
    color: rgba(50,205,50,0.25);
    position: absolute;
    top: -0.8rem;
    left: 0.8rem;
    line-height: 1;
    font-family: Georgia, serif;
}

/* ---- VPS / step cards (openclaw) ---- */
.vps-card {
    background: linear-gradient(135deg, rgba(14,35,55,0.92), rgba(10,28,42,0.92)) !important;
    border: 1px solid rgba(33,150,243,0.35) !important;
    border-radius: 18px !important;
    padding: 2rem !important;
    margin: 2rem 0 !important;
    box-shadow: 0 4px 22px rgba(0,0,0,0.4) !important;
}
.vps-card h4 { color: #64B5F6 !important; }
.vps-card a { color: #64B5F6 !important; }
.step-block {
    background: rgba(8, 22, 10, 0.85) !important;
    border: 1px solid rgba(50,205,50,0.22) !important;
    border-radius: 16px !important;
    padding: 1.6rem 2rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.step-block .step-num {
    color: #50e050 !important;
    font-size: 0.72rem !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 0.5rem !important;
    opacity: 0.85 !important;
    font-weight: 700 !important;
}

/* ---- Footer ---- */
footer {
    background: rgba(4, 14, 5, 0.9) !important;
    border-top: 1px solid rgba(50,205,50,0.18) !important;
}

/* ---- Responsive ---- */
@media (max-width: 1120px) {
    article { max-width: 94% !important; padding: 2.5rem 2.5rem !important; }
    .oc-hero { margin: -2.5rem -2.5rem 2rem !important; padding: 2.5rem 2.5rem 2rem !important; }
}
@media (max-width: 768px) {
    article {
        max-width: 100% !important;
        margin: 80px 0.75rem 40px !important;
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
    }
    .oc-hero {
        margin: -1.5rem -1.25rem 1.8rem !important;
        padding: 1.5rem 1.25rem 1.5rem !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .oc-hero h1 {
        font-size: 1.65rem !important;
        -webkit-text-fill-color: #b0ffb0 !important;
    }
    article h2 { font-size: 1.35rem !important; padding: 0.7rem 1rem !important; }
    .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    table { font-size: 0.85rem; }
    th, td { padding: 0.65rem 0.8rem !important; }
}
@media (max-width: 480px) {
    article { margin: 75px 0.4rem 30px !important; padding: 1.2rem 1rem !important; }
    .oc-hero { margin: -1.2rem -1rem 1.5rem !important; padding: 1.2rem 1rem !important; }
    .stat-grid { grid-template-columns: 1fr 1fr !important; }
}


/* =============================================
   SIDE VISUAL ELEMENTS - appended to blog-enhanced.css
   ============================================= */

/* ---- Fixed side accent bars ---- */
.oc-side-left, .oc-side-right {
    position: fixed;
    top: 0; bottom: 0;
    width: 3px;
    z-index: 400;
    pointer-events: none;
}
.oc-side-left {
    left: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0) 8%,
        rgba(50,205,50,0.55) 30%,
        rgba(255,215,0,0.45) 55%,
        rgba(50,205,50,0.55) 75%,
        rgba(50,205,50,0.0) 92%,
        transparent 100%);
    animation: sideBarShift 6s ease-in-out infinite;
}
.oc-side-right {
    right: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0) 8%,
        rgba(50,205,50,0.35) 40%,
        rgba(255,215,0,0.30) 65%,
        rgba(50,205,50,0.35) 80%,
        rgba(50,205,50,0.0) 92%,
        transparent 100%);
    animation: sideBarShift 6s ease-in-out infinite reverse;
}
@keyframes sideBarShift {
    0%, 100% { opacity: 0.6; transform: scaleY(0.95); }
    50%       { opacity: 1.0; transform: scaleY(1.05); }
}

/* ---- Side glow orbs ---- */
.oc-glow-left, .oc-glow-right {
    position: fixed;
    width: 200px; height: 200px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 8s ease-in-out infinite;
}
.oc-glow-left {
    left: -80px; top: 35%;
    background: radial-gradient(circle, rgba(50,205,50,0.14) 0%, transparent 70%);
}
.oc-glow-right {
    right: -80px; top: 55%;
    background: radial-gradient(circle, rgba(255,215,0,0.10) 0%, transparent 70%);
    animation-delay: -4s;
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-40px); }
}

/* ---- Floating side particles ---- */
.oc-particle {
    position: fixed;
    font-size: 1.4rem;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    animation: particleRise linear infinite;
    filter: drop-shadow(0 0 6px rgba(50,205,50,0.4));
}
@keyframes particleRise {
    0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
    8%   { opacity: 0.18; }
    92%  { opacity: 0.18; }
    100% { transform: translateY(-120px) rotate(360deg); opacity: 0; }
}

/* ---- Sticky mini-TOC sidebar ---- */
#oc-toc-sidebar {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    background: rgba(10,28,12,0.92);
    border: 1px solid rgba(50,205,50,0.3);
    border-radius: 16px;
    padding: 1.2rem 1.1rem;
    z-index: 800;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(80,220,80,0.1);
    max-height: 70vh;
    overflow-y: auto;
    transition: opacity 0.3s;
    scrollbar-width: thin;
    scrollbar-color: rgba(50,205,50,0.3) transparent;
}
#oc-toc-sidebar::-webkit-scrollbar { width: 3px; }
#oc-toc-sidebar::-webkit-scrollbar-thumb { background: rgba(50,205,50,0.3); border-radius: 3px; }
#oc-toc-sidebar .oc-toc-title {
    font-size: 0.68rem;
    letter-spacing: 2px;
    color: rgba(80,220,80,0.6);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(50,205,50,0.18);
}
#oc-toc-sidebar ul {
    list-style: none;
    margin: 0; padding: 0;
}
#oc-toc-sidebar li { margin: 0.3rem 0; }
#oc-toc-sidebar a {
    font-size: 0.82rem;
    color: rgba(144,238,144,0.65);
    text-decoration: none;
    display: block;
    padding: 0.3rem 0.5rem 0.3rem 1.2rem;
    border-radius: 6px;
    position: relative;
    transition: color 0.2s, background 0.2s, padding-left 0.2s;
    line-height: 1.4;
}
#oc-toc-sidebar a::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0;
    background: #32CD32;
    border-radius: 3px;
    transition: height 0.25s;
}
#oc-toc-sidebar a.oc-toc-active {
    color: #90EE90;
    background: rgba(50,205,50,0.1);
    padding-left: 1.5rem;
}
#oc-toc-sidebar a.oc-toc-active::before { height: 70%; }

/* Only show sidebar on wide screens */
@media (max-width: 1380px) {
    #oc-toc-sidebar { display: none !important; }
}
@media (max-width: 900px) {
    .oc-side-left, .oc-side-right,
    .oc-glow-left, .oc-glow-right { display: none; }
}

/* =============================================
   SIDE VISUAL ELEMENTS - appended to blog-enhanced.css
   ============================================= */

/* ---- Background grid pattern ---- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(50,205,50,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50,205,50,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 0;
    pointer-events: none;
}

/* ---- Fixed side accent bars (THICK & BRIGHT) ---- */
.oc-side-left, .oc-side-right {
    position: fixed;
    top: 0; bottom: 0;
    pointer-events: none;
    z-index: 500;
}
/* Outer bar */
.oc-side-left {
    left: 0;
    width: 5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0)  5%,
        rgba(50,205,50,0.9) 25%,
        rgba(255,215,0,0.8) 50%,
        rgba(50,205,50,0.9) 75%,
        rgba(50,205,50,0.0) 95%,
        transparent 100%);
    animation: sideBarPulse 4s ease-in-out infinite;
    box-shadow: 2px 0 18px rgba(50,205,50,0.5);
}
.oc-side-right {
    right: 0;
    width: 5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0)  5%,
        rgba(50,205,50,0.7) 35%,
        rgba(255,215,0,0.6) 55%,
        rgba(50,205,50,0.7) 78%,
        rgba(50,205,50,0.0) 95%,
        transparent 100%);
    animation: sideBarPulse 4s ease-in-out infinite reverse;
    box-shadow: -2px 0 18px rgba(50,205,50,0.4);
}
/* Inner accent bars */
.oc-side-left-inner {
    position: fixed;
    left: 7px; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(50,205,50,0.35) 30%,
        rgba(255,215,0,0.25) 60%,
        rgba(50,205,50,0.35) 80%, transparent);
    z-index: 499;
    pointer-events: none;
    animation: sideBarPulse 4s ease-in-out infinite 1s;
}
.oc-side-right-inner {
    position: fixed;
    right: 7px; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(50,205,50,0.35) 30%,
        rgba(255,215,0,0.25) 60%,
        rgba(50,205,50,0.35) 80%, transparent);
    z-index: 499;
    pointer-events: none;
    animation: sideBarPulse 4s ease-in-out infinite reverse 1s;
}
@keyframes sideBarPulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1.0; }
}

    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100vh; opacity: 0; }
}

/* ---- Side glow orbs (BIGGER & BRIGHTER) ---- */
.oc-glow-left, .oc-glow-right,
.oc-glow-left2, .oc-glow-right2 {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.oc-glow-left {
    left: -100px; top: 25%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(50,205,50,0.22) 0%, transparent 65%);
    animation: orbFloat1 9s ease-in-out infinite;
}
.oc-glow-right {
    right: -100px; top: 55%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 65%);
    animation: orbFloat1 9s ease-in-out infinite reverse;
    animation-delay: -4s;
}
.oc-glow-left2 {
    left: -80px; top: 65%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(80,220,80,0.15) 0%, transparent 65%);
    animation: orbFloat1 12s ease-in-out infinite;
    animation-delay: -6s;
}
.oc-glow-right2 {
    right: -80px; top: 15%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(50,205,50,0.13) 0%, transparent 65%);
    animation: orbFloat1 11s ease-in-out infinite reverse;
    animation-delay: -2s;
}
@keyframes orbFloat1 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-55px) scale(1.08); }
}

/* ---- Floating particles (styled via CSS, positioned by JS) ---- */
.oc-particle {
    position: fixed;
    pointer-events: none;
    z-index: 3;
    animation: particleRise2 linear infinite;
}
@keyframes particleRise2 {
    0%   { transform: translateY(105vh) rotate(0deg);   opacity: 0; }
    6%   { opacity: 1; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-140px) rotate(400deg); opacity: 0; }
}

/* ---- Article animated glow border ---- */
article {
    animation: articleGlow 5s ease-in-out infinite !important;
}
@keyframes articleGlow {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(50,205,50,0.08),
        0 8px 48px rgba(0,0,0,0.55),
        0 0 40px rgba(50,205,50,0.08) !important; }
    50%       { box-shadow:
        0 0 0 1px rgba(50,205,50,0.22),
        0 8px 48px rgba(0,0,0,0.55),
        0 0 60px rgba(50,205,50,0.18) !important; }
}

/* ---- Article corner decorations ---- */
article::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 50px; height: 50px;
    border-top: 2px solid rgba(50,205,50,0.7);
    border-left: 2px solid rgba(50,205,50,0.7);
    border-radius: 22px 0 0 0;
    pointer-events: none;
    z-index: 2;
}
article::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 50px; height: 50px;
    border-bottom: 2px solid rgba(255,215,0,0.5);
    border-right: 2px solid rgba(255,215,0,0.5);
    border-radius: 0 0 22px 0;
    pointer-events: none;
    z-index: 2;
}
/* need position:relative on article */
article { position: relative !important; overflow: visible !important; }

/* ---- Glowing section headers ---- */
article h2 {
    text-shadow: 0 0 20px rgba(50,205,50,0.35) !important;
    transition: text-shadow 0.3s;
}
article h2:hover {
    text-shadow: 0 0 30px rgba(50,205,50,0.65) !important;
}

/* ---- Pulsing category badge ---- */
.category-badge {
    animation: badgePulse 3s ease-in-out infinite !important;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(50,205,50,0.0); }
    50%       { box-shadow: 0 0 12px 3px rgba(50,205,50,0.35); }
}

/* ---- Sticky mini-TOC sidebar ---- */
#oc-toc-sidebar {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    background: rgba(10,28,12,0.95);
    border: 1px solid rgba(50,205,50,0.4);
    border-radius: 16px;
    padding: 1.2rem 1.1rem;
    z-index: 800;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(50,205,50,0.1), inset 0 1px 0 rgba(80,220,80,0.15);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(50,205,50,0.3) transparent;
}
#oc-toc-sidebar::-webkit-scrollbar { width: 3px; }
#oc-toc-sidebar::-webkit-scrollbar-thumb { background: rgba(50,205,50,0.3); border-radius: 3px; }
#oc-toc-sidebar .oc-toc-title {
    font-size: 0.68rem; letter-spacing: 2px; color: rgba(80,220,80,0.7);
    text-transform: uppercase; font-weight: 700;
    margin-bottom: 0.9rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(50,205,50,0.2);
}
#oc-toc-sidebar ul { list-style: none; margin: 0; padding: 0; }
#oc-toc-sidebar li { margin: 0.3rem 0; }
#oc-toc-sidebar a {
    font-size: 0.82rem; color: rgba(144,238,144,0.65);
    text-decoration: none; display: block;
    padding: 0.3rem 0.5rem 0.3rem 1.2rem;
    border-radius: 6px; position: relative;
    transition: color 0.2s, background 0.2s, padding-left 0.2s;
    line-height: 1.4;
}
#oc-toc-sidebar a::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0; background: #32CD32;
    border-radius: 3px; transition: height 0.25s;
}
#oc-toc-sidebar a.oc-toc-active {
    color: #90EE90; background: rgba(50,205,50,0.12); padding-left: 1.5rem;
}
#oc-toc-sidebar a.oc-toc-active::before { height: 70%; }

@media (max-width: 1380px) { #oc-toc-sidebar { display: none !important; } }
@media (max-width: 900px) {
    .oc-side-left, .oc-side-right,
    .oc-side-left-inner, .oc-side-right-inner,
    .oc-glow-left, .oc-glow-right,
    .oc-glow-left2, .oc-glow-right2,

}

/* =============================================
   SIDE VISUAL ELEMENTS - appended to blog-enhanced.css
   ============================================= */

/* ---- Background grid pattern ---- */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(50,205,50,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50,205,50,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    z-index: 0;
    pointer-events: none;
}

/* ---- Fixed side accent bars (THICK & BRIGHT) ---- */
.oc-side-left, .oc-side-right {
    position: fixed;
    top: 0; bottom: 0;
    pointer-events: none;
    z-index: 500;
}
/* Outer bar */
.oc-side-left {
    left: 0;
    width: 5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0)  5%,
        rgba(50,205,50,0.9) 25%,
        rgba(255,215,0,0.8) 50%,
        rgba(50,205,50,0.9) 75%,
        rgba(50,205,50,0.0) 95%,
        transparent 100%);
    animation: sideBarPulse 4s ease-in-out infinite;
    box-shadow: 2px 0 18px rgba(50,205,50,0.5);
}
.oc-side-right {
    right: 0;
    width: 5px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(50,205,50,0.0)  5%,
        rgba(50,205,50,0.7) 35%,
        rgba(255,215,0,0.6) 55%,
        rgba(50,205,50,0.7) 78%,
        rgba(50,205,50,0.0) 95%,
        transparent 100%);
    animation: sideBarPulse 4s ease-in-out infinite reverse;
    box-shadow: -2px 0 18px rgba(50,205,50,0.4);
}
/* Inner accent bars */
.oc-side-left-inner {
    position: fixed;
    left: 7px; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(50,205,50,0.35) 30%,
        rgba(255,215,0,0.25) 60%,
        rgba(50,205,50,0.35) 80%, transparent);
    z-index: 499;
    pointer-events: none;
    animation: sideBarPulse 4s ease-in-out infinite 1s;
}
.oc-side-right-inner {
    position: fixed;
    right: 7px; top: 10%; bottom: 10%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent, rgba(50,205,50,0.35) 30%,
        rgba(255,215,0,0.25) 60%,
        rgba(50,205,50,0.35) 80%, transparent);
    z-index: 499;
    pointer-events: none;
    animation: sideBarPulse 4s ease-in-out infinite reverse 1s;
}
@keyframes sideBarPulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1.0; }
}

    5%   { opacity: 1; }
    95%  { opacity: 0.6; }
    100% { top: 100vh; opacity: 0; }
}

/* ---- Side glow orbs (BIGGER & BRIGHTER) ---- */
.oc-glow-left, .oc-glow-right,
.oc-glow-left2, .oc-glow-right2 {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.oc-glow-left {
    left: -100px; top: 25%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(50,205,50,0.22) 0%, transparent 65%);
    animation: orbFloat1 9s ease-in-out infinite;
}
.oc-glow-right {
    right: -100px; top: 55%;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 65%);
    animation: orbFloat1 9s ease-in-out infinite reverse;
    animation-delay: -4s;
}
.oc-glow-left2 {
    left: -80px; top: 65%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(80,220,80,0.15) 0%, transparent 65%);
    animation: orbFloat1 12s ease-in-out infinite;
    animation-delay: -6s;
}
.oc-glow-right2 {
    right: -80px; top: 15%;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(50,205,50,0.13) 0%, transparent 65%);
    animation: orbFloat1 11s ease-in-out infinite reverse;
    animation-delay: -2s;
}
@keyframes orbFloat1 {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-55px) scale(1.08); }
}

/* ---- Floating particles (styled via CSS, positioned by JS) ---- */
.oc-particle {
    position: fixed;
    pointer-events: none;
    z-index: 3;
    animation: particleRise2 linear infinite;
}
@keyframes particleRise2 {
    0%   { transform: translateY(105vh) rotate(0deg);   opacity: 0; }
    6%   { opacity: 1; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-140px) rotate(400deg); opacity: 0; }
}

/* ---- Article animated glow border ---- */
article {
    animation: articleGlow 5s ease-in-out infinite !important;
}
@keyframes articleGlow {
    0%, 100% { box-shadow:
        0 0 0 1px rgba(50,205,50,0.08),
        0 8px 48px rgba(0,0,0,0.55),
        0 0 40px rgba(50,205,50,0.08) !important; }
    50%       { box-shadow:
        0 0 0 1px rgba(50,205,50,0.22),
        0 8px 48px rgba(0,0,0,0.55),
        0 0 60px rgba(50,205,50,0.18) !important; }
}

/* ---- Article corner decorations ---- */
article::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 50px; height: 50px;
    border-top: 2px solid rgba(50,205,50,0.7);
    border-left: 2px solid rgba(50,205,50,0.7);
    border-radius: 22px 0 0 0;
    pointer-events: none;
    z-index: 2;
}
article::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 50px; height: 50px;
    border-bottom: 2px solid rgba(255,215,0,0.5);
    border-right: 2px solid rgba(255,215,0,0.5);
    border-radius: 0 0 22px 0;
    pointer-events: none;
    z-index: 2;
}
/* need position:relative on article */
article { position: relative !important; overflow: visible !important; }

/* ---- Glowing section headers ---- */
article h2 {
    text-shadow: 0 0 20px rgba(50,205,50,0.35) !important;
    transition: text-shadow 0.3s;
}
article h2:hover {
    text-shadow: 0 0 30px rgba(50,205,50,0.65) !important;
}

/* ---- Pulsing category badge ---- */
.category-badge {
    animation: badgePulse 3s ease-in-out infinite !important;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(50,205,50,0.0); }
    50%       { box-shadow: 0 0 12px 3px rgba(50,205,50,0.35); }
}

/* ---- Sticky mini-TOC sidebar ---- */
#oc-toc-sidebar {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    background: rgba(10,28,12,0.95);
    border: 1px solid rgba(50,205,50,0.4);
    border-radius: 16px;
    padding: 1.2rem 1.1rem;
    z-index: 800;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(50,205,50,0.1), inset 0 1px 0 rgba(80,220,80,0.15);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(50,205,50,0.3) transparent;
}
#oc-toc-sidebar::-webkit-scrollbar { width: 3px; }
#oc-toc-sidebar::-webkit-scrollbar-thumb { background: rgba(50,205,50,0.3); border-radius: 3px; }
#oc-toc-sidebar .oc-toc-title {
    font-size: 0.68rem; letter-spacing: 2px; color: rgba(80,220,80,0.7);
    text-transform: uppercase; font-weight: 700;
    margin-bottom: 0.9rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(50,205,50,0.2);
}
#oc-toc-sidebar ul { list-style: none; margin: 0; padding: 0; }
#oc-toc-sidebar li { margin: 0.3rem 0; }
#oc-toc-sidebar a {
    font-size: 0.82rem; color: rgba(144,238,144,0.65);
    text-decoration: none; display: block;
    padding: 0.3rem 0.5rem 0.3rem 1.2rem;
    border-radius: 6px; position: relative;
    transition: color 0.2s, background 0.2s, padding-left 0.2s;
    line-height: 1.4;
}
#oc-toc-sidebar a::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 0; background: #32CD32;
    border-radius: 3px; transition: height 0.25s;
}
#oc-toc-sidebar a.oc-toc-active {
    color: #90EE90; background: rgba(50,205,50,0.12); padding-left: 1.5rem;
}
#oc-toc-sidebar a.oc-toc-active::before { height: 70%; }

@media (max-width: 1380px) { #oc-toc-sidebar { display: none !important; } }
@media (max-width: 900px) {
    .oc-side-left, .oc-side-right,
    .oc-side-left-inner, .oc-side-right-inner,
    .oc-glow-left, .oc-glow-right,
    .oc-glow-left2, .oc-glow-right2,

}