/** * TrendingTags - Additional Components CSS * Admin, Tools, Comments, Tip Modal, Settings, About Page * Enhanced UX Version */ /* ============================================== HOME PAGE TRENDING TAGS - Enhanced ============================================== */ .trending-section{padding:var(--space-8) 0;background:var(--color-bg-alt)}.trending-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}.trending-title{display:flex;align-items:center;gap:var(--space-2);font-size:1.25rem;font-weight:700}.trending-title svg{color:var(--color-accent);width:20px;height:20px}.view-all-link{display:flex;align-items:center;gap:var(--space-1);font-size:0.85rem;font-weight:500;color:var(--color-text-muted);transition:color var(--transition-fast)}.view-all-link:hover{color:var(--color-accent)}.view-all-link:hover svg{transform:translateX(4px)}.view-all-link svg{transition:transform var(--transition-fast)}.home-trending-tags{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.home-trending-tag{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.85rem;font-weight:500;color:var(--color-text-secondary);transition:all 0.25s var(--ease-out);position:relative;overflow:hidden}.home-trending-tag::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);opacity:0;transition:opacity var(--transition-fast)}.home-trending-tag:hover{border-color:var(--color-accent);color:white;transform:translateY(-2px);box-shadow:0 8px 20px var(--color-accent-glow)}.home-trending-tag:hover::before{opacity:1}.home-trending-tag .tag-hash{color:var(--color-accent);font-weight:700;position:relative;z-index:1;transition:color var(--transition-fast)}.home-trending-tag:hover .tag-hash{color:white}.home-trending-tag span:not(.tag-hash):not(.tag-count){position:relative;z-index:1}.home-trending-tag .tag-count{font-size:0.7rem;padding:2px 6px;background:var(--color-bg-elevated);border-radius:var(--radius-full);color:var(--color-text-dim);position:relative;z-index:1;transition:all var(--transition-fast)}.home-trending-tag:hover .tag-count{background:rgba(255,255,255,0.2);color:white}.home-trending-tag:hover .tag-count{background:var(--color-accent);color:white}.section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8);min-height:40px}.section-title{position:relative;display:inline-block;min-height:32px}.section-title::after{content:'';position:absolute;bottom:-8px;left:0;width:60px;height:4px;background:var(--color-accent);border-radius:2px}/* ============================================== ABOUT PAGE - COMPLETE REDESIGN ============================================== */ .about-hero{padding:var(--space-16) 0 var(--space-12);text-align:center;position:relative;overflow:hidden;background:var(--color-bg-alt)}.about-hero::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:800px;height:800px;background:radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);opacity:0.5;pointer-events:none}.about-hero-content{position:relative;max-width:800px;margin:0 auto}.about-badge{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;border-radius:var(--radius-full);margin-bottom:var(--space-4)}.about-hero-title{font-size:clamp(2rem, 5vw, 3.5rem);font-weight:800;line-height:1.1;margin-bottom:var(--space-6)}.text-gradient{background:linear-gradient(135deg, var(--color-accent) 0%, #ff6b6b 50%, var(--color-accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-hero-subtitle{font-size:1.2rem;color:var(--color-text-muted);max-width:600px;margin:0 auto;line-height:1.7}.about-section{padding:var(--space-16) 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:var(--space-8)}}.about-content .section-title{margin-bottom:var(--space-5)}.about-text{color:var(--color-text-secondary);font-size:1.05rem;line-height:1.8;margin-bottom:var(--space-4)}.about-text strong{color:var(--color-accent)}.about-stats-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}.about-stat{padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-normal)}.about-stat:hover{transform:translateY(-4px);border-color:var(--color-accent);box-shadow:var(--shadow-lg)}.about-stat-value{font-size:2.5rem;font-weight:800;color:var(--color-accent);margin-bottom:var(--space-1);font-family:var(--font-display)}.about-stat-label{font-size:0.85rem;color:var(--color-text-muted);font-weight:500}.section-header{text-align:center;margin-bottom:var(--space-10)}.section-badge{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;border-radius:var(--radius-full);margin-bottom:var(--space-4)}.section-subtitle{font-size:1.1rem;color:var(--color-text-muted);max-width:600px;margin:0 auto}.founders-section{padding:var(--space-16) 0;background:var(--color-bg-alt)}.founders-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-8);max-width:900px;margin:0 auto}@media (max-width:768px){.founders-grid{grid-template-columns:1fr;max-width:400px}}.founder-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);text-align:center;transition:all var(--transition-normal)}.founder-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--color-accent)}.founder-image{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:var(--space-5)}.founder-avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;color:white;margin-bottom:var(--space-4)}.founder-social{display:flex;justify-content:center;gap:var(--space-2)}.founder-social .social-link{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:50%;color:var(--color-text-muted);transition:all var(--transition-fast)}.founder-social .social-link:hover{background:var(--color-accent);color:white;transform:translateY(-2px)}.founder-info{text-align:center}.founder-name{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-2)}.founder-role{color:var(--color-accent);font-weight:600;margin-bottom:var(--space-4);font-size:0.9rem}.founder-bio{color:var(--color-text-muted);font-size:0.95rem;line-height:1.6}.values-section{padding:var(--space-16) 0}.values-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-6)}@media (max-width:1024px){.values-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:640px){.values-grid{grid-template-columns:1fr}}.value-card{padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-normal)}.value-card:hover{transform:translateY(-4px);border-color:var(--color-accent);box-shadow:var(--shadow-lg)}.value-icon{width:64px;height:64px;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;background:var(--color-accent-subtle);border-radius:var(--radius-lg)}.value-icon svg{width:32px;height:32px;color:var(--color-accent)}.value-title{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-3)}.value-text{font-size:0.9rem;color:var(--color-text-muted);line-height:1.6}.about-cta{padding:var(--space-16) 0;background:var(--color-bg-alt)}.cta-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-10);background:linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);border-radius:var(--radius-2xl);color:white}@media (max-width:768px){.cta-card{flex-direction:column;text-align:center}}.cta-content h3{font-size:1.75rem;margin-bottom:var(--space-2)}.cta-content p{opacity:0.9}.cta-actions{display:flex;gap:var(--space-3);flex-shrink:0}.btn-light{background:white;color:var(--color-accent);font-weight:600}.btn-light:hover{background:rgba(255, 255, 255, 0.9);color:var(--color-accent-dark)}/* ============================================== DASHBOARD SETTINGS ============================================== */ .settings-container{max-width:700px}.settings-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6)}.settings-card-title{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.avatar-upload-section{display:flex;gap:var(--space-6);align-items:flex-start}@media (max-width:640px){.avatar-upload-section{flex-direction:column;align-items:center;text-align:center}}.current-avatar img, .current-avatar .avatar-placeholder-lg{width:100px;height:100px;border-radius:var(--radius-full);object-fit:cover}.avatar-placeholder-lg{display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;font-size:2.5rem;font-weight:700}.avatar-upload-controls{flex:1}.upload-buttons{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap}.upload-file-btn{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}.upload-or{color:var(--color-text-dim);font-size:0.85rem}.upload-buttons .form-input{flex:1;min-width:200px}.upload-hint{font-size:0.8rem;color:var(--color-text-dim)}.upload-progress{margin-top:var(--space-3)}.progress-bar{height:6px;background:var(--color-bg-elevated);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-2)}.progress-fill{height:100%;background:linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));width:0;transition:width 0.3s ease;border-radius:var(--radius-full)}[data-theme="light"] .progress-fill{background:linear-gradient(90deg, #2563EB, #3B82F6)}/* ============================================ ENHANCED DASHBOARD STYLES ============================================ */ .dashboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);margin-bottom:var(--space-6)}.dashboard-user{display:flex;align-items:center;gap:var(--space-4)}.dashboard-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--color-accent)}.dashboard-avatar-placeholder{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:white}.dashboard-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-1)}.dashboard-subtitle{color:var(--color-text-muted);font-size:0.95rem}.dashboard-stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-4);margin-bottom:var(--space-6)}@media (max-width:768px){.dashboard-stats{grid-template-columns:repeat(2, 1fr)}}.stat-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);text-align:center;transition:all 0.2s ease}.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0, 0, 0, 0.1);border-color:var(--color-accent)}.stat-icon{width:48px;height:48px;border-radius:var(--radius-lg);background:var(--color-accent-subtle);color:var(--color-accent);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3)}.stat-value{font-size:2rem;font-weight:800;color:var(--color-text);margin-bottom:var(--space-1)}.stat-label{font-size:0.85rem;color:var(--color-text-muted);font-weight:500}.settings-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-4)}.settings-card-title{font-size:1.1rem;font-weight:700;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}.avatar-upload-section{display:flex;gap:var(--space-5);align-items:flex-start}.current-avatar{flex-shrink:0}.current-avatar img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--color-border)}.avatar-placeholder-lg{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:white}.avatar-upload-controls{flex:1}.upload-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}.upload-url-section{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.upload-url-section .upload-or{font-size:0.85rem;color:var(--color-text-muted);white-space:nowrap}.upload-url-section .form-input{flex:1}.upload-hint{font-size:0.8rem;color:var(--color-text-dim)}.upload-progress{margin-top:var(--space-3)}[data-theme="light"] .dashboard-header{background:#ffffff;box-shadow:0 1px 3px rgba(15, 23, 42, 0.04);border-color:#E2E8F0}[data-theme="light"] .stat-card{background:#ffffff;box-shadow:0 1px 3px rgba(15, 23, 42, 0.04);border-color:#E2E8F0}[data-theme="light"] .stat-card:hover{box-shadow:0 8px 25px rgba(37, 99, 235, 0.1);border-color:#2563EB}[data-theme="light"] .settings-card{background:#ffffff;box-shadow:0 1px 3px rgba(15, 23, 42, 0.04);border-color:#E2E8F0}.settings-actions{display:flex;justify-content:flex-end;gap:var(--space-3)}.dashboard-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-6);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-4);overflow-x:auto}.tab-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:0.9rem;font-weight:500;color:var(--color-text-muted);white-space:nowrap;transition:all var(--transition-fast)}.tab-link:hover{background:var(--color-bg-card);color:var(--color-text)}.tab-link.active{background:var(--color-accent-subtle);color:var(--color-accent)}.tab-link svg{width:18px;height:18px}/* ============================================== WRITE PAGE IMAGE UPLOAD ============================================== */ .image-upload-options{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.upload-divider{color:var(--color-text-dim);font-size:0.85rem}.image-upload-options .form-input, .image-upload-options input[type="text"]{flex:1;min-width:200px;max-width:400px}/* ============================================== ENHANCED COMMENTS ============================================== */ .comments-section{padding:var(--space-12) 0;background:var(--color-bg-alt)}.comments-header{margin-bottom:var(--space-6)}.comments-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.25rem}.comments-title svg{color:var(--color-accent)}.comments-count{color:var(--color-text-muted);font-weight:400}.comment-form-container{display:flex;gap:var(--space-4);margin-bottom:var(--space-8)}.comment-form-avatar{flex-shrink:0}.comment-form-avatar img, .comment-form-avatar .avatar-placeholder{width:48px;height:48px;border-radius:var(--radius-full)}.comment-form{flex:1;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4)}.comment-textarea{width:100%;min-height:80px;padding:var(--space-3);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);font-family:var(--font-body);font-size:0.95rem;resize:vertical;margin-bottom:var(--space-3)}.comment-textarea:focus{outline:none;border-color:var(--color-accent)}.comment-form-footer{display:flex;align-items:center;justify-content:space-between}.comment-hint{font-size:0.8rem;color:var(--color-text-dim)}.reply-indicator{display:none;align-items:center;justify-content:space-between;padding:var(--space-3);background:var(--color-accent-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-3);font-size:0.9rem;color:var(--color-accent)}.cancel-reply{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1)}.cancel-reply:hover{color:var(--color-text)}.comment-login-prompt{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;margin-bottom:var(--space-8)}.prompt-icon{font-size:3rem;margin-bottom:var(--space-4)}.comment-login-prompt p{font-size:1.1rem;margin-bottom:var(--space-4)}.prompt-actions{display:flex;gap:var(--space-3);justify-content:center}.comments-list{display:flex;flex-direction:column;gap:var(--space-6)}.no-comments{text-align:center;padding:var(--space-10);color:var(--color-text-muted)}.no-comments-icon{font-size:3rem;margin-bottom:var(--space-4)}.comment{display:flex;gap:var(--space-4)}.comment-avatar img, .comment-avatar .avatar-placeholder{width:44px;height:44px;border-radius:var(--radius-full);object-fit:cover}.avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;font-weight:600;font-size:1rem}.comment-main{flex:1;min-width:0}.comment-header{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}.comment-author{font-weight:600;color:var(--color-text)}.author-badge{padding:2px 8px;background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.7rem;font-weight:600;text-transform:uppercase;border-radius:var(--radius-sm)}.comment-time{font-size:0.85rem;color:var(--color-text-dim)}.comment-content{color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-3)}.comment-actions{display:flex;gap:var(--space-3)}.comment-action-btn{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:none;border:none;color:var(--color-text-muted);font-size:0.85rem;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.comment-action-btn:hover{background:var(--color-bg-elevated);color:var(--color-text)}.comment-action-btn.text-danger:hover{background:var(--color-error-bg);color:var(--color-error)}.comment-replies{margin-top:var(--space-4);padding-left:var(--space-6);border-left:2px solid var(--color-border);display:flex;flex-direction:column;gap:var(--space-4)}.comment.reply .comment-avatar img, .comment.reply .comment-avatar .avatar-placeholder{width:36px;height:36px}/* ============================================== TIP MODAL ============================================== */ .btn-tip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color:white;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.btn-tip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(245, 158, 11, 0.4);color:white}.author-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);flex-wrap:wrap}.author-card-main{display:flex;align-items:center;gap:var(--space-4)}.author-card-avatar, .author-card-avatar-placeholder{width:64px;height:64px;border-radius:var(--radius-full);object-fit:cover}.author-card-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;font-size:1.5rem;font-weight:700}.author-card-info h4{font-size:1rem;margin-bottom:var(--space-1)}.author-card-info h4 a{color:var(--color-accent)}.author-card-info p{color:var(--color-text-muted);font-size:0.9rem}.author-card-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.tip-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--transition-fast)}.tip-modal.active{opacity:1;visibility:visible}.tip-modal-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.8)}.tip-modal-content{position:relative;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;margin:var(--space-4);padding:var(--space-8);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);transform:translateY(20px);transition:transform var(--transition-normal)}.tip-modal.active .tip-modal-content{transform:translateY(0)}.tip-modal-close{position:absolute;top:var(--space-4);right:var(--space-4);background:none;border:none;color:var(--color-text-muted);cursor:pointer}.tip-header{text-align:center;margin-bottom:var(--space-6)}.tip-icon{font-size:3rem;margin-bottom:var(--space-3)}.tip-header h3{font-size:1.5rem;margin-bottom:var(--space-2)}.tip-header p{color:var(--color-text-muted)}.tip-amounts{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-3);margin-bottom:var(--space-6)}.tip-amount{padding:var(--space-4);background:var(--color-bg-elevated);border:2px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.tip-amount:hover{border-color:var(--color-accent)}.tip-amount.selected{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.tip-custom{margin-bottom:var(--space-4)}.tip-custom label{display:block;font-size:0.9rem;color:var(--color-text-muted);margin-bottom:var(--space-2)}.custom-input-wrapper{display:flex;align-items:center;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.custom-input-wrapper .currency{padding:var(--space-3) var(--space-4);background:var(--color-bg-elevated);color:var(--color-text-muted);border-right:1px solid var(--color-border)}.custom-input-wrapper input{flex:1;padding:var(--space-3);background:transparent;border:none;color:var(--color-text);font-size:1rem}.custom-input-wrapper input:focus{outline:none}.tip-message textarea{width:100%;padding:var(--space-3);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-body);resize:vertical;min-height:80px;margin-bottom:var(--space-4)}.tip-submit{margin-bottom:var(--space-4)}.tip-note{font-size:0.8rem;color:var(--color-text-dim);text-align:center}/* ============================================== ADMIN DASHBOARD ============================================== */ .admin-section{padding:var(--space-8) 0 var(--space-16)}.admin-header{margin-bottom:var(--space-8)}.admin-title{display:flex;align-items:center;gap:var(--space-3);font-size:2rem;margin-bottom:var(--space-2)}.admin-title svg{color:var(--color-accent)}.admin-subtitle{color:var(--color-text-muted)}.admin-tabs{display:flex;gap:var(--space-2);margin-bottom:var(--space-8);overflow-x:auto;padding-bottom:var(--space-2)}.admin-tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:0.9rem;font-weight:500;white-space:nowrap;transition:all var(--transition-fast)}.admin-tab:hover{border-color:var(--color-border-hover);color:var(--color-text)}.admin-tab.active{background:var(--color-accent);border-color:var(--color-accent);color:white}.admin-stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-4);margin-bottom:var(--space-8)}@media (max-width:1024px){.admin-stats{grid-template-columns:repeat(2, 1fr)}}@media (max-width:640px){.admin-stats{grid-template-columns:1fr}}.admin-stat-card{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.stat-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}.stat-icon.users{background:rgba(59, 130, 246, 0.1);color:#3b82f6}.stat-icon.posts{background:rgba(34, 197, 94, 0.1);color:#22c55e}.stat-icon.comments{background:rgba(168, 85, 247, 0.1);color:#a855f7}.stat-icon.views{background:rgba(245, 158, 11, 0.1);color:#f59e0b}.stat-info .stat-value{font-size:1.75rem;font-weight:700}.stat-info .stat-label{color:var(--color-text-muted);font-size:0.9rem}.stat-change{font-size:0.8rem;margin-top:var(--space-1)}.stat-change.positive{color:var(--color-success)}.admin-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-6)}@media (max-width:1024px){.admin-grid{grid-template-columns:1fr}}.admin-analytics-row{display:grid;grid-template-columns:1fr 350px;gap:var(--space-6);margin-bottom:var(--space-6)}@media (max-width:1200px){.admin-analytics-row{grid-template-columns:1fr 300px}}@media (max-width:900px){.admin-analytics-row{grid-template-columns:1fr}}.admin-chart-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5)}.admin-chart-card.small{min-width:0}.admin-card-title{display:flex;align-items:center;gap:var(--space-2);font-size:1rem;font-weight:600;margin-bottom:var(--space-4);color:var(--color-text)}.admin-card-title svg{color:var(--color-accent)}.chart-wrapper{height:280px;position:relative}.chart-wrapper canvas{width:100% !important;height:100% !important}.top-items-list{display:flex;flex-direction:column;gap:var(--space-2)}.top-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:all 0.2s ease}.top-item:hover{background:var(--color-bg-elevated);transform:translateX(4px)}.top-item-rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-sm);font-size:0.75rem;font-weight:700;color:var(--color-text-muted);flex-shrink:0}.top-item-rank.top-1{background:linear-gradient(135deg, #fbbf24, #f59e0b);color:white}.top-item-rank.top-2{background:linear-gradient(135deg, #9ca3af, #6b7280);color:white}.top-item-rank.top-3{background:linear-gradient(135deg, #d97706, #b45309);color:white}.top-item-title{flex:1;font-size:0.85rem;font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-item-stat{font-size:0.75rem;color:var(--color-text-muted);flex-shrink:0}.top-authors-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:var(--space-3);padding:var(--space-4)}.top-author-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg);position:relative}.author-rank{position:absolute;top:-8px;left:-8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-full);font-size:0.7rem;font-weight:700;color:var(--color-text-muted)}.author-rank.rank-1{background:linear-gradient(135deg, #fbbf24, #f59e0b);border-color:#f59e0b;color:white}.author-rank.rank-2{background:linear-gradient(135deg, #9ca3af, #6b7280);border-color:#6b7280;color:white}.author-rank.rank-3{background:linear-gradient(135deg, #d97706, #b45309);border-color:#b45309;color:white}.author-avatar-md{width:40px;height:40px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0}.author-avatar-md.placeholder{background:linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));color:white;display:flex;align-items:center;justify-content:center;font-weight:600}.author-info{overflow:hidden}.author-info strong{display:block;font-size:0.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.author-info span{display:block;font-size:0.75rem;color:var(--color-text-muted)}.admin-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.admin-card.full-width{grid-column:1 / -1}.admin-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.admin-card-header h3{font-size:1rem}.admin-table-wrapper{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse}.admin-table th, .admin-table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--color-border)}.admin-table th{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);background:var(--color-bg-elevated)}.admin-table td{font-size:0.9rem;color:var(--color-text-secondary)}.admin-table tr:last-child td{border-bottom:none}.user-cell{display:flex;align-items:center;gap:var(--space-3)}.avatar-sm{width:32px;height:32px;border-radius:var(--radius-full);background:var(--color-accent);color:white;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:600}.user-name{font-weight:500;color:var(--color-text)}.user-username{font-size:0.8rem;color:var(--color-text-dim)}.role-badge{padding:2px 8px;background:var(--color-bg-elevated);color:var(--color-text-muted);font-size:0.75rem;border-radius:var(--radius-full)}.status-badge{padding:4px 10px;font-size:0.75rem;font-weight:600;border-radius:var(--radius-full)}.status-published, .status-active{background:var(--color-success-bg);color:var(--color-success)}.status-draft{background:var(--color-warning-bg);color:var(--color-warning)}.status-banned, .status-trash{background:var(--color-error-bg);color:var(--color-error)}.action-buttons{display:flex;gap:var(--space-2)}.btn-xs{padding:var(--space-1) var(--space-3);font-size:0.75rem}.btn-danger{background:var(--color-error);color:white;border:none}.btn-danger:hover{background:#dc2626;color:white}/* ============================================== TOOLS PAGE ============================================== */ .tools-section{padding:var(--space-16) 0}.tools-header{text-align:center;margin-bottom:var(--space-12)}.tools-title{font-size:clamp(2rem, 4vw, 3rem);margin-bottom:var(--space-4)}.tools-subtitle{font-size:1.1rem;color:var(--color-text-muted);max-width:500px;margin:0 auto}.tools-grid{display:flex;flex-direction:column;gap:var(--space-12)}.tool-category{}.category-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.25rem;margin-bottom:var(--space-6)}.category-title svg{color:var(--color-accent)}.tools-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:var(--space-4)}.tool-card{padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;transition:all var(--transition-normal)}.tool-card:hover{border-color:var(--color-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.tool-icon{width:64px;height:64px;margin:0 auto var(--space-4);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}.tool-icon.pdf{background:rgba(239, 68, 68, 0.1);color:#ef4444}.tool-icon.image{background:rgba(59, 130, 246, 0.1);color:#3b82f6}.tool-icon.word{background:rgba(37, 99, 235, 0.1);color:#2563eb}.tool-icon.excel{background:rgba(34, 197, 94, 0.1);color:#22c55e}.tool-icon.text{background:rgba(168, 85, 247, 0.1);color:#a855f7}.tool-icon.social{background:linear-gradient(135deg, rgba(229, 57, 53, 0.15) 0%, rgba(255, 107, 107, 0.15) 100%);color:var(--color-accent)}.tool-card-link{display:block;text-decoration:none;color:inherit}.featured-tool{position:relative;border-color:var(--color-accent);background:linear-gradient(135deg, var(--color-bg-card) 0%, rgba(229, 57, 53, 0.05) 100%)}.featured-tool:hover{border-color:var(--color-accent);box-shadow:0 10px 40px -10px rgba(229, 57, 53, 0.3)}.featured-badge{position:absolute;top:var(--space-3);right:var(--space-3);padding:var(--space-1) var(--space-3);background:var(--color-accent);color:white;font-size:0.75rem;font-weight:600;border-radius:var(--radius-full)}.tool-category.featured{grid-column:1 / -1}.tool-category.featured .tools-list{display:flex;justify-content:center}.tool-category.featured .tool-card{max-width:350px;width:100%}.tool-name{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-2)}.tool-desc{font-size:0.9rem;color:var(--color-text-muted);margin-bottom:var(--space-4)}.tool-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--transition-fast)}.tool-modal.active{opacity:1;visibility:visible}.tool-modal-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.8)}.tool-modal-content{position:relative;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;margin:var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl)}.tool-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--color-border)}.tool-modal-header h2{font-size:1.25rem}.tool-modal-close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-1)}.tool-modal-close:hover{color:var(--color-text)}.tool-modal-body{padding:var(--space-6)}.tool-upload-area{padding:var(--space-10);border:2px dashed var(--color-border);border-radius:var(--radius-xl);text-align:center;cursor:pointer;transition:all var(--transition-fast)}.tool-upload-area:hover, .tool-upload-area.dragover{border-color:var(--color-accent);background:var(--color-accent-subtle)}.tool-upload-area svg{color:var(--color-text-dim);margin-bottom:var(--space-4)}.tool-upload-area p{color:var(--color-text-muted);margin-bottom:var(--space-2)}.upload-link{color:var(--color-accent);cursor:pointer;font-weight:500}.upload-hint{font-size:0.8rem;color:var(--color-text-dim)}.tool-info{margin-top:var(--space-4);padding:var(--space-4);background:var(--color-warning-bg);border-radius:var(--radius-lg);font-size:0.85rem;color:var(--color-warning)}.tool-textarea{width:100%;min-height:200px;padding:var(--space-4);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);font-family:var(--font-body);font-size:0.95rem;resize:vertical;margin-bottom:var(--space-4)}.tool-textarea:focus{outline:none;border-color:var(--color-accent)}.word-stats{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-3)}.stat-box{padding:var(--space-4);background:var(--color-bg-elevated);border-radius:var(--radius-lg);text-align:center}.stat-number{font-size:1.5rem;font-weight:700;color:var(--color-accent)}.stat-name{font-size:0.8rem;color:var(--color-text-muted)}.case-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.lorem-options{display:flex;gap:var(--space-4);align-items:flex-end;margin-bottom:var(--space-4);flex-wrap:wrap}.lorem-options .form-group{flex:1;min-width:150px}.tool-coming-soon{text-align:center;padding:var(--space-10)}.coming-soon-icon{font-size:4rem;margin-bottom:var(--space-4)}.tool-coming-soon h3{margin-bottom:var(--space-2)}.tool-coming-soon p{color:var(--color-text-muted)}.tool-preview{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}.preview-image{width:80px;height:80px;object-fit:cover;border-radius:var(--radius-md);border:2px solid var(--color-border)}@media print{.navbar, .site-footer, .post-actions, .comments-section, .reading-progress{display:none !important}body{background:white;color:black}.post-content{color:black}}.category-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}.tag-filter{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.85rem;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.tag-filter:hover{border-color:var(--color-border-hover);color:var(--color-text)}.tag-filter.active{background:var(--color-accent);border-color:var(--color-accent);color:white}/* ============================================== THEME TOGGLE ============================================== */ .theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.theme-toggle:hover{border-color:var(--color-border-hover);background:var(--color-bg-elevated)}.theme-toggle .sun-icon{display:none}.theme-toggle .moon-icon{display:block;color:var(--color-text-muted)}[data-theme="light"] .theme-toggle .sun-icon{display:block;color:var(--color-warning)}[data-theme="light"] .theme-toggle .moon-icon{display:none}/* ============================================== SECTION HEADER ROW ============================================== */ .section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.view-all-link{display:flex;align-items:center;gap:var(--space-2);color:var(--color-accent);font-weight:500;font-size:0.9rem;transition:all var(--transition-fast)}.view-all-link:hover{gap:var(--space-3)}/* ============================================== USER PROFILE PAGE ============================================== */ .profile-section{padding:var(--space-8) 0 var(--space-16)}.profile-header{position:relative;margin-bottom:var(--space-8)}.profile-cover{height:200px;background:linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 50%, #ff6b6b 100%);border-radius:var(--radius-2xl);margin-bottom:-80px}.profile-info{display:flex;align-items:flex-end;gap:var(--space-6);padding:0 var(--space-6);flex-wrap:wrap}@media (max-width:768px){.profile-info{flex-direction:column;align-items:center;text-align:center}}.profile-avatar-wrapper{flex-shrink:0}.profile-avatar, .profile-avatar-placeholder{width:150px;height:150px;border-radius:var(--radius-full);border:4px solid var(--color-bg);object-fit:cover;background:var(--color-bg-card)}.profile-avatar-placeholder{display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:white;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%)}.profile-details{flex:1;min-width:0;padding-bottom:var(--space-4)}.profile-name{font-size:2rem;font-weight:700;margin-bottom:var(--space-1)}.profile-username{color:var(--color-text-muted);margin-bottom:var(--space-3)}.profile-bio{color:var(--color-text-secondary);max-width:500px;margin-bottom:var(--space-3)}.profile-meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.profile-meta-item{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-dim);font-size:0.9rem}.profile-badge{padding:var(--space-1) var(--space-3);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;border-radius:var(--radius-full)}.profile-actions{display:flex;gap:var(--space-3);padding-bottom:var(--space-4)}.profile-stats{display:flex;gap:var(--space-8);justify-content:center;padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);margin-bottom:var(--space-8)}.profile-stat{text-align:center}.profile-stat-value{font-size:1.75rem;font-weight:700}.profile-stat-label{color:var(--color-text-muted);font-size:0.85rem}.profile-section-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.25rem;margin-bottom:var(--space-6)}.profile-section-title svg{color:var(--color-accent)}.profile-posts-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:var(--space-6)}.profile-post-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal)}.profile-post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-border-hover)}.profile-post-link{display:block}.profile-post-image{width:100%;height:180px;object-fit:cover}.profile-post-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-accent-subtle) 100%);font-size:3rem;font-weight:700;color:var(--color-accent)}.profile-post-content{padding:var(--space-5)}.profile-post-category{display:inline-block;font-size:0.7rem;font-weight:600;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2)}.profile-post-title{font-size:1.1rem;line-height:1.4;margin-bottom:var(--space-2)}.profile-post-meta{display:flex;gap:var(--space-2);font-size:0.85rem;color:var(--color-text-dim)}/* ============================================== ACCOUNT TYPE SELECTOR (Registration) ============================================== */ .account-type-selector{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}@media (max-width:480px){.account-type-selector{grid-template-columns:1fr}}.account-type-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-6);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-fast);text-align:center}.account-type-option:hover{border-color:var(--color-border-hover)}.account-type-option.selected{border-color:var(--color-accent);background:var(--color-accent-subtle)}.account-type-option input{position:absolute;opacity:0}.account-type-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-lg);color:var(--color-text-muted);transition:all var(--transition-fast)}.account-type-option.selected .account-type-icon{background:var(--color-accent);color:white}.account-type-title{font-weight:600;font-size:1.1rem}.account-type-desc{font-size:0.85rem;color:var(--color-text-muted)}/* ============================================== FEATURED IMAGE TOP (Single Post) ============================================== */ .post-featured-image-top{margin-bottom:var(--space-8)}.container-wide{max-width:1000px;margin:0 auto;padding:0 var(--space-4)}.post-featured-image-top img{width:100%;max-height:500px;object-fit:cover;border-radius:var(--radius-2xl)}/* ============================================== NEWSLETTER SIDEBAR FIX ============================================== */ .newsletter-card{background:var(--color-bg-card);text-align:center}.newsletter-card .newsletter-input{width:100%;margin-bottom:var(--space-3)}.newsletter-card .btn{width:100%}/* ============================================== EXISTING TAG SUGGESTIONS ============================================== */ .existing-tags{margin-top:var(--space-3)}.existing-tags-label{font-size:0.75rem;color:var(--color-text-dim);margin-bottom:var(--space-2)}.existing-tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.existing-tag{padding:var(--space-1) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.8rem;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.existing-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}/* ============================================== PROFILE PAGE ============================================== */ .profile-section{padding:var(--space-8) 0 var(--space-16)}.profile-header{position:relative;margin-bottom:var(--space-8)}.profile-cover{height:200px;background:linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 50%, #ff6b6b 100%);border-radius:var(--radius-2xl)}.profile-info{display:flex;align-items:flex-end;gap:var(--space-6);margin-top:-60px;padding:0 var(--space-6);flex-wrap:wrap}@media (max-width:768px){.profile-info{flex-direction:column;align-items:center;text-align:center}}.profile-avatar-wrapper{flex-shrink:0}.profile-avatar, .profile-avatar-placeholder{width:120px;height:120px;border-radius:var(--radius-full);border:4px solid var(--color-bg);object-fit:cover}.profile-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);color:white;font-size:3rem;font-weight:700}.profile-details{flex:1;padding-bottom:var(--space-4)}.profile-name{font-size:1.75rem;font-weight:700;margin-bottom:var(--space-1)}.profile-username{color:var(--color-text-muted);font-size:1rem;margin-bottom:var(--space-3)}.profile-bio{color:var(--color-text-secondary);max-width:500px;margin-bottom:var(--space-3)}.profile-meta{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.profile-meta-item{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-dim);font-size:0.9rem}.profile-badge{padding:var(--space-1) var(--space-3);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;border-radius:var(--radius-full)}.profile-actions{padding-bottom:var(--space-4)}.profile-stats{display:flex;justify-content:center;gap:var(--space-8);padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);margin-bottom:var(--space-8)}.profile-stat{text-align:center}.profile-stat-value{font-size:1.5rem;font-weight:700;color:var(--color-text)}.profile-stat-label{font-size:0.85rem;color:var(--color-text-muted)}.profile-section-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.25rem;margin-bottom:var(--space-6)}.profile-section-title svg{color:var(--color-accent)}.profile-posts-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:var(--space-6)}.profile-post-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal)}.profile-post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-border-hover)}.profile-post-link{display:block}.profile-post-image{width:100%;height:180px;object-fit:cover}.profile-post-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-accent-subtle) 100%);font-size:3rem;font-weight:700;color:var(--color-accent)}.profile-post-content{padding:var(--space-5)}.profile-post-category{display:inline-block;font-size:0.7rem;font-weight:600;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-2)}.profile-post-title{font-size:1.1rem;font-weight:600;line-height:1.4;margin-bottom:var(--space-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.profile-post-meta{display:flex;align-items:center;gap:var(--space-2);font-size:0.85rem;color:var(--color-text-dim)}/* ============================================== THEME TOGGLE ============================================== */ .theme-toggle{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.theme-toggle:hover{background:var(--color-bg-elevated);color:var(--color-text);border-color:var(--color-border-hover)}.theme-toggle .sun-icon{display:none}.theme-toggle .moon-icon{display:block}[data-theme="light"] .theme-toggle .sun-icon{display:block}[data-theme="light"] .theme-toggle .moon-icon{display:none}/* ============================================== NEWSLETTER FIX (Topics Sidebar) ============================================== */ .newsletter-card{text-align:center}.newsletter-form{display:flex;flex-direction:column;gap:var(--space-3)}.newsletter-input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:0.9rem;text-align:center}.newsletter-input:focus{outline:none;border-color:var(--color-accent)}.newsletter-input::placeholder{color:var(--color-text-dim)}/* ============================================== POST FEATURED IMAGE TOP ============================================== */ .post-featured-image-top{margin-bottom:var(--space-8)}.post-featured-image-top .container-wide{max-width:1400px;margin:0 auto;padding:0 var(--space-4)}.post-featured-image-top img{width:100%;max-height:500px;object-fit:cover;border-radius:var(--radius-2xl)}/* ============================================== SECTION HEADER ROW (Latest Articles) ============================================== */ .section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-8)}.section-header-row .section-title{margin-bottom:0}.view-all-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-accent);font-weight:500;font-size:0.9rem;transition:all var(--transition-fast)}.view-all-link:hover{color:var(--color-accent-hover)}/* ============================================== EXISTING TAGS IN WRITE PAGE ============================================== */ .existing-tags{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border)}.existing-tags-label{display:block;font-size:0.75rem;color:var(--color-text-dim);margin-bottom:var(--space-2)}.existing-tags-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.existing-tag-btn{padding:var(--space-1) var(--space-2);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:0.75rem;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.existing-tag-btn:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}/* ============================================== ACCOUNT TYPE SELECTOR (Register Page) ============================================== */ .account-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.account-type-option{position:relative;display:flex;flex-direction:column;align-items:center;padding:var(--space-5);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-xl);cursor:pointer;transition:all var(--transition-normal);text-align:center}.account-type-option:hover{border-color:var(--color-border-hover);background:var(--color-bg-card-hover)}.account-type-option.selected, .account-type-option:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-subtle)}.account-type-option input{position:absolute;opacity:0;pointer-events:none}.account-type-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-full);margin-bottom:var(--space-3);color:var(--color-text-muted);transition:all var(--transition-fast)}.account-type-option:has(input:checked) .account-type-icon, .account-type-option.selected .account-type-icon{background:var(--color-accent);color:white}.account-type-title{font-weight:600;font-size:1rem;margin-bottom:var(--space-1)}.account-type-desc{font-size:0.8rem;color:var(--color-text-muted)}/* ============================================== SIDEBAR CARD FIXES ============================================== */ .sidebar-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-5)}.sidebar-title{display:flex;align-items:center;gap:var(--space-2);font-size:1rem;font-weight:600;margin-bottom:var(--space-4)}.sidebar-title svg{color:var(--color-accent)}.trending-tags{display:flex;flex-direction:column;gap:var(--space-2)}.trending-tag{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated);border-radius:var(--radius-md);transition:all var(--transition-fast)}.trending-tag:hover, .trending-tag.active{background:var(--color-accent-subtle);color:var(--color-accent)}.trending-tag .tag-name{font-size:0.9rem}.trending-tag .tag-count{font-size:0.75rem;padding:2px 8px;background:var(--color-bg-card);border-radius:var(--radius-full);color:var(--color-text-dim)}.write-cta{background:linear-gradient(135deg, var(--color-accent-dark) 0%, var(--color-accent) 100%);color:white;border:none}.write-cta .sidebar-title{color:white}.write-cta p{font-size:0.9rem;opacity:0.9;margin-bottom:var(--space-4)}.btn-accent{background:white;color:var(--color-accent);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}.btn-accent:hover{background:rgba(255, 255, 255, 0.9)}/* ============================================== EMPTY STATE ============================================== */ .empty-state{text-align:center;padding:var(--space-12) var(--space-6);background:var(--color-bg-card);border:1px dashed var(--color-border);border-radius:var(--radius-xl)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-4)}.empty-state-title{font-size:1.25rem;margin-bottom:var(--space-2)}.empty-state-text{color:var(--color-text-muted);margin-bottom:var(--space-6)}/* ============================================== CIRCULAR AVATARS - GLOBAL FIX ============================================== */ .user-avatar, .author-avatar, .author-avatar-sm, .dashboard-avatar, .comment-avatar, .profile-avatar, img[class*="avatar"]{border-radius:50% !important;object-fit:cover}.user-avatar-placeholder, .dashboard-avatar-placeholder, .author-avatar-placeholder, .comment-avatar-placeholder, .profile-avatar-placeholder, div[class*="avatar-placeholder"]{border-radius:50% !important}/* ============================================== SINGLE POST PAGE - ENHANCED IMAGE ============================================== */ .post-featured-image-top{margin:0 0 var(--space-8);padding:0}.post-featured-image-top .container-wide{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}.post-featured-image-top img{width:100%;max-height:560px;object-fit:cover;border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl)}.post-page{padding-top:var(--space-8)}.post-header{padding:var(--space-8) 0;text-align:center}.post-category-link{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full);margin-bottom:var(--space-4);transition:all var(--transition-fast)}.post-category-link:hover{background:var(--color-accent);color:white}.post-title{font-size:clamp(2rem, 5vw, 3rem);font-weight:800;line-height:1.2;margin-bottom:var(--space-4);max-width:900px;margin-left:auto;margin-right:auto}.post-excerpt{font-size:1.2rem;color:var(--color-text-muted);max-width:700px;margin:0 auto var(--space-6);line-height:1.6}.post-meta{display:flex;align-items:center;justify-content:center;gap:var(--space-6);flex-wrap:wrap}.post-author{display:flex;align-items:center;gap:var(--space-3)}.post-author .author-avatar, .post-author .author-avatar-placeholder{width:48px;height:48px;border-radius:50%}.post-author .author-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;font-weight:600;font-size:1.1rem}.author-name{font-weight:600;color:var(--color-text)}.author-name:hover{color:var(--color-accent)}.post-date{font-size:0.85rem;color:var(--color-text-dim)}.post-actions{display:flex;align-items:center;gap:var(--space-2)}.action-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--color-bg-elevated);color:var(--color-text);border-color:var(--color-border-hover)}.action-btn.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.action-btn.like-btn.active{color:#ef4444;border-color:#ef4444;background:rgba(239, 68, 68, 0.1)}/* ============================================== EDITOR IMPROVEMENTS - SCROLLING & CROP ============================================== */ .ql-container{min-height:400px;max-height:600px;overflow-y:auto}.ql-editor{min-height:380px;font-size:1rem;line-height:1.8}.ql-container::-webkit-scrollbar{width:8px}.ql-container::-webkit-scrollbar-track{background:var(--color-bg-elevated);border-radius:4px}.ql-container::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:4px}.ql-container::-webkit-scrollbar-thumb:hover{background:var(--color-text-dim)}/* ============================================== IMAGE CROP MODAL ============================================== */ .crop-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center}.crop-modal-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.9)}.crop-modal-content{position:relative;width:90%;max-width:800px;max-height:90vh;background:var(--color-bg-card);border-radius:var(--radius-2xl);overflow:hidden;display:flex;flex-direction:column}.crop-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border)}.crop-modal-header h3{font-size:1.1rem;font-weight:600}.crop-modal-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border:none;border-radius:50%;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.crop-modal-close:hover{background:var(--color-accent);color:white}.crop-container{position:relative;flex:1;min-height:400px;background:#000;overflow:hidden}.crop-container img{max-width:100%;max-height:100%;display:block;margin:auto}.crop-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.crop-box{position:absolute;border:2px dashed var(--color-accent);background:rgba(229, 57, 53, 0.1);cursor:move;pointer-events:auto}.crop-handle{position:absolute;width:12px;height:12px;background:var(--color-accent);border-radius:2px}.crop-handle.nw{top:-6px;left:-6px;cursor:nw-resize}.crop-handle.ne{top:-6px;right:-6px;cursor:ne-resize}.crop-handle.sw{bottom:-6px;left:-6px;cursor:sw-resize}.crop-handle.se{bottom:-6px;right:-6px;cursor:se-resize}.crop-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);gap:var(--space-4)}.crop-controls{display:flex;align-items:center;gap:var(--space-4)}.crop-control-group{display:flex;align-items:center;gap:var(--space-2)}.crop-control-group label{font-size:0.85rem;color:var(--color-text-muted)}.crop-slider{width:100px;accent-color:var(--color-accent)}.crop-actions{display:flex;gap:var(--space-3)}/* ============================================== SINGLE POST PAGE - NEW DESIGN ============================================== */ .post-page{padding-bottom:var(--space-16);overflow-x:hidden}.post-hero-image{width:100%;max-width:100vw;margin:0 0 var(--space-8);padding:0;overflow:hidden;background:var(--color-bg-alt)}.post-hero-image img{width:100%;max-height:45vh;min-height:200px;object-fit:cover;display:block;margin:0 auto}@media (min-width:768px){.post-hero-image{max-width:900px;margin:var(--space-6) auto var(--space-8);border-radius:var(--radius-xl);background:transparent}.post-hero-image img{max-height:40vh;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}}.post-header-simple{text-align:center;padding:var(--space-6) 0 var(--space-10)}.post-category-badge{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full);margin-bottom:var(--space-4);transition:all var(--transition-fast)}.post-category-badge:hover{background:var(--color-accent);color:white}.post-main-title{font-size:clamp(2rem, 5vw, 3rem);font-weight:800;line-height:1.15;margin-bottom:var(--space-4)}.post-subtitle{font-size:1.2rem;color:var(--color-text-muted);max-width:700px;margin:0 auto var(--space-5);line-height:1.6}.post-meta-simple{display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--color-text-dim);font-size:0.9rem}.meta-dot{opacity:0.5}.post-actions-bar{padding:var(--space-6) 0;margin:var(--space-8) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.actions-bar-inner{display:flex;align-items:center;justify-content:space-between}.actions-left, .actions-right{display:flex;align-items:center;gap:var(--space-3)}.action-btn-lg{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:0.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.action-btn-lg:hover{background:var(--color-bg-elevated);color:var(--color-text);border-color:var(--color-border-hover)}.action-btn-lg.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.action-btn-lg.like-btn.active{background:rgba(239, 68, 68, 0.1);border-color:#ef4444;color:#ef4444}.action-btn-lg.bookmark-btn.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.author-card-section{padding:var(--space-10) 0}.author-card-enhanced{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-8);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl)}@media (max-width:768px){.author-card-enhanced{flex-direction:column;text-align:center}}.author-avatar-lg{width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0}.author-avatar-lg.author-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);color:white;font-size:2rem;font-weight:700}.author-card-center{flex:1}.written-by{font-size:0.8rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:0.05em}.author-card-name{font-size:1.25rem;font-weight:700;margin:var(--space-1) 0 var(--space-2)}.author-card-name a{color:var(--color-text)}.author-card-name a:hover{color:var(--color-accent)}.author-card-bio{color:var(--color-text-muted);font-size:0.95rem;line-height:1.6}.author-card-right{display:flex;flex-direction:column;gap:var(--space-3)}@media (max-width:768px){.author-card-right{flex-direction:row;width:100%;justify-content:center}}/* ============================================== POST CONTENT IMAGES - 4:3 RATIO ============================================== */ .post-content img{width:100%;height:auto;border-radius:var(--radius-lg);margin:var(--space-6) 0}.post-content figure{margin:var(--space-8) 0}.post-content figure img{margin:0}.post-content figcaption{text-align:center;font-size:0.85rem;color:var(--color-text-dim);margin-top:var(--space-2)}/* ============================================== SOCIAL SHARE DROPDOWN ============================================== */ .share-dropdown{position:relative}.share-menu{position:absolute;bottom:calc(100% + 10px);right:0;min-width:200px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transform:translateY(10px);transition:all 0.2s ease;z-index:100}.share-menu.active{opacity:1;visibility:visible;transform:translateY(0)}.share-option{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:0.9rem;background:none;border:none;cursor:pointer;transition:all var(--transition-fast);text-align:left}.share-option:hover{background:var(--color-bg-card);color:var(--color-text)}.share-option[data-platform="twitter"]:hover{color:#1DA1F2}.share-option[data-platform="facebook"]:hover{color:#1877F2}.share-option[data-platform="linkedin"]:hover{color:#0A66C2}.share-option[data-platform="whatsapp"]:hover{color:#25D366}.share-option[data-platform="email"]:hover{color:var(--color-accent)}.share-option[data-platform="copy"]:hover{color:var(--color-accent)}.share-option svg{flex-shrink:0}.share-menu::after{content:'';position:absolute;bottom:-6px;right:20px;width:12px;height:12px;background:var(--color-bg-elevated);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);transform:rotate(45deg)}/* ============================================== AD PLACEHOLDERS & CONTAINERS ============================================== */ .ad-container{padding:var(--space-4) 0}.ad-in-article{margin:var(--space-8) 0}.ad-after-content{padding:var(--space-8) 0;background:var(--color-bg-alt);border-top:1px solid var(--color-border)}.ad-placeholder{background:var(--color-bg-alt);border:1px dashed var(--color-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-text-dim);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;opacity:0.4;transition:opacity var(--transition-fast)}.ad-placeholder:hover{opacity:0.6}@media (max-width:768px){.ad-placeholder-header{height:60px !important}.ad-placeholder-in-article{height:250px !important}}.ad-container ins{display:block}/* ============================================== HASHTAG GENERATOR TOOL ============================================== */ .tool-page{padding:var(--space-12) 0;min-height:80vh}.tool-page-header{text-align:center;margin-bottom:var(--space-12)}.tool-page-icon{width:80px;height:80px;margin:0 auto var(--space-6);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-accent-subtle) 0%, transparent 100%);border-radius:var(--radius-xl);color:var(--color-accent)}.tool-page-title{font-size:clamp(2rem, 5vw, 3rem);font-weight:800;margin-bottom:var(--space-4)}.tool-page-subtitle{font-size:1.125rem;color:var(--color-text-muted);max-width:600px;margin:0 auto}.hashtag-generator{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-12)}.generator-input-section{margin-bottom:var(--space-6)}.input-label{display:block;font-weight:600;margin-bottom:var(--space-3);color:var(--color-text)}.input-with-btn{display:flex;gap:var(--space-3)}.generator-input{flex:1;padding:var(--space-4) var(--space-5);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);font-size:1rem;transition:all var(--transition-fast)}.generator-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.btn-generate{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-6);white-space:nowrap}.quick-topics{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}.quick-label{font-size:0.85rem;color:var(--color-text-dim)}.quick-topic{padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);font-size:0.85rem;cursor:pointer;transition:all var(--transition-fast)}.quick-topic:hover{border-color:var(--color-accent);color:var(--color-accent)}.platform-selector{margin-bottom:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-border)}.platform-options{display:flex;flex-wrap:wrap;gap:var(--space-3)}.platform-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted);font-size:0.9rem;cursor:pointer;transition:all var(--transition-fast)}.platform-btn:hover{border-color:var(--color-text-dim);color:var(--color-text)}.platform-btn.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.hashtag-results{padding-top:var(--space-8);border-top:1px solid var(--color-border)}.results-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6)}.results-title{font-size:1.25rem;font-weight:600}.results-title span{color:var(--color-accent)}.results-actions{display:flex;gap:var(--space-3)}.hashtag-categories{display:grid;gap:var(--space-6);margin-bottom:var(--space-8)}.hashtag-category{background:var(--color-bg);border-radius:var(--radius-lg);padding:var(--space-5)}.category-label{display:flex;align-items:center;gap:var(--space-2);font-size:0.9rem;font-weight:600;margin-bottom:var(--space-4);color:var(--color-text-muted)}.category-icon{font-size:1rem}.hashtag-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.hashtag-tag{display:inline-flex;align-items:center;gap:2px;padding:var(--space-2) var(--space-3);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.85rem;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);user-select:none}.hashtag-tag:hover{border-color:var(--color-accent);color:var(--color-accent)}.hashtag-tag .tag-hash{color:var(--color-accent);font-weight:600}.hashtag-tag .tag-check{display:none;color:var(--color-success);margin-left:var(--space-1)}.hashtag-tag:not(.excluded) .tag-check{display:inline}.hashtag-tag.excluded{opacity:0.4;text-decoration:line-through}.copy-preview{margin-top:var(--space-6)}.copy-textarea{width:100%;min-height:100px;padding:var(--space-4);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);font-size:0.9rem;font-family:inherit;resize:vertical}.tool-tips{margin-bottom:var(--space-12)}.tips-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-8);text-align:center}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--space-6)}.tip-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);position:relative}.tip-number{position:absolute;top:var(--space-4);right:var(--space-4);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-subtle);color:var(--color-accent);border-radius:var(--radius-full);font-weight:700;font-size:0.85rem}.tip-card h3{font-size:1.1rem;font-weight:600;margin-bottom:var(--space-2)}.tip-card p{font-size:0.9rem;color:var(--color-text-muted);line-height:1.6}.tool-faq{max-width:800px;margin:0 auto}.faq-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-8);text-align:center}.faq-list{display:flex;flex-direction:column;gap:var(--space-4)}.faq-item{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.faq-question{padding:var(--space-5);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq-question::-webkit-details-marker{display:none}.faq-question::after{content:'+';font-size:1.5rem;color:var(--color-accent);transition:transform var(--transition-fast)}.faq-item[open] .faq-question::after{transform:rotate(45deg)}.faq-answer{padding:0 var(--space-5) var(--space-5);color:var(--color-text-muted);line-height:1.7}@media (max-width:640px){.hashtag-generator{padding:var(--space-5)}.input-with-btn{flex-direction:column}.btn-generate{width:100%;justify-content:center}.platform-options{display:grid;grid-template-columns:repeat(2, 1fr)}.results-header{flex-direction:column;align-items:flex-start}}/* ============================================== TABLE OF CONTENTS ============================================== */ .toc-container{padding:var(--space-6) 0}.toc-box{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.toc-toggle{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:none;border:none;cursor:pointer;text-align:left;color:var(--color-text);transition:background var(--transition-fast)}.toc-toggle:hover{background:var(--color-bg-elevated)}.toc-toggle-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--color-accent-subtle);border-radius:var(--radius-md);color:var(--color-accent)}.toc-title{flex:1;font-weight:600;font-size:1rem}.toc-arrow{color:var(--color-text-muted);transition:transform var(--transition-fast)}.toc-box.active .toc-arrow{transform:rotate(180deg)}.toc-nav{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.toc-nav.active{max-height:500px}.toc-list{list-style:none;padding:0 var(--space-5) var(--space-5);margin:0;border-top:1px solid var(--color-border);padding-top:var(--space-4)}.toc-item{margin-bottom:var(--space-2)}.toc-item-sub{margin-left:var(--space-6)}.toc-link{display:block;padding:var(--space-2) var(--space-3);color:var(--color-text-muted);font-size:0.9rem;border-radius:var(--radius-md);transition:all var(--transition-fast)}.toc-link:hover{background:var(--color-bg-elevated);color:var(--color-accent)}.toc-item-sub .toc-link{font-size:0.85rem;color:var(--color-text-dim)}.toc-item-sub .toc-link::before{content:'—';margin-right:var(--space-2);opacity:0.5}/* ============================================== FLOATING SHARE BAR ============================================== */ .floating-share{position:fixed;left:20px;top:50%;transform:translateY(-50%) translateX(-100px);display:flex;flex-direction:column;gap:var(--space-2);z-index:100;opacity:0;visibility:hidden;transition:all 0.3s var(--ease-out)}.floating-share.visible{transform:translateY(-50%) translateX(0);opacity:1;visibility:visible}.floating-share-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.floating-share-btn:hover{transform:scale(1.1);border-color:var(--color-accent)}.floating-share-btn[data-platform="twitter"]:hover{color:#1DA1F2;border-color:#1DA1F2}.floating-share-btn[data-platform="facebook"]:hover{color:#1877F2;border-color:#1877F2}.floating-share-btn[data-platform="linkedin"]:hover{color:#0A66C2;border-color:#0A66C2}.floating-share-btn[data-platform="instagram"]:hover{color:#E4405F;border-color:#E4405F}.floating-share-btn[data-platform="whatsapp"]:hover{color:#25D366;border-color:#25D366}.floating-share-btn[data-platform="copy"]:hover{color:var(--color-accent)}.floating-share-btn.copied{background:var(--color-success);color:white;border-color:var(--color-success)}@media (max-width:1200px){.floating-share{display:none}}/* ============================================== SIDEBAR ADS (Desktop Only) ============================================== */ .sidebar-ad{position:fixed;top:50%;transform:translateY(-50%);width:160px;z-index:50;display:none}.sidebar-ad-left{left:20px}.sidebar-ad-right{right:20px}@media (min-width:1400px){.sidebar-ad{display:block}}.mobile-ad-banner{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-card);border-top:1px solid var(--color-border);padding:var(--space-2);z-index:100;text-align:center}@media (max-width:768px){.mobile-ad-banner{display:block}}/* ============================================== REACTIONS SYSTEM ============================================== */ .reactions-container{position:relative}.reactions-toggle{display:flex;align-items:center;gap:var(--space-2)}.reactions-preview{display:flex;align-items:center}.reaction-emoji{font-size:1.4rem;line-height:1}.reactions-popup{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) scale(0.8);display:flex;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-xl);opacity:0;visibility:hidden;transition:all 0.2s var(--ease-out);z-index:100}.reactions-popup.active{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}.reaction-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:none;border:none;border-radius:var(--radius-full);cursor:pointer;transition:transform var(--transition-fast)}.reaction-btn:hover{transform:scale(1.3);background:var(--color-bg-card)}.reactions-popup::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--color-bg-elevated);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}/* ============================================== SEARCH AUTOCOMPLETE ENHANCEMENTS ============================================== */ .search-suggestions{padding:var(--space-4);border-bottom:1px solid var(--color-border)}.suggestions-label{font-size:0.75rem;font-weight:600;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-3)}.suggestions-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}.suggestion-chip{padding:var(--space-2) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.85rem;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.suggestion-chip:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-subtle)}.search-loading{position:absolute;right:60px;top:50%;transform:translateY(-50%)}.search-loading .spinner{animation:spin 1s linear infinite}.search-result-item{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);transition:background var(--transition-fast)}.search-result-item:hover{background:var(--color-bg-elevated)}.search-result-thumb{width:60px;height:45px;border-radius:var(--radius-md);object-fit:cover;flex-shrink:0}.search-result-content{flex:1;min-width:0}.search-result-title{font-weight:600;margin-bottom:var(--space-1);color:var(--color-text)}.search-result-title mark{background:var(--color-accent-subtle);color:var(--color-accent);padding:0 2px;border-radius:2px}.search-result-meta{font-size:0.8rem;color:var(--color-text-dim)}.search-no-results{padding:var(--space-8);text-align:center;color:var(--color-text-muted)}.search-no-results svg{width:48px;height:48px;margin-bottom:var(--space-4);opacity:0.5}/* ============================================== HERO SLIDER (Main Hero Replacement) ============================================== */ .hero-slider-main{position:relative;background:var(--color-bg-alt)}.hero-slider-wrapper{max-width:100%;margin:0 auto}.hero-slider{position:relative;overflow:hidden}.hero-slide{display:none;position:relative;min-height:70vh}.hero-slide.active{display:block;animation:fadeIn 0.6s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.hero-slide-link{display:block;position:relative;text-decoration:none;color:white;height:100%}.hero-slide-image{position:absolute;inset:0;overflow:hidden}.hero-slide-image img{width:100%;height:100%;object-fit:cover}.hero-slide-overlay{position:absolute;inset:0;background:linear-gradient( to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 100% )}.hero-slide-content{position:relative;z-index:2;max-width:700px;padding:var(--space-16) var(--space-8);min-height:70vh;display:flex;flex-direction:column;justify-content:center}.hero-slide-category{display:inline-block;padding:var(--space-2) var(--space-4);background:var(--color-accent);color:white;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;border-radius:var(--radius-full);margin-bottom:var(--space-4);width:fit-content}.hero-slide-title{font-size:clamp(2rem, 5vw, 3.5rem);font-weight:800;line-height:1.1;margin-bottom:var(--space-4);text-shadow:0 2px 20px rgba(0,0,0,0.5)}.hero-slide-excerpt{font-size:1.125rem;opacity:0.9;line-height:1.6;margin-bottom:var(--space-4)}.hero-slide-meta{display:flex;align-items:center;gap:var(--space-2);font-size:0.9rem;opacity:0.8;margin-bottom:var(--space-6)}.hero-slide-meta .meta-dot{opacity:0.5}.hero-slide-cta{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:white;color:var(--color-bg);font-weight:600;border-radius:var(--radius-full);width:fit-content;transition:all var(--transition-fast)}.hero-slide-link:hover .hero-slide-cta{background:var(--color-accent);color:white;transform:translateX(5px)}.hero-slider-controls{position:absolute;bottom:var(--space-8);right:var(--space-8);display:flex;align-items:center;gap:var(--space-3);z-index:10}.slider-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-full);color:white;cursor:pointer;transition:all var(--transition-fast)}.slider-btn:hover{background:rgba(255,255,255,0.3);transform:scale(1.1)}.slider-dots{display:flex;gap:var(--space-2)}.slider-dot{width:12px;height:12px;background:rgba(255,255,255,0.4);border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast)}.slider-dot.active, .slider-dot:hover{background:white;transform:scale(1.2)}@media (max-width:768px){.hero-slide{min-height:60vh}.hero-slide-content{padding:var(--space-8) var(--space-4);min-height:60vh}.hero-slide-excerpt{display:none}.hero-slider-controls{bottom:var(--space-4);right:var(--space-4)}.slider-btn{width:40px;height:40px}}/* ============================================== ABOUT PAGE - IMPROVED LAYOUTS ============================================== */ .section-header-center{text-align:center;margin-bottom:var(--space-12)}.section-header-center .section-title{margin-bottom:var(--space-4)}.section-header-center .section-subtitle{max-width:600px;margin:0 auto;color:var(--color-text-muted)}.founders-grid-centered{display:flex;justify-content:center;gap:var(--space-8);flex-wrap:wrap;max-width:800px;margin:0 auto}.founder-card-simple{flex:1;min-width:280px;max-width:350px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8);text-align:center;transition:all var(--transition-normal)}.founder-card-simple:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--color-accent)}.founder-avatar-large{width:100px;height:100px;margin:0 auto var(--space-5);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);border-radius:var(--radius-full);font-size:2.5rem;font-weight:800;color:white;font-family:var(--font-display)}.founder-info-centered{text-align:center}.founder-info-centered .founder-name{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-2)}.founder-info-centered .founder-role{color:var(--color-accent);font-weight:600;margin-bottom:var(--space-4)}.founder-info-centered .founder-bio{color:var(--color-text-muted);font-size:0.95rem;line-height:1.6}.values-grid-centered{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--space-6);max-width:1100px;margin:0 auto}.values-grid-centered .value-card{text-align:center}/* ============================================== ADMIN STYLES ============================================== */ .admin-legend{display:flex;gap:var(--space-4);font-size:0.8rem;color:var(--color-text-muted)}.legend-item{display:flex;align-items:center;gap:var(--space-2)}.legend-dot{width:10px;height:10px;border-radius:var(--radius-full)}.legend-dot.featured{background:var(--color-accent)}.legend-dot.hidden{background:var(--color-warning)}.row-hidden{opacity:0.6;background:rgba(234, 179, 8, 0.05)}.row-featured{background:rgba(229, 57, 53, 0.05)}.badge-featured, .badge-hidden{margin-right:var(--space-2)}.btn-accent{background:var(--color-accent);color:white;border-color:var(--color-accent)}.btn-accent:hover{background:var(--color-accent-hover)}.btn-warning{background:var(--color-warning);color:#000;border-color:var(--color-warning)}/* ============================================== FEATURED SLIDER (Below Hero) ============================================== */ .featured-slider-section{padding:var(--space-8) 0;background:var(--color-bg-alt)}.section-header-inline{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.section-title-sm{font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:var(--space-2)}.title-icon{font-size:1.5rem}.featured-slider{position:relative;border-radius:var(--radius-2xl);overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border)}.featured-slide{display:none}.featured-slide.active{display:block;animation:fadeIn 0.5s ease}.featured-slide-link{display:grid;grid-template-columns:1fr 1fr;text-decoration:none;color:var(--color-text);min-height:350px}.featured-slide-image{position:relative;overflow:hidden}.featured-slide-image img{width:100%;height:100%;object-fit:cover}.featured-slide-overlay{position:absolute;inset:0;background:linear-gradient(to right, transparent 60%, var(--color-bg-card) 100%)}.featured-slide-content{padding:var(--space-8);display:flex;flex-direction:column;justify-content:center}.featured-slide-category{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.75rem;font-weight:600;text-transform:uppercase;border-radius:var(--radius-full);margin-bottom:var(--space-3);width:fit-content}.featured-slide-title{font-size:1.75rem;font-weight:800;line-height:1.2;margin-bottom:var(--space-3)}.featured-slide-excerpt{color:var(--color-text-muted);margin-bottom:var(--space-4);line-height:1.6}.featured-slide-meta{display:flex;align-items:center;gap:var(--space-2);font-size:0.85rem;color:var(--color-text-dim)}.featured-slider-controls{position:absolute;bottom:var(--space-4);right:var(--space-4);display:flex;align-items:center;gap:var(--space-2);z-index:10}.featured-slider-controls .slider-btn{width:36px;height:36px;background:var(--color-bg-elevated);border:1px solid var(--color-border);color:var(--color-text)}.featured-slider-controls .slider-btn:hover{background:var(--color-accent);color:white;border-color:var(--color-accent)}.featured-slider-controls .slider-dot{width:8px;height:8px;background:var(--color-border)}.featured-slider-controls .slider-dot.active{background:var(--color-accent)}@media (max-width:768px){.featured-slide-link{grid-template-columns:1fr;min-height:auto}.featured-slide-image{height:200px}.featured-slide-overlay{background:linear-gradient(to bottom, transparent 60%, var(--color-bg-card) 100%)}.featured-slide-content{padding:var(--space-5)}.featured-slide-title{font-size:1.25rem}.featured-slide-excerpt{display:none}}/* ============================================== POST INLINE TAGS (Below Summary) ============================================== */ .post-tags-inline{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);justify-content:center}.post-tag-sm{display:inline-block;padding:var(--space-1) var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.8rem;color:var(--color-text-muted);text-decoration:none;transition:all var(--transition-fast)}.post-tag-sm:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-subtle)}/* ============================================== AUTHOR CARD INLINE ACTIONS ============================================== */ .author-card-actions{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.action-btn-inline{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:none;border:none;color:var(--color-text-muted);font-size:0.9rem;cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast)}.action-btn-inline:hover{background:var(--color-bg-elevated);color:var(--color-text)}.action-btn-inline.active{color:var(--color-accent)}.action-btn-inline.active svg{color:var(--color-accent)}.article-card-content{padding:var(--space-4);display:flex;flex-direction:column;flex:1}.article-card-meta{margin-top:auto;padding-top:var(--space-3)}/* ============================================== CATEGORY COLORS ============================================== */ .category-tech{--cat-color:#3b82f6}.category-ai{--cat-color:#8b5cf6}.category-finance{--cat-color:#10b981}.category-business{--cat-color:#f59e0b}.category-lifestyle{--cat-color:#ec4899}.category-productivity{--cat-color:#06b6d4}.category-news{--cat-color:#ef4444}.category-tutorials{--cat-color:#6366f1}.card-category[data-category="tech"], .card-category[data-category="technology"]{background:#3b82f6}.card-category[data-category="ai"], .card-category[data-category="artificial-intelligence"]{background:#8b5cf6}.card-category[data-category="finance"], .card-category[data-category="money"]{background:#10b981}.card-category[data-category="business"]{background:#f59e0b}.card-category[data-category="lifestyle"]{background:#ec4899}.card-category[data-category="productivity"]{background:#06b6d4}.card-category[data-category="news"]{background:#ef4444}.card-category[data-category="tutorials"], .card-category[data-category="how-to"]{background:#6366f1}/* ============================================== TRENDING BADGE 🔥 ============================================== */ .trending-badge{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;gap:4px;padding:4px 10px;background:linear-gradient(135deg, #f97316 0%, #ef4444 100%);color:white;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full);box-shadow:0 2px 8px rgba(239, 68, 68, 0.4);z-index:3;animation:pulse-badge 2s ease-in-out infinite}.trending-badge svg{width:12px;height:12px}@keyframes pulse-badge{0%, 100%{transform:scale(1)}50%{transform:scale(1.05)}}/* ============================================== COPY CODE BUTTON ============================================== */ .code-block-wrapper{position:relative;margin:var(--space-6) 0}.copy-code-btn{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255, 255, 255, 0.1);border:1px solid rgba(255, 255, 255, 0.2);border-radius:var(--radius-md);color:rgba(255, 255, 255, 0.7);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s;z-index:2}.copy-code-btn:hover{background:rgba(255, 255, 255, 0.2);color:white}.copy-code-btn.copied{background:var(--color-success);border-color:var(--color-success);color:white}.copy-code-btn svg{width:14px;height:14px}/* ============================================== NEWSLETTER POPUP ============================================== */ /* ============================================== NEWSLETTER POPUP - FIXED ============================================== */ .newsletter-popup-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}.newsletter-popup-overlay.active{display:flex}.newsletter-popup{background:#ffffff;border-radius:20px;max-width:420px;width:100%;overflow:hidden;box-shadow:0 25px 80px rgba(0, 0, 0, 0.5);animation:popupSlideIn 0.4s ease;position:relative}@keyframes popupSlideIn{from{opacity:0;transform:translateY(30px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}.newsletter-popup-header{background:linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);padding:32px 24px;text-align:center;position:relative}.newsletter-popup-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.2);border:none;border-radius:50%;color:white;cursor:pointer;transition:background 0.2s, transform 0.2s}.newsletter-popup-close:hover{background:rgba(255, 255, 255, 0.3);transform:scale(1.1)}.newsletter-popup-icon{font-size:3.5rem;margin-bottom:12px}.newsletter-popup-title{color:white;font-size:1.6rem;font-weight:700;margin:0 0 8px 0}.newsletter-popup-subtitle{color:rgba(255, 255, 255, 0.9);font-size:1rem;margin:0}.newsletter-popup-body{padding:28px 24px;background:#ffffff}.newsletter-popup-features{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.newsletter-feature{display:flex;align-items:center;gap:12px;color:#1a1a2e;font-size:0.95rem}.newsletter-feature svg{width:20px;height:20px;color:#10b981;flex-shrink:0}.newsletter-popup-form{display:flex;flex-direction:column;gap:12px}.newsletter-popup-input{width:100%;padding:14px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;background:#ffffff;color:#1a1a2e;transition:border-color 0.2s, box-shadow 0.2s}.newsletter-popup-input::placeholder{color:#9ca3af}.newsletter-popup-input:focus{outline:none;border-color:#5c6bc0;box-shadow:0 0 0 4px rgba(92, 107, 192, 0.15)}.newsletter-popup-btn{width:100%;padding:14px 24px;background:linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);color:white;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform 0.2s, box-shadow 0.2s}.newsletter-popup-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(92, 107, 192, 0.4)}.newsletter-popup-skip{text-align:center;margin-top:16px}.newsletter-popup-skip button{background:none;border:none;color:#6b7280;font-size:0.9rem;cursor:pointer;padding:8px;transition:color 0.2s}.newsletter-popup-skip button:hover{color:#1a1a2e}@media (max-width:480px){.newsletter-popup{max-width:100%;margin:10px;border-radius:16px}.newsletter-popup-header{padding:24px 20px}.newsletter-popup-body{padding:20px}.newsletter-popup-title{font-size:1.4rem}}flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)}.newsletter-feature{display:flex;align-items:center;gap:var(--space-3);font-size:0.9rem;color:var(--color-text-secondary)}.newsletter-feature svg{width:20px;height:20px;color:var(--color-success);flex-shrink:0}.newsletter-popup-form{display:flex;flex-direction:column;gap:var(--space-3)}.newsletter-popup-input{padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:1rem;background:var(--color-bg-input);color:var(--color-text);transition:border-color 0.2s}.newsletter-popup-input:focus{border-color:var(--color-accent);outline:none}.newsletter-popup-btn{padding:var(--space-4);background:var(--color-accent);border:none;border-radius:var(--radius-lg);color:white;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.2s}.newsletter-popup-btn:hover{background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px var(--color-accent-glow)}.newsletter-popup-skip{text-align:center;margin-top:var(--space-4)}.newsletter-popup-skip button{background:none;border:none;color:var(--color-text-muted);font-size:0.85rem;cursor:pointer;text-decoration:underline}.newsletter-popup-skip button:hover{color:var(--color-text)}/* ============================================== RELATED POSTS SECTION ============================================== */ .related-posts-section{padding:var(--space-12) 0;background:var(--color-bg-alt);border-top:1px solid var(--color-border)}.related-posts-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:var(--space-8);color:var(--color-text)}.related-posts-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-6)}@media (max-width:1024px){.related-posts-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:640px){.related-posts-grid{grid-template-columns:1fr}}/* ============================================== STICKY SIDEBAR ============================================== */ .sticky-sidebar{position:sticky;top:calc(var(--navbar-height) + var(--space-6));max-height:calc(100vh - var(--navbar-height) - var(--space-12));overflow-y:auto}.sidebar-widget{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-5)}.sidebar-widget:last-child{margin-bottom:0}.widget-title{font-size:1rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2)}.widget-title svg{width:18px;height:18px;color:var(--color-accent)}/* ============================================== AD PLACEMENTS ============================================== */ .ad-slot{background:var(--color-bg-elevated);border:1px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center;margin:var(--space-6) 0}.ad-slot-label{font-size:0.7rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--space-2)}.ad-slot-sidebar{min-height:250px}.ad-slot-header{min-height:90px}.ad-slot-inline{min-height:100px}.ad-slot-footer{min-height:90px}/* ============================================== RICH TEXT EDITOR ENHANCEMENTS ============================================== */ .editor-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none}.editor-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:all 0.2s}.editor-btn:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.editor-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:white}.editor-btn svg{width:18px;height:18px}.editor-divider{width:1px;height:24px;background:var(--color-border);margin:0 var(--space-2);align-self:center}.editor-content{min-height:400px;padding:var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:0 0 var(--radius-lg) var(--radius-lg);font-size:1rem;line-height:1.8;color:var(--color-text)}.editor-content:focus{outline:none;border-color:var(--color-accent)}.editor-content[contenteditable="true"]:empty::before{content:attr(data-placeholder);color:var(--color-text-dim);pointer-events:none}.editor-image-upload{border:2px dashed var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;cursor:pointer;transition:all 0.2s}.editor-image-upload:hover{border-color:var(--color-accent);background:var(--color-accent-subtle)}.editor-image-upload svg{width:48px;height:48px;color:var(--color-text-dim);margin-bottom:var(--space-3)}.editor-image-upload p{color:var(--color-text-muted);margin:0}/* ============================================== MOBILE OPTIMIZATIONS ============================================== */ @media (max-width:768px){.newsletter-popup{max-width:100%;margin:var(--space-4);border-radius:var(--radius-xl)}.newsletter-popup-header{padding:var(--space-6) var(--space-4)}.newsletter-popup-body{padding:var(--space-4)}.newsletter-popup-title{font-size:1.25rem}.sticky-sidebar{position:static;max-height:none}.editor-toolbar{padding:var(--space-2)}.editor-btn{width:32px;height:32px}.editor-content{min-height:300px;padding:var(--space-4)}}/* ============================================== READING PROGRESS BAR - REDESIGNED ============================================== */ .reading-progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #667eea 100%);background-size:200% 100%;width:0;z-index:9999999;transition:width 0.15s ease-out;animation:progressGradient 3s linear infinite;box-shadow:0 0 10px rgba(102, 126, 234, 0.5), 0 0 20px rgba(102, 126, 234, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);pointer-events:none}@keyframes progressGradient{0%{background-position:0% 50%}100%{background-position:200% 50%}}.reading-progress::after{content:'';position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:#ffffff;border-radius:50%;box-shadow:0 0 8px rgba(102, 126, 234, 0.8), 0 2px 4px rgba(0,0,0,0.2);opacity:0;transition:opacity 0.3s}.reading-progress.active::after{opacity:1}.reading-time-remaining{position:fixed;top:80px;right:var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:0.8rem;font-weight:500;color:var(--color-text-muted);z-index:1000;opacity:0;transform:translateX(20px);transition:all 0.3s ease;box-shadow:var(--shadow-md)}.reading-time-remaining.visible{opacity:1;transform:translateX(0)}.reading-time-remaining svg{width:14px;height:14px;margin-right:4px;vertical-align:-2px}/* ============================================== BREADCRUMBS ============================================== */ .breadcrumbs{background:var(--color-bg-alt);border-bottom:1px solid var(--color-border);padding:var(--space-3) 0}.breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;font-size:0.875rem}.breadcrumb-item{display:flex;align-items:center}.breadcrumb-item a{display:flex;align-items:center;gap:6px;color:var(--color-text-muted);text-decoration:none;transition:color 0.2s}.breadcrumb-item a:hover{color:var(--color-accent)}.breadcrumb-item a svg{width:14px;height:14px}.breadcrumb-item:not(:last-child)::after{content:'';display:block;width:16px;height:16px;margin-left:var(--space-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");background-size:contain;opacity:0.5}.breadcrumb-item.active{color:var(--color-text);font-weight:500}@media (max-width:640px){.breadcrumb-list{font-size:0.8rem}.breadcrumb-item:not(:last-child):not(:first-child){display:none}}/* ============================================== QUICK REACTIONS ON CARDS ============================================== */ .card-quick-reactions{display:flex;gap:2px;margin-left:auto}.card-reaction-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-full);cursor:pointer;font-size:0.9rem;opacity:0.6;transition:all 0.2s}.card-reaction-btn:hover{opacity:1;transform:scale(1.2);background:var(--color-bg-elevated)}.card-reaction-btn.active{opacity:1}.card-reactions-display{display:flex;align-items:center;gap:2px;padding:2px 8px;background:var(--color-bg-elevated);border-radius:var(--radius-full);font-size:0.8rem}.card-reactions-display span{font-size:0.75rem}/* ============================================== SOCIAL SHARE COUNTER ============================================== */ .share-with-count{display:flex;align-items:center;gap:var(--space-2)}.share-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.7rem;font-weight:700;border-radius:var(--radius-full)}/* ============================================== RELATED POSTS CAROUSEL ============================================== */ .related-carousel{position:relative;overflow:hidden}.related-carousel-track{display:flex;gap:var(--space-5);transition:transform 0.5s ease}.related-carousel-item{flex:0 0 calc(33.333% - var(--space-4));min-width:280px}@media (max-width:1024px){.related-carousel-item{flex:0 0 calc(50% - var(--space-3))}}@media (max-width:640px){.related-carousel-item{flex:0 0 85%}}.related-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);cursor:pointer;z-index:2;box-shadow:var(--shadow-md);transition:all 0.2s}.related-carousel-nav:hover{background:var(--color-accent);border-color:var(--color-accent);color:white}.related-carousel-nav.prev{left:var(--space-2)}.related-carousel-nav.next{right:var(--space-2)}/* ============================================== SOCIAL SHARE COUNTS ============================================== */ .share-btn-with-count{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s}.share-btn-with-count:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.share-btn-with-count svg{width:16px;height:16px}.share-count{font-weight:600}/* ============================================== TABLE OF CONTENTS - Enhanced ============================================== */ .toc-wrapper{padding:var(--space-4) 0;margin-bottom:var(--space-4)}.toc-box{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.toc-toggle{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:none;border:none;color:var(--color-text);font-size:1rem;font-weight:600;cursor:pointer;transition:background 0.2s}.toc-toggle:hover{background:var(--color-bg-alt)}.toc-toggle svg:first-child{color:var(--color-accent)}.toc-chevron{margin-left:auto;transition:transform 0.3s}.toc-box.expanded .toc-chevron{transform:rotate(180deg)}.toc-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.toc-box.expanded .toc-content{max-height:500px}.toc-list{list-style:none;padding:0 var(--space-5) var(--space-4);margin:0;counter-reset:toc}.toc-list li{counter-increment:toc;margin-bottom:var(--space-2)}.toc-list li a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);color:var(--color-text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:all 0.2s;font-size:0.95rem}.toc-list li a::before{content:counter(toc);display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-accent-subtle);color:var(--color-accent);border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;flex-shrink:0}.toc-list li a:hover{background:var(--color-accent-subtle);color:var(--color-accent)}.toc-list li a.active{background:var(--color-accent);color:white}.toc-list li a.active::before{background:rgba(255,255,255,0.2);color:white}.toc-list .toc-h3{padding-left:var(--space-8)}.toc-list .toc-h3 a::before{width:20px;height:20px;font-size:0.7rem}/* ============================================== THEME TOGGLE - Animated Sun/Moon ============================================== */ .theme-toggle{position:relative;width:44px;height:44px;border-radius:var(--radius-full);background:var(--color-bg-elevated);border:1px solid var(--color-border);cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:all 0.3s}.theme-toggle:hover{background:var(--color-accent-subtle);border-color:var(--color-accent)}.theme-toggle-icon{position:relative;width:22px;height:22px}.theme-toggle-sun, .theme-toggle-moon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.theme-toggle-sun svg{color:#f59e0b}.theme-toggle-moon svg{color:#6366f1}[data-theme="dark"] .theme-toggle-sun{transform:rotate(90deg) scale(0);opacity:0}[data-theme="dark"] .theme-toggle-moon{transform:rotate(0) scale(1);opacity:1}[data-theme="light"] .theme-toggle-sun{transform:rotate(0) scale(1);opacity:1}[data-theme="light"] .theme-toggle-moon{transform:rotate(-90deg) scale(0);opacity:0}@keyframes sun-rays{0%, 100%{transform:rotate(0deg)}50%{transform:rotate(180deg)}}.theme-toggle:hover .theme-toggle-sun svg{animation:sun-rays 2s ease-in-out infinite}/* ============================================== LAZY LOAD - Blur Placeholder ============================================== */ .lazy-image-wrapper{position:relative;overflow:hidden;background:var(--color-bg-elevated)}.lazy-image{opacity:0;transition:opacity 0.5s ease}.lazy-image.loaded{opacity:1}.lazy-placeholder{position:absolute;inset:0;background:linear-gradient( 135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 50%, var(--color-bg-elevated) 100% );background-size:200% 200%;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.lazy-image.loaded + .lazy-placeholder{opacity:0;pointer-events:none}.lazy-blur{position:absolute;inset:0;filter:blur(20px);transform:scale(1.1);transition:opacity 0.5s ease}.lazy-image.loaded ~ .lazy-blur{opacity:0}/* ============================================== SOCIAL PROOF COUNTERS ============================================== */ .social-proof-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);background:var(--color-bg-alt);border-radius:var(--radius-xl);margin:var(--space-6) 0}.proof-item{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:0.9rem}.proof-item svg{width:18px;height:18px;color:var(--color-accent)}.proof-number{font-weight:700;color:var(--color-text);font-size:1.1rem}.proof-number[data-animate]{transition:all 0.3s}.live-readers{display:flex;align-items:center;gap:var(--space-2)}.live-dot{width:8px;height:8px;background:#22c55e;border-radius:var(--radius-full);animation:pulse-live 2s ease-in-out infinite}@keyframes pulse-live{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}/* ============================================== BOOKMARKS PAGE ============================================== */ .bookmarks-page{padding:var(--space-16) 0;min-height:calc(100vh - var(--navbar-height))}.bookmarks-header{text-align:center;margin-bottom:var(--space-10)}.bookmarks-title{font-size:2rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}.bookmarks-subtitle{color:var(--color-text-muted);font-size:1.1rem}.bookmarks-empty{text-align:center;padding:var(--space-16)}.bookmarks-empty-icon{font-size:4rem;margin-bottom:var(--space-4)}.bookmarks-empty h3{font-size:1.5rem;color:var(--color-text);margin-bottom:var(--space-2)}.bookmarks-empty p{color:var(--color-text-muted);margin-bottom:var(--space-6)}/* ============================================== POST SERIES / COLLECTIONS ============================================== */ .series-banner{background:linear-gradient(135deg, var(--color-accent-subtle) 0%, var(--color-bg-alt) 100%);border:1px solid var(--color-accent);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-6)}.series-label{display:flex;align-items:center;gap:var(--space-2);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-accent);margin-bottom:var(--space-2)}.series-label svg{width:14px;height:14px}.series-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-1)}.series-progress{display:flex;align-items:center;gap:var(--space-3);font-size:0.85rem;color:var(--color-text-muted)}.series-progress-bar{flex:1;height:6px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.series-progress-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width 0.3s}.series-nav{display:flex;gap:var(--space-3);margin-top:var(--space-3)}.series-nav-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:0.85rem;font-weight:500;text-decoration:none;transition:all 0.2s}.series-nav-btn:hover{background:var(--color-accent);border-color:var(--color-accent);color:white}.series-nav-btn svg{width:16px;height:16px}.series-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.series-card-header{padding:var(--space-4);background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);color:white}.series-card-title{font-size:1rem;font-weight:700;margin-bottom:var(--space-1)}.series-card-count{font-size:0.85rem;opacity:0.9}.series-card-list{list-style:none;padding:0;margin:0}.series-card-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);text-decoration:none;font-size:0.9rem;transition:all 0.2s}.series-card-item:last-child{border-bottom:none}.series-card-item:hover{background:var(--color-bg-alt);color:var(--color-accent)}.series-card-item.current{background:var(--color-accent-subtle);color:var(--color-accent);font-weight:600}.series-card-num{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-full);font-size:0.75rem;font-weight:600;flex-shrink:0}.series-card-item.current .series-card-num{background:var(--color-accent);color:white}.series-card-item.completed .series-card-num{background:var(--color-success);color:white}/* ============================================== EARNINGS CALCULATOR ============================================== */ .calculator-tool{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);overflow:hidden;max-width:600px;margin:0 auto}.calculator-header{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);padding:var(--space-8);text-align:center;color:white}.calculator-header h2{font-size:1.75rem;font-weight:700;margin-bottom:var(--space-2)}.calculator-header p{opacity:0.9;font-size:1rem}.calculator-body{padding:var(--space-6)}.calc-input-group{margin-bottom:var(--space-5)}.calc-input-group label{display:block;font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.calc-input-group small{display:block;color:var(--color-text-muted);font-size:0.8rem;margin-top:var(--space-1)}.calc-input{width:100%;padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;background:var(--color-bg-input);color:var(--color-text);transition:border-color 0.2s}.calc-input:focus{border-color:var(--color-accent);outline:none}.calc-select{width:100%;padding:var(--space-4);border:2px solid var(--color-border);border-radius:var(--radius-lg);font-size:1rem;background:var(--color-bg-input);color:var(--color-text);cursor:pointer}.calc-results{background:var(--color-bg-alt);border-radius:var(--radius-xl);padding:var(--space-6);margin-top:var(--space-6)}.calc-results-title{font-size:0.9rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-4);text-align:center}.calc-results-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}.calc-result-item{text-align:center;padding:var(--space-4);background:var(--color-bg-card);border-radius:var(--radius-lg)}.calc-result-value{font-size:1.5rem;font-weight:700;color:var(--color-accent);margin-bottom:var(--space-1)}.calc-result-label{font-size:0.85rem;color:var(--color-text-muted)}.calc-disclaimer{font-size:0.75rem;color:var(--color-text-dim);text-align:center;margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}/* ============================================== AUTHOR STATS WIDGET ============================================== */ .author-stats-widget{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5)}.author-stats-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.author-stats-avatar{width:48px;height:48px;border-radius:var(--radius-full);object-fit:cover}.author-stats-name{font-weight:600;color:var(--color-text)}.author-stats-username{font-size:0.85rem;color:var(--color-text-muted)}.author-stats-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-3);text-align:center}.author-stat{padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg)}.author-stat-value{font-size:1.25rem;font-weight:700;color:var(--color-text)}.author-stat-label{font-size:0.75rem;color:var(--color-text-muted)}/* ============================================== TOP AUTHORS WIDGET ============================================== */ .top-authors-list{display:flex;flex-direction:column;gap:var(--space-3)}.top-author-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg);text-decoration:none;transition:all 0.2s}.top-author-item:hover{background:var(--color-accent-subtle)}.top-author-rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-full);font-size:0.75rem;font-weight:700;color:var(--color-text-muted)}.top-author-item:nth-child(1) .top-author-rank{background:linear-gradient(135deg, #fbbf24, #f59e0b);color:white}.top-author-item:nth-child(2) .top-author-rank{background:linear-gradient(135deg, #9ca3af, #6b7280);color:white}.top-author-item:nth-child(3) .top-author-rank{background:linear-gradient(135deg, #d97706, #b45309);color:white}.top-author-avatar{width:36px;height:36px;border-radius:var(--radius-full);object-fit:cover}.top-author-info{flex:1;min-width:0}.top-author-name{font-weight:600;color:var(--color-text);font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-author-posts{font-size:0.8rem;color:var(--color-text-muted)}/* ============================================== MOBILE OPTIMIZATIONS - Additional ============================================== */ @media (max-width:768px){.social-proof-bar{flex-wrap:wrap;gap:var(--space-4)}.calc-results-grid{grid-template-columns:1fr}.series-nav{flex-direction:column}.author-stats-grid{grid-template-columns:repeat(3, 1fr)}.toc-list li a{font-size:0.9rem;padding:var(--space-2)}}/* ============================================== DASHBOARD ANALYTICS ============================================== */ .dashboard-analytics{margin-bottom:var(--space-8)}.analytics-grid{display:flex;flex-direction:column;gap:var(--space-6)}.dashboard-analytics{display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-6)}.analytics-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5)}.analytics-chart-card{width:100%}.analytics-posts-card{width:100%}.top-posts-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3)}@media (min-width:768px){.top-posts-grid{grid-template-columns:repeat(2, 1fr)}}@media (min-width:1024px){.top-posts-grid{grid-template-columns:repeat(3, 1fr)}}.analytics-title{display:flex;align-items:center;gap:var(--space-2);font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-4)}.analytics-title svg{color:var(--color-accent)}.chart-container{height:200px;position:relative}.top-posts-list{display:flex;flex-direction:column;gap:10px}.top-post-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:14px;text-decoration:none;transition:all 0.25s ease;position:relative;overflow:hidden}.top-post-item::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:var(--color-border);transition:all 0.25s ease}.top-post-item:hover{background:var(--color-bg-elevated);border-color:var(--color-accent);transform:translateX(6px);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.top-post-item:hover::before{background:var(--color-accent);width:5px}.top-post-rank{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-alt);border-radius:10px;font-size:0.85rem;font-weight:800;color:var(--color-text-muted);flex-shrink:0;transition:all 0.25s ease}.top-post-item:nth-child(1) .top-post-rank{background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);color:#ffffff;box-shadow:0 4px 12px rgba(251, 191, 36, 0.4)}.top-post-item:nth-child(1)::before{background:linear-gradient(180deg, #fbbf24, #f59e0b)}.top-post-item:nth-child(2) .top-post-rank{background:linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);color:#ffffff;box-shadow:0 4px 12px rgba(156, 163, 175, 0.4)}.top-post-item:nth-child(2)::before{background:linear-gradient(180deg, #d1d5db, #9ca3af)}.top-post-item:nth-child(3) .top-post-rank{background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color:#ffffff;box-shadow:0 4px 12px rgba(217, 119, 6, 0.4)}.top-post-item:nth-child(3)::before{background:linear-gradient(180deg, #f59e0b, #d97706)}.top-post-info{flex:1;min-width:0}.top-post-title{display:block;font-size:0.95rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;transition:color 0.2s}.top-post-item:hover .top-post-title{color:var(--color-accent)}.top-post-stats{display:flex;align-items:center;gap:12px;font-size:0.8rem;color:var(--color-text-muted)}.top-post-stats span{display:flex;align-items:center;gap:4px}.top-post-stats svg{width:14px;height:14px;opacity:0.7}/* ============================================== ADMIN ANALYTICS ENHANCEMENTS ============================================== */ .admin-analytics-row{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6)}@media (max-width:1024px){.admin-analytics-row{grid-template-columns:1fr}}.admin-chart-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5)}.admin-chart-card.small{max-height:350px;overflow-y:auto}.admin-card-title{display:flex;align-items:center;gap:var(--space-2);font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 var(--space-4) 0}.admin-card-title svg{color:var(--color-accent)}.chart-wrapper{height:250px;position:relative}.top-items-list{display:flex;flex-direction:column;gap:var(--space-2)}.top-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-bg-alt);border-radius:var(--radius-lg);text-decoration:none;transition:all 0.2s}.top-item:hover{background:var(--color-accent-subtle)}.top-item-rank{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-full);font-size:0.75rem;font-weight:700;color:var(--color-text-muted)}.top-item-rank.top-1{background:linear-gradient(135deg, #fbbf24, #f59e0b);color:white}.top-item-rank.top-2{background:linear-gradient(135deg, #9ca3af, #6b7280);color:white}.top-item-rank.top-3{background:linear-gradient(135deg, #d97706, #b45309);color:white}.top-item-title{flex:1;font-size:0.9rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-item-stat{font-size:0.8rem;color:var(--color-text-muted)}.top-authors-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:var(--space-4)}@media (max-width:1024px){.top-authors-grid{grid-template-columns:repeat(3, 1fr)}}@media (max-width:640px){.top-authors-grid{grid-template-columns:repeat(2, 1fr)}}.top-author-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-xl);text-align:center;position:relative}.author-rank{position:absolute;top:var(--space-2);left:var(--space-2);font-size:0.7rem;font-weight:700;color:var(--color-text-muted)}.author-rank.rank-1{color:#f59e0b}.author-rank.rank-2{color:#9ca3af}.author-rank.rank-3{color:#d97706}.author-avatar-md{width:56px;height:56px;border-radius:var(--radius-full);object-fit:cover;margin-bottom:var(--space-2)}.author-avatar-md.placeholder{display:flex;align-items:center;justify-content:center;background:var(--color-accent-subtle);color:var(--color-accent);font-size:1.25rem;font-weight:700}.top-author-card .author-info{text-align:center}.top-author-card .author-info strong{display:block;font-size:0.9rem;color:var(--color-text);margin-bottom:2px}.top-author-card .author-info span{font-size:0.75rem;color:var(--color-text-muted)}/* ============================================== BACK TO TOP BUTTON ============================================== */ .back-to-top{position:fixed;bottom:var(--space-6);right:var(--space-6);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:white;border:none;border-radius:var(--radius-full);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease;z-index:1000;box-shadow:0 4px 12px var(--color-accent-glow)}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--color-accent-hover);transform:translateY(-4px);box-shadow:0 8px 20px var(--color-accent-glow)}.back-to-top:active{transform:translateY(-2px)}@media (max-width:768px){.back-to-top{width:44px;height:44px;bottom:var(--space-4);right:var(--space-4)}}/* ============================================== ANIMATED NUMBER COUNTERS ============================================== */ .count-up{display:inline-block}@keyframes count-pulse{0%, 100%{transform:scale(1)}50%{transform:scale(1.1)}}.count-up.counting{animation:count-pulse 0.3s ease-out}/* ============================================== IMAGE SKELETON LOADING ============================================== */ .skeleton{background:linear-gradient( 90deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 50%, var(--color-bg-elevated) 100% );background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-text{height:1em;margin-bottom:0.5em}.skeleton-text:last-child{width:60%}.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-full)}.skeleton-image{width:100%;padding-top:56.25%}/* ============================================== SMOOTH IMAGE LOAD ============================================== */ .img-loading{opacity:0;transition:opacity 0.3s ease}.img-loaded{opacity:1}/* ============================================== ENHANCED TOOLTIPS ============================================== */ [data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-4px);padding:6px 12px;background:var(--color-bg-elevated);color:var(--color-text);font-size:0.8rem;font-weight:500;white-space:nowrap;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all 0.2s ease;z-index:100;pointer-events:none}[data-tooltip]:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-8px)}/* ============================================== PULSE ANIMATION FOR NOTIFICATIONS ============================================== */ .pulse-dot{position:relative}.pulse-dot::after{content:'';position:absolute;top:0;right:0;width:8px;height:8px;background:var(--color-error);border-radius:var(--radius-full);animation:pulse-notification 2s ease-in-out infinite}@keyframes pulse-notification{0%, 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239, 68, 68, 0.4)}50%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(239, 68, 68, 0)}}/* ============================================== GLASSMORPHISM CARDS ============================================== */ .glass-card{background:rgba(255, 255, 255, 0.05);backdrop-filter:blur(10px);border:1px solid rgba(255, 255, 255, 0.1);border-radius:var(--radius-xl)}[data-theme="light"] .glass-card{background:rgba(255, 255, 255, 0.7);border-color:rgba(0, 0, 0, 0.1)}/* ============================================== KEYBOARD SHORTCUTS HINT ============================================== */ .kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 6px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.75rem;font-weight:500;color:var(--color-text-muted);box-shadow:0 2px 0 var(--color-border)}/* ============================================== CONTENT HIGHLIGHT ON SCROLL ============================================== */ .highlight-on-scroll{transition:background 0.5s ease}.highlight-on-scroll.highlighted{background:var(--color-accent-subtle);border-radius:var(--radius-md)}/* ============================================== STATS CARDS ============================================== */ .stats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-4)}.stat-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);text-align:center;transition:all 0.3s ease}.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-accent)}.stat-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-subtle);color:var(--color-accent);border-radius:var(--radius-lg);margin:0 auto var(--space-3);font-size:1.5rem}.stat-value{font-size:2rem;font-weight:800;color:var(--color-text);line-height:1;margin-bottom:var(--space-1)}.stat-label{font-size:0.85rem;color:var(--color-text-muted)}@media (max-width:1024px){.stats-grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:640px){.stats-grid{grid-template-columns:1fr}}/* ============================================== TABLE OF CONTENTS ============================================== */ .toc-wrapper{padding:var(--space-4) 0}.toc-box{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden}.toc-toggle{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:none;border:none;color:var(--color-text);font-size:0.95rem;font-weight:600;cursor:pointer;transition:background 0.2s}.toc-toggle:hover{background:var(--color-bg-alt)}.toc-toggle svg:first-child{color:var(--color-accent)}.toc-chevron{margin-left:auto;transition:transform 0.3s}.toc-box.expanded .toc-chevron{transform:rotate(180deg)}.toc-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}.toc-box.expanded .toc-content{max-height:500px}.toc-list{list-style:none;padding:0 var(--space-5) var(--space-4);margin:0;counter-reset:toc-counter}.toc-item{counter-increment:toc-counter}.toc-item a{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;color:var(--color-text-secondary);font-size:0.9rem;text-decoration:none;border-bottom:1px solid var(--color-border-light);transition:all 0.2s}.toc-item a::before{content:counter(toc-counter) ".";color:var(--color-accent);font-weight:600;min-width:24px}.toc-item a:hover{color:var(--color-accent);padding-left:var(--space-2)}.toc-item:last-child a{border-bottom:none}.toc-h3 a{padding-left:var(--space-6);font-size:0.85rem}.toc-h3 a::before{content:"•";min-width:16px}/* ============================================== LAZY LOAD BLUR PLACEHOLDERS ============================================== */ .lazy-image{position:relative;overflow:hidden;background:var(--color-bg-elevated)}.lazy-image img{transition:opacity 0.4s ease, filter 0.4s ease}.lazy-image img.loading{filter:blur(20px);opacity:0.6}.lazy-image img.loaded{filter:blur(0);opacity:1}.lazy-image::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%);animation:shimmer 1.5s infinite;z-index:1;opacity:0;transition:opacity 0.3s}.lazy-image.loading::before{opacity:1}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}img.lazy-img{transition:filter 0.4s ease, opacity 0.4s ease}img.lazy-img.loading{filter:blur(15px);opacity:0.7}img.lazy-img.loaded{filter:blur(0);opacity:1}/* ============================================== DARK/LIGHT THEME TOGGLE ANIMATION ============================================== */ .theme-toggle{position:relative;width:44px;height:44px;border-radius:var(--radius-full);background:var(--color-bg-elevated);border:1px solid var(--color-border);cursor:pointer;overflow:hidden;transition:all 0.3s}.theme-toggle:hover{background:var(--color-accent-subtle);border-color:var(--color-accent)}.theme-toggle-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transition:all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)}.theme-toggle .sun-icon{opacity:0;transform:translate(-50%, -50%) rotate(-90deg) scale(0)}.theme-toggle .moon-icon{opacity:1;transform:translate(-50%, -50%) rotate(0deg) scale(1)}[data-theme="light"] .theme-toggle .sun-icon{opacity:1;transform:translate(-50%, -50%) rotate(0deg) scale(1)}[data-theme="light"] .theme-toggle .moon-icon{opacity:0;transform:translate(-50%, -50%) rotate(90deg) scale(0)}.theme-toggle svg{width:20px;height:20px;color:var(--color-text)}/* ============================================== SOCIAL PROOF COUNTERS ============================================== */ .social-proof-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-4) var(--space-6);background:var(--color-bg-alt);border-radius:var(--radius-lg);margin:var(--space-6) 0}.proof-item{display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:0.9rem}.proof-item svg{width:18px;height:18px;color:var(--color-accent)}.proof-count{font-weight:700;color:var(--color-text)}.proof-count.animate{animation:countUp 1s ease-out}@keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.floating-proof{position:fixed;bottom:var(--space-6);left:var(--space-6);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);z-index:100;transform:translateY(100px);opacity:0;transition:all 0.4s var(--ease-out)}.floating-proof.visible{transform:translateY(0);opacity:1}.floating-proof-avatar{width:32px;height:32px;border-radius:var(--radius-full);border:2px solid var(--color-accent)}.floating-proof-text{font-size:0.85rem;color:var(--color-text-secondary)}.floating-proof-text strong{color:var(--color-text)}@media (max-width:768px){.floating-proof{left:var(--space-4);right:var(--space-4);bottom:var(--space-4)}}/* ============================================== BOOKMARKS PAGE ============================================== */ .bookmarks-header{text-align:center;padding:var(--space-12) 0 var(--space-8)}.bookmarks-title{font-size:2rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-2)}.bookmarks-count{color:var(--color-text-muted)}.bookmarks-empty{text-align:center;padding:var(--space-16) var(--space-6)}.bookmarks-empty-icon{font-size:4rem;margin-bottom:var(--space-4)}.bookmarks-empty h3{font-size:1.25rem;color:var(--color-text);margin-bottom:var(--space-2)}.bookmarks-empty p{color:var(--color-text-muted);margin-bottom:var(--space-6)}/* ============================================== POST SERIES / COLLECTIONS ============================================== */ .series-banner{background:linear-gradient(135deg, var(--color-accent-subtle) 0%, var(--color-bg-alt) 100%);border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-6) 0}.series-label{display:flex;align-items:center;gap:var(--space-2);font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-accent);margin-bottom:var(--space-2)}.series-label svg{width:14px;height:14px}.series-title{font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}.series-progress{display:flex;align-items:center;gap:var(--space-3);font-size:0.85rem;color:var(--color-text-muted)}.series-progress-bar{flex:1;height:4px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.series-progress-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width 0.3s ease}.series-nav{display:flex;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.series-nav-btn{flex:1;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:0.85rem;text-decoration:none;transition:all 0.2s}.series-nav-btn:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.series-nav-btn.next{justify-content:flex-end}.series-nav-btn svg{width:16px;height:16px}/* ============================================== EARNINGS CALCULATOR TOOL ============================================== */ .calculator-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);overflow:hidden;max-width:600px;margin:0 auto}.calculator-header{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);padding:var(--space-6);text-align:center;color:white}.calculator-header h2{font-size:1.5rem;margin-bottom:var(--space-2)}.calculator-header p{opacity:0.9;font-size:0.95rem}.calculator-body{padding:var(--space-6)}.calc-input-group{margin-bottom:var(--space-5)}.calc-input-group label{display:block;font-weight:600;color:var(--color-text);margin-bottom:var(--space-2)}.calc-input-group small{display:block;color:var(--color-text-muted);font-size:0.8rem;margin-top:var(--space-1)}.calc-slider{width:100%;height:8px;border-radius:4px;background:var(--color-bg-elevated);outline:none;-webkit-appearance:none;margin:var(--space-3) 0}.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-accent);cursor:pointer;box-shadow:0 2px 8px var(--color-accent-glow)}.calc-value-display{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;color:var(--color-text)}.calculator-result{background:var(--color-bg-alt);border-radius:var(--radius-xl);padding:var(--space-6);text-align:center;margin-top:var(--space-6)}.result-label{font-size:0.9rem;color:var(--color-text-muted);margin-bottom:var(--space-2)}.result-value{font-size:2.5rem;font-weight:800;color:var(--color-accent);font-family:var(--font-display)}.result-range{font-size:0.85rem;color:var(--color-text-muted);margin-top:var(--space-2)}.calc-breakdown{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.breakdown-item{display:flex;justify-content:space-between;padding:var(--space-2) 0;font-size:0.9rem;color:var(--color-text-secondary)}.breakdown-item span:last-child{font-weight:600;color:var(--color-text)}/* ============================================== VIEW COUNT ANIMATION ============================================== */ .view-counter{display:inline-flex;align-items:center;gap:var(--space-1)}.view-counter-number{font-variant-numeric:tabular-nums}.view-counter-number.counting{animation:countPulse 0.3s ease}@keyframes countPulse{0%, 100%{transform:scale(1)}50%{transform:scale(1.1)}}/* ============================================== TELEGRAM SHARE BUTTON ============================================== */ .share-option[data-platform="telegram"] svg{fill:#0088cc}.share-option[data-platform="telegram"]:hover{background:rgba(0, 136, 204, 0.1)}/* ============================================== HERO SLIDER NAVIGATION - Inside Card ============================================== */ .hero-slider-nav-inside{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);background:linear-gradient(transparent, rgba(0,0,0,0.7));border-radius:0 0 var(--radius-xl) var(--radius-xl);z-index:10}.hero-nav-btn-inside{width:36px;height:36px;border-radius:var(--radius-full);background:rgba(255,255,255,0.2);border:none;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;backdrop-filter:blur(4px)}.hero-nav-btn-inside:hover{background:rgba(255,255,255,0.4);transform:scale(1.1)}.hero-slider-dots-inside{display:flex;gap:8px}.hero-dot-inside{width:8px;height:8px;border-radius:var(--radius-full);background:rgba(255,255,255,0.4);border:none;cursor:pointer;transition:all 0.2s;padding:0}.hero-dot-inside.active{background:white;width:24px}.hero-dot-inside:hover:not(.active){background:rgba(255,255,255,0.7)}.hero-post-image .hero-post-category{position:absolute;top:var(--space-3);left:var(--space-3);padding:6px 12px;background:var(--color-accent);color:white;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;border-radius:var(--radius-full);z-index:5}/* ============================================== RELATED POSTS SECTION ============================================== */ .related-posts-section{padding:var(--space-12) 0;background:var(--color-bg-alt);border-top:1px solid var(--color-border)}.related-posts-title{display:flex;align-items:center;gap:var(--space-3);font-size:1.5rem;font-weight:700;margin-bottom:var(--space-6)}.related-posts-title svg{color:var(--color-accent)}.related-posts-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-5)}@media (max-width:768px){.related-posts-grid{grid-template-columns:1fr}}.related-post-card{display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--color-bg-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);transition:all 0.3s;text-decoration:none;color:inherit}.related-post-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.related-post-image{width:100px;height:80px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden}.related-post-image img{width:100%;height:100%;object-fit:cover}.related-post-content{flex:1;min-width:0}.related-post-category{display:inline-block;font-size:0.7rem;font-weight:600;text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-1)}.related-post-title{font-size:0.95rem;font-weight:600;line-height:1.4;margin-bottom:var(--space-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.related-post-meta{font-size:0.8rem;color:var(--color-text-muted);display:flex;gap:var(--space-2)}/* ============================================== SHARE DROPDOWN PANEL - Enhanced ============================================== */ .share-dropdown-panel{display:none;margin-top:var(--space-4);padding:var(--space-4);background:var(--color-bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--color-border);animation:slideDown 0.2s ease}.share-dropdown-panel.active{display:block}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.share-dropdown-grid{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}.share-btn-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-3);min-width:80px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);text-decoration:none;font-size:0.75rem;transition:all 0.2s;cursor:pointer}.share-btn-item:hover{border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px)}/* ============================================== SUPPORT BUTTON ============================================== */ .btn-support{background:linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);color:white;border:none}.btn-support:hover{background:linear-gradient(135deg, #e11d48 0%, #db2777 100%);box-shadow:0 8px 20px rgba(244, 63, 94, 0.3);transform:translateY(-2px)}/* ============================================== COPY CODE BUTTON - Enhanced ============================================== */ .code-block-wrapper{position:relative;margin:var(--space-4) 0}.copy-code-btn{position:absolute;top:var(--space-2);right:var(--space-2);display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);color:rgba(255,255,255,0.7);font-size:0.75rem;font-weight:500;cursor:pointer;transition:all 0.2s;backdrop-filter:blur(4px)}.copy-code-btn svg{width:14px;height:14px}.copy-code-btn:hover{background:rgba(255,255,255,0.2);color:white}.copy-code-btn.copied{background:var(--color-success);border-color:var(--color-success);color:white}/* ============================================== ENHANCED PROFILE PAGE ============================================== */ .profile-section{padding:var(--space-8) 0 var(--space-16)}.profile-header-enhanced{position:relative;margin-bottom:var(--space-8)}.profile-cover-enhanced{height:200px;background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);border-radius:var(--radius-xl);overflow:hidden;position:relative}.profile-cover-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(255,255,255,0.15) 1px, transparent 1px);background-size:30px 30px}.profile-main-info{display:flex;align-items:flex-start;gap:var(--space-6);margin-top:-60px;padding:0 var(--space-6)}@media (max-width:768px){.profile-main-info{flex-direction:column;align-items:center;text-align:center;margin-top:-50px;padding:0}}.profile-avatar-container{position:relative;flex-shrink:0}.profile-avatar-xl{width:120px;height:120px;border-radius:var(--radius-full);border:4px solid var(--color-bg);object-fit:cover;box-shadow:var(--shadow-lg)}.profile-avatar-xl.profile-avatar-placeholder{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700}.profile-verified-badge{position:absolute;bottom:4px;right:4px;width:28px;height:28px;background:var(--color-accent);color:white;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;border:3px solid var(--color-bg)}.profile-text-info{flex:1;padding-top:70px}@media (max-width:768px){.profile-text-info{padding-top:var(--space-4)}}.profile-name-lg{font-size:2rem;font-weight:800;margin-bottom:var(--space-1)}.profile-username-lg{font-size:1rem;color:var(--color-text-muted);margin-bottom:var(--space-3)}.profile-bio-lg{font-size:1rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-4);max-width:500px}.profile-meta-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}@media (max-width:768px){.profile-meta-row{justify-content:center}}.profile-meta-item-lg{display:flex;align-items:center;gap:var(--space-2);font-size:0.9rem;color:var(--color-text-muted)}.profile-role-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:4px 12px;background:var(--color-accent-subtle);color:var(--color-accent);font-size:0.8rem;font-weight:600;border-radius:var(--radius-full)}.profile-actions-enhanced{padding-top:70px;display:flex;gap:var(--space-3)}@media (max-width:768px){.profile-actions-enhanced{padding-top:0;margin-top:var(--space-4)}}.profile-stats-enhanced{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-4);margin-bottom:var(--space-8)}.profile-stat-card{padding:var(--space-5);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;transition:all 0.3s}.profile-stat-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}.profile-stat-icon{width:48px;height:48px;margin:0 auto var(--space-3);background:var(--color-accent-subtle);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-accent)}.profile-stat-value{font-size:1.75rem;font-weight:800;margin-bottom:var(--space-1)}.profile-stat-label{font-size:0.85rem;color:var(--color-text-muted)}.profile-content-enhanced{margin-top:var(--space-8)}.profile-section-header{margin-bottom:var(--space-6)}.profile-section-title-lg{display:flex;align-items:center;gap:var(--space-3);font-size:1.5rem;font-weight:700}.profile-section-title-lg svg{color:var(--color-accent)}.profile-posts-grid-enhanced{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-6)}@media (max-width:1024px){.profile-posts-grid-enhanced{grid-template-columns:repeat(2, 1fr)}}@media (max-width:640px){.profile-posts-grid-enhanced{grid-template-columns:1fr}}.empty-state-enhanced{padding:var(--space-12) var(--space-6);text-align:center;background:var(--color-bg-alt);border-radius:var(--radius-xl);border:2px dashed var(--color-border)}.empty-state-icon-lg{font-size:4rem;margin-bottom:var(--space-4)}.empty-state-enhanced h3{font-size:1.5rem;font-weight:700;margin-bottom:var(--space-2)}.empty-state-enhanced p{color:var(--color-text-muted);margin-bottom:var(--space-6);max-width:400px;margin-left:auto;margin-right:auto}/* ============================================== AUTHOR CARD ENHANCED ============================================== */ .author-card-section{padding:var(--space-8) 0;border-top:1px solid var(--color-border)}.author-card-enhanced{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-6);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl)}@media (max-width:768px){.author-card-enhanced{flex-direction:column;text-align:center}}.author-card-left{flex-shrink:0}.author-avatar-lg{width:80px;height:80px;border-radius:var(--radius-full);object-fit:cover;border:3px solid var(--color-border)}.author-avatar-lg.author-avatar-placeholder{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700}.author-card-center{flex:1;min-width:0}.written-by{font-size:0.8rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.05em}.author-card-name{font-size:1.25rem;font-weight:700;margin:var(--space-1) 0}.author-card-name a{color:var(--color-text);text-decoration:none}.author-card-name a:hover{color:var(--color-accent)}.author-card-bio{font-size:0.9rem;color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-3)}.author-card-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}@media (max-width:768px){.author-card-actions{justify-content:center}}.action-btn-inline{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.2s}.action-btn-inline:hover{border-color:var(--color-accent);color:var(--color-accent)}.action-btn-inline.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.action-btn-inline.active svg{fill:currentColor}.author-card-right{display:flex;flex-direction:column;gap:var(--space-2)}@media (max-width:768px){.author-card-right{flex-direction:row;width:100%;justify-content:center}}/* ============================================== SETTINGS ENHANCEMENTS ============================================== */ .settings-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-4)}@media (max-width:640px){.settings-grid{grid-template-columns:1fr}}.settings-card-title{display:flex;align-items:center;gap:var(--space-2)}.settings-card-title svg{color:var(--color-accent)}.input-with-icon-left{position:relative}.input-with-icon-left svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}.input-with-icon-left .form-input{padding-left:42px}.upload-url-section{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.upload-url-section .form-input{flex:1;font-size:0.85rem}.form-input-sm{padding:var(--space-2) var(--space-3);font-size:0.85rem}.upload-buttons{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}/* ============================================ MODAL STYLES (for admin and general use) ============================================ */ .modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:var(--space-4)}.modal.active{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.6);backdrop-filter:blur(4px)}.modal-content{position:relative;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);animation:modalSlideIn 0.3s ease}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-content h3{font-size:1.25rem;font-weight:700;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}.modal .form-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}/* ============================================ MOBILE HOMEPAGE LEFT ALIGNMENT ============================================ */ @media (max-width:768px){.section-header-row{flex-direction:column;align-items:flex-start !important;gap:var(--space-2);text-align:left}.section-title{text-align:left}.trending-section{text-align:left}.trending-header{flex-direction:column;align-items:flex-start !important;gap:var(--space-2)}.trending-title{text-align:left}.home-trending-tags{justify-content:flex-start}.articles-grid{justify-items:start}.article-card-v2{text-align:left}.card-body{text-align:left}.card-title{text-align:left}.card-excerpt{text-align:left}.stats-row{justify-content:flex-start}}/* ============================================ PROGRESS BAR FIX - Use accent color instead of gold ============================================ */ .reading-progress, .page-progress{background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 50%, var(--color-accent) 100% ) !important;background-size:200% 100%}[data-theme="light"] .reading-progress, [data-theme="light"] .page-progress{background:linear-gradient(90deg, #2563EB 0%, #3B82F6 50%, #2563EB 100% ) !important;box-shadow:0 0 10px rgba(37, 99, 235, 0.3)}/* ============================================ COMPREHENSIVE MOBILE FIXES ============================================ */ html, body{overflow-x:hidden;max-width:100vw}@media (max-width:768px){.container{padding-left:var(--space-4);padding-right:var(--space-4)}img, video, iframe, embed, object{max-width:100%;height:auto}pre, code{max-width:100%;overflow-x:auto;word-wrap:break-word}table{display:block;max-width:100%;overflow-x:auto}}/* ============================================ NAVBAR MOBILE FIXES ============================================ */ @media (max-width:768px){.navbar .container{padding-left:var(--space-3);padding-right:var(--space-3)}.navbar-brand{font-size:1.2rem}.brand-hash{font-size:1.5rem}.navbar-actions{gap:var(--space-2)}.navbar-actions .btn{padding:var(--space-2) var(--space-3);font-size:0.8rem}.navbar-toggle{display:flex !important}.navbar-menu{display:none !important}}.mobile-menu{overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-link{min-height:48px;display:flex;align-items:center}/* ============================================ HERO MOBILE FIXES ============================================ */ @media (max-width:640px){.hero{padding:4rem 0 2rem;min-height:auto}.hero-title{font-size:1.5rem;line-height:1.2}.hero-subtitle{font-size:0.85rem;line-height:1.5}.hero-actions{flex-direction:column;width:100%}.hero-actions .btn{width:100%;justify-content:center}.hero-slider-container{margin-top:var(--space-4)}.hero-post-slider{min-height:280px}.hero-post-title{font-size:0.95rem;-webkit-line-clamp:2}.hero-post-excerpt{display:none}}/* ============================================ ARTICLE CARDS MOBILE FIXES ============================================ */ @media (max-width:768px){.articles-grid{grid-template-columns:1fr;gap:var(--space-4)}.article-card-v2{flex-direction:column}.card-image-wrapper{width:100%;height:180px}.card-body{padding:var(--space-4)}.card-title{font-size:1rem;line-height:1.3}.card-excerpt{font-size:0.85rem;-webkit-line-clamp:2}.card-footer{flex-wrap:wrap;gap:var(--space-2)}.card-stats{width:100%;justify-content:flex-start}}/* ============================================ FORMS MOBILE FIXES ============================================ */ @media (max-width:768px){.form-row{grid-template-columns:1fr;gap:var(--space-3)}.form-input, .form-textarea, .form-select{font-size:16px;padding:var(--space-3)}.btn{min-height:44px;padding:var(--space-3) var(--space-4)}.btn-block{width:100%}.btn-lg{padding:var(--space-3) var(--space-5);font-size:0.95rem}}/* ============================================ AUTH PAGES MOBILE FIXES ============================================ */ @media (max-width:640px){.auth-container{padding:var(--space-4)}.auth-card{padding:var(--space-5);margin:var(--space-4) 0;border-radius:var(--radius-lg)}.auth-title{font-size:1.5rem}.auth-logo-icon{width:60px;height:60px}.brand-hash-large{font-size:2rem}.social-login-btn{padding:var(--space-3);font-size:0.9rem}}/* ============================================ DASHBOARD MOBILE FIXES ============================================ */ @media (max-width:768px){.dashboard-header{flex-direction:column;text-align:center;gap:var(--space-4)}.dashboard-avatar{margin:0 auto}.dashboard-stats{grid-template-columns:repeat(2, 1fr);gap:var(--space-3)}.stat-card{padding:var(--space-4)}.stat-value{font-size:1.5rem}.settings-card{padding:var(--space-4)}.avatar-upload-section{flex-direction:column;align-items:center;text-align:center}}@media (max-width:480px){.dashboard-stats{grid-template-columns:1fr}}/* ============================================ POST/ARTICLE PAGE MOBILE FIXES ============================================ */ @media (max-width:768px){.post-header{padding:var(--space-6) 0}.post-title{font-size:1.5rem;line-height:1.25}.post-meta{flex-wrap:wrap;gap:var(--space-2)}.post-content{font-size:1rem;line-height:1.7}.post-content h2{font-size:1.25rem}.post-content h3{font-size:1.1rem}.post-content img{border-radius:var(--radius-md)}.post-content blockquote{padding:var(--space-3);margin:var(--space-4) 0}.post-tags{flex-wrap:wrap;gap:var(--space-2)}.author-card{flex-direction:column;text-align:center;gap:var(--space-3)}.author-avatar{margin:0 auto}.comments-section{padding:var(--space-4) 0}.comment-form textarea{min-height:100px}}/* ============================================ TOOLS PAGE MOBILE FIXES ============================================ */ @media (max-width:768px){.tools-header{padding:0 var(--space-2)}.tools-title{font-size:1.75rem}.tools-list{grid-template-columns:1fr}.tool-card{padding:var(--space-4)}.tool-icon{width:48px;height:48px}.tool-name{font-size:1rem}}/* ============================================ CONTACT PAGE MOBILE FIXES ============================================ */ @media (max-width:768px){.contact-layout{grid-template-columns:1fr;gap:var(--space-6)}.contact-sidebar{position:static}.contact-title{font-size:1.5rem}.contact-info-cards{gap:var(--space-2)}.contact-card{padding:var(--space-4)}}/* ============================================ PROFILE PAGE MOBILE FIXES ============================================ */ @media (max-width:768px){.profile-header-enhanced{margin-bottom:var(--space-6)}.profile-cover-enhanced{height:150px}.profile-main-info{flex-direction:column;align-items:center;text-align:center;margin-top:-50px}.profile-avatar-xl{width:100px;height:100px}.profile-name-lg{font-size:1.5rem}.profile-stats-enhanced{grid-template-columns:repeat(3, 1fr);gap:var(--space-2)}.profile-stat-card{padding:var(--space-3)}.profile-stat-value{font-size:1.25rem}.profile-posts-grid-enhanced{grid-template-columns:1fr}}/* ============================================ TOPICS PAGE MOBILE FIXES ============================================ */ @media (max-width:768px){.topics-header{padding:var(--space-6) 0}.topics-title{font-size:1.75rem}.topics-grid{grid-template-columns:1fr}.tag-card{padding:var(--space-4)}.filters-bar{flex-direction:column;gap:var(--space-3)}.filters-bar .form-input{width:100%}}/* ============================================ TRENDING TAGS MOBILE FIXES ============================================ */ @media (max-width:768px){.trending-section{padding:var(--space-4) 0}.trending-header{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.home-trending-tags{gap:var(--space-2)}.home-trending-tag{padding:var(--space-2) var(--space-3);font-size:0.85rem}}/* ============================================ FOOTER MOBILE FIXES ============================================ */ @media (max-width:768px){.footer{padding:var(--space-8) 0 var(--space-4)}.footer-grid{grid-template-columns:1fr;gap:var(--space-6);text-align:left}.footer-brand{justify-content:flex-start}.footer-links{justify-content:flex-start}.footer-links ul{align-items:flex-start}.footer-social{justify-content:flex-start}.footer-bottom{flex-direction:column;gap:var(--space-3);text-align:left;align-items:flex-start}.footer-column, .footer-links h3, .footer-links h4, .footer-title{text-align:left}}/* ============================================ CTA SECTION MOBILE FIXES ============================================ */ @media (max-width:768px){.cta-section{padding:var(--space-8) var(--space-4)}.cta-title{font-size:1.5rem}.cta-text{font-size:0.95rem}.cta-actions{flex-direction:column;gap:var(--space-3)}.cta-actions .btn{width:100%;justify-content:center}}/* ============================================ SEARCH MODAL MOBILE FIXES ============================================ */ @media (max-width:768px){.search-modal-content{width:95%;max-height:80vh;margin:var(--space-4)}.search-input-wrapper input{font-size:16px}.search-results{max-height:50vh}}/* ============================================ CALCULATOR PAGES MOBILE FIXES ============================================ */ @media (max-width:768px){.calculator-container{padding:var(--space-4)}.calculator-grid{grid-template-columns:1fr}.result-card{padding:var(--space-4)}.result-value{font-size:1.75rem}}/* ============================================ UTILITY - TOUCH FRIENDLY ============================================ */ @media (max-width:768px){a, button, input[type="checkbox"], input[type="radio"], select{min-height:44px}a, button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0.1)}button{-webkit-user-select:none;user-select:none}}/* ============================================ FIX SPECIFIC OVERFLOW ISSUES ============================================ */ .post-content, .article-content, .card-excerpt, .message-body{word-wrap:break-word;overflow-wrap:break-word;hyphens:auto}.post-content a, .post-content code{word-break:break-all}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}/* ============================================ IMAGE LOADING OPTIMIZATION ============================================ */ img[loading="lazy"]{opacity:0;transition:opacity 0.3s ease-in-out}img[loading="lazy"].loaded, img[loading="lazy"]:not([src*="placeholder"]){opacity:1}.card-image-wrapper, .hero-post-image{background:linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%);position:relative;overflow:hidden}.card-image-wrapper::before, .hero-post-image::before{content:'';position:absolute;inset:0;background:linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% );transform:translateX(-100%);animation:shimmer 1.5s infinite;z-index:1;pointer-events:none}@keyframes shimmer{100%{transform:translateX(100%)}}.card-image-wrapper.loaded::before, .hero-post-image.loaded::before{display:none}.card-image, .hero-post-image img{object-fit:cover;width:100%;height:100%;transition:opacity 0.3s ease, transform 0.5s ease}.card-image.loading{filter:blur(10px);transform:scale(1.1)}.card-image.loaded{filter:blur(0);transform:scale(1)}.aspect-16-9{aspect-ratio:16 / 9}.aspect-4-3{aspect-ratio:4 / 3}.aspect-1-1{aspect-ratio:1 / 1}/* ============================================ SHARE BUTTONS ENHANCEMENT ============================================ */ .floating-share-btn{position:relative;overflow:hidden}.floating-share-btn::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity 0.2s}.floating-share-btn:hover::before{opacity:0.1}.floating-share-btn[data-platform="twitter"]:hover{color:#1DA1F2;border-color:#1DA1F2}.floating-share-btn[data-platform="facebook"]:hover{color:#4267B2;border-color:#4267B2}.floating-share-btn[data-platform="whatsapp"]:hover{color:#25D366;border-color:#25D366}.floating-share-btn[data-platform="linkedin"]:hover{color:#0A66C2;border-color:#0A66C2}.floating-share-btn[data-platform="instagram"]:hover{color:#E4405F;border-color:#E4405F}.floating-share-btn[data-platform="copy"]:hover{color:var(--color-accent);border-color:var(--color-accent)}.floating-share-btn[data-platform="copy"].copied{color:var(--color-success);border-color:var(--color-success)}.floating-share-btn[data-platform="copy"].copied svg{animation:checkmark 0.3s ease-out}@keyframes checkmark{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}.post-share-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-border)}.post-share-buttons .share-label{width:100%;font-size:0.9rem;font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-2)}.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:0.85rem;font-weight:500;color:var(--color-text-secondary);background:var(--color-bg-card);transition:all 0.2s ease}.share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.share-btn.twitter:hover{background:#1DA1F2;border-color:#1DA1F2;color:white}.share-btn.facebook:hover{background:#4267B2;border-color:#4267B2;color:white}.share-btn.whatsapp:hover{background:#25D366;border-color:#25D366;color:white}.share-btn.linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:white}.share-btn.copy:hover{background:var(--color-accent);border-color:var(--color-accent);color:white}.share-btn.native{display:none}@media (max-width:768px){.share-btn.native{display:inline-flex}.share-btn span{display:none}.share-btn{padding:var(--space-3)}}/* ============================================ POST SHARE SECTION ============================================ */ .post-share-section{margin-top:var(--space-8);padding:var(--space-6);background:var(--color-bg-alt);border-radius:var(--radius-xl);text-align:center}.share-section-header{margin-bottom:var(--space-4)}.share-section-header .share-label{font-size:1rem;font-weight:600;color:var(--color-text)}.share-buttons-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}.share-btn.copy.copied{background:var(--color-success) !important;border-color:var(--color-success) !important;color:white !important}/* ============================================ PASSWORD INPUT WRAPPER ============================================ */ .password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper .form-input{padding-right:48px}.password-input-wrapper .password-toggle{position:absolute;right:12px;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;transition:color 0.2s}.password-input-wrapper .password-toggle:hover{color:var(--color-accent)}.settings-note{font-size:0.85rem;color:var(--color-text-muted);margin-top:var(--space-3);font-style:italic}.share-btn-item[data-platform="twitter"]:hover{border-color:#1DA1F2;color:#1DA1F2}.share-btn-item[data-platform="facebook"]:hover{border-color:#4267B2;color:#4267B2}.share-btn-item[data-platform="instagram"]:hover{border-color:#E4405F;color:#E4405F}.share-btn-item[data-platform="linkedin"]:hover{border-color:#0A66C2;color:#0A66C2}.share-btn-item[data-platform="whatsapp"]:hover{border-color:#25D366;color:#25D366}.share-btn-item[data-platform="copy"]:hover{border-color:var(--color-accent);color:var(--color-accent)}/* ============================================ IMAGE LOADING & ERROR HANDLING ============================================ */ .card-image-wrapper, .hero-post-image, .post-hero-image{background:linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%)}.card-image-wrapper:not(.loaded)::after{content:'';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-alt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;opacity:0.5;z-index:0}.card-image-wrapper.loaded::after{display:none}.card-image{position:relative;z-index:1}.post-content{overflow-x:hidden}.post-content img{max-width:100%;height:auto}.post-content pre, .post-content code{max-width:100%;overflow-x:auto}/* ============================================ VIEW ALL TAGS BUTTON ============================================ */ .view-all-tags-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--space-4);padding:10px 16px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:0.85rem;font-weight:500;transition:all 0.2s;text-decoration:none}.view-all-tags-btn:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.view-all-tags-btn svg{transition:transform 0.2s}.view-all-tags-btn:hover svg{transform:translateX(3px)}/* ============================================ POST REACTIONS ============================================ */ .post-reactions-section{padding:var(--space-6) 0;background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.reactions-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.reactions-label{font-size:1rem;font-weight:600;color:var(--color-text-secondary)}.reactions-buttons{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.reaction-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-3) var(--space-4);background:var(--color-bg-card);border:2px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s ease;min-width:70px}.reaction-btn:hover{border-color:var(--color-accent);transform:translateY(-3px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.reaction-btn.active{border-color:var(--color-accent);background:var(--color-accent-subtle)}.reaction-btn:active{transform:scale(0.95)}.reaction-emoji{font-size:1.75rem;line-height:1;transition:transform 0.2s}.reaction-btn:hover .reaction-emoji{transform:scale(1.2)}.reaction-btn.active .reaction-emoji{animation:reactionPop 0.3s ease}@keyframes reactionPop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1.2)}}.reaction-count{font-size:0.85rem;font-weight:600;color:var(--color-text-muted)}.reaction-btn.active .reaction-count{color:var(--color-accent)}@media (max-width:480px){.reaction-btn{padding:var(--space-2) var(--space-3);min-width:60px}.reaction-emoji{font-size:1.5rem}.reactions-buttons{gap:var(--space-2)}}