/*
Theme Name: DevEcosystem - Programming Tutorial Theme
Theme URI: https://www.52runoob.com
Author: DevEcosystem
Description: A modern programming tutorial theme with syntax highlighting, dark mode, and developer-focused features.
Version: 9.0.0
Text Domain: devtheme
*/

:root {
    --color-bg-primary: #F8F6FF;
    --color-bg-secondary: #FFFFFF;
    --color-bg-tertiary: #F1EDFF;
    --color-bg-card: #FFFFFF;
    --color-accent: #A855F7;
    --color-accent-hover: #9333EA;
    --color-accent-glow: rgba(168, 85, 247, 0.3);
    --color-purple: #A855F7;
    --color-cyan: #22D3EE;
    --color-green: #34D399;
    --color-orange: #FBBF24;
    --color-red: #F87171;
    --color-pink: #F472B6;
    --color-text-primary: #1E1B2E;
    --color-text-secondary: #6B6880;
    --color-text-muted: #9492A6;
    --color-border: rgba(168, 85, 247, 0.08);
    --color-border-hover: rgba(168, 85, 247, 0.3);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-serif: 'Playfair Display', serif;
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 30px rgba(168, 85, 247, 0.1);
    --gradient-accent: linear-gradient(135deg, #A855F7, #F472B6);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html { overflow-x: hidden; }
* { box-sizing: border-box; margin: 0; padding: 0; }

/* WP Resets */
.widget-area, .widget-area * { max-width:100%; }
.screen-reader-text { clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden; }
.search-form { display:flex;gap:8px;align-items:center; }
.search-form label { flex:1; }
.search-form .search-field { width:100%; }
.search-form .search-submit { flex-shrink:0; }
.wp-block-image, .wp-block-post-featured-image { margin:0; }
.aligncenter, .alignleft, .alignright { max-width:100%; }
.wp-caption, .wp-caption-text { max-width:100%;color:var(--color-text-muted);font-size:.8rem;text-align:center;margin-top:.5rem; }
nav.pagination { all:unset;display:flex;justify-content:center;gap:8px;flex-wrap:wrap; }
nav.pagination .nav-links { display:flex;gap:8px;flex-wrap:wrap;justify-content:center; }
nav.pagination h2 { display:none; }
pre, code, table, img, video, iframe, embed, object { max-width:100%;overflow-wrap:break-word;word-wrap:break-word; }
.article-content pre { overflow-x:auto;max-width:100%; }

body {
    font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
    color: var(--color-text-primary); background-color: var(--color-bg-primary);
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(168, 85, 247, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.015) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

body::before {
    content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 50%, rgba(244, 114, 182, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 50%);
    pointer-events: none; z-index: 0;
}
body > * { position: relative; z-index: 1; }

a { color: var(--color-accent); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-accent-hover); }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; margin-bottom: 0.5em; }
h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; width: 100%; overflow-x: hidden; }

/* ===== Loading Screen ===== */
.loading-screen { position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg-primary);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s; }
.loading-screen.hidden { opacity:0;visibility:hidden; }
.loading-spinner { width:48px;height:48px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ===== Header ===== */
.platform-header { background:rgba(11,18,32,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);padding:0;position:sticky;top:0;z-index:1000;transition:var(--transition); }
.platform-header.scrolled { box-shadow:0 4px 30px rgba(0,0,0,.3); }
.header-inner { display:flex;justify-content:space-between;align-items:center;max-width:1280px;margin:0 auto;padding:0 24px;height:64px; }
.platform-logo { display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:700;color:var(--color-text-primary);white-space:nowrap; }
.platform-logo-icon { width:36px;height:36px;background:var(--gradient-accent);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;box-shadow:0 0 20px rgba(0,212,255,.3); }
.main-nav { flex:1;margin:0 2rem; }
.nav-menu { display:flex;list-style:none;gap:2rem; }
.nav-link { color:var(--color-text-secondary);font-weight:500;font-size:.9rem;padding:.5rem 0;position:relative;transition:var(--transition); }
.nav-link::after { content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gradient-accent);transition:width .3s;border-radius:2px; }
.nav-link:hover,.nav-link.active { color:var(--color-accent); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.search-box { position:relative; }
.search-input { background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:12px;padding:8px 16px 8px 40px;color:var(--color-text-primary);width:240px;font-size:.875rem;transition:var(--transition); }
.search-input:focus { border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow);outline:none;width:300px; }
.search-icon { position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);font-size:.85rem; }
.header-actions { display:flex;align-items:center;gap:12px; }
.lang-switch { display:flex;background:var(--color-bg-tertiary);border-radius:8px;overflow:hidden;border:1px solid var(--color-border); }
.lang-switch a { padding:4px 10px;font-size:.75rem;font-weight:600;color:var(--color-text-muted);transition:var(--transition); }
.lang-switch a.active { background:var(--color-accent);color:var(--color-bg-primary); }
.theme-toggle-btn { width:36px;height:36px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-bg-tertiary);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);font-size:1rem; }
.theme-toggle-btn:hover { border-color:var(--color-accent);color:var(--color-accent); }
.btn { display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:10px;font-weight:600;font-size:.875rem;border:none;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden; }
.btn::after { content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s; }
.btn:active::after { width:200px;height:200px; }
.btn-primary { background:var(--gradient-accent);color:white; }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,212,255,.3); }
.btn-secondary { background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border); }
.btn-secondary:hover { border-color:var(--color-accent); }
.btn-ghost { background:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border); }
.btn-ghost:hover { background:var(--color-bg-tertiary);color:var(--color-text-primary); }
.btn-lg { padding:14px 32px;font-size:1rem;border-radius:12px; }
.btn-sm { padding:6px 14px;font-size:.8rem; }

/* ===== Hero ===== */
.hero-section { position:relative;padding:100px 0 80px;background:linear-gradient(135deg,#F8F6FF 0%,#E8E0FF 50%,#F1EDFF 100%);background-image:linear-gradient(135deg,#F8F6FF 0%,#E8E0FF 50%,#F1EDFF 100%),linear-gradient(rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(rgba(168,85,247,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.02) 1px,transparent 1px);background-size:cover,100px 100px,100px 100px,20px 20px,20px 20px;overflow:hidden; }
.hero-particles { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0; }
.hero-particle { position:absolute;width:2px;height:2px;background:var(--color-accent);border-radius:50%;animation:float-particle linear infinite;opacity:0; }
@keyframes float-particle { 0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.6}90%{opacity:.6}100%{opacity:0;transform:translateY(-10vh) scale(1)} }
.hero-glow { position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(168,85,247,.08) 0%,transparent 70%);top:-200px;right:-200px;pointer-events:none; }
.hero-glow-2 { position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(244,114,182,.06) 0%,transparent 70%);bottom:-150px;left:-150px;pointer-events:none; }
.hero-content { position:relative;z-index:1;text-align:center;max-width:800px;margin:0 auto; }
.hero-badge { display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:50px;font-size:.85rem;color:var(--color-accent);margin-bottom:2rem;animation:fadeInUp .6s ease; }
.hero-title { font-size:3.5rem;font-weight:800;margin-bottom:1.5rem;line-height:1.15;animation:fadeInUp .6s ease .1s both; }
.hero-title-gradient { background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.typing-cursor { display:inline-block;width:3px;height:1em;background:var(--color-accent);margin-left:4px;animation:blink .8s step-end infinite;vertical-align:text-bottom; }
@keyframes blink { 50%{opacity:0} }
.hero-subtitle { font-size:1.25rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto 2.5rem;line-height:1.7;animation:fadeInUp .6s ease .2s both; }
.hero-cta { display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;animation:fadeInUp .6s ease .3s both; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)} }

/* Hero Tech Icons */
.hero-tech-icons { display:flex;justify-content:center;gap:2rem;margin-top:3rem;animation:fadeInUp .6s ease .4s both; }
.hero-tech-icon { width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:var(--transition); }
.hero-tech-icon:hover { transform:translateY(-4px) scale(1.1);border-color:var(--color-accent);box-shadow:0 8px 20px rgba(168,85,247,.2); }
.hero-tech-icon.python { color:#34D399; }
.hero-tech-icon.js { color:#FBBF24; }
.hero-tech-icon.react { color:#A855F7; }
.hero-tech-icon.ai { color:#F472B6; }
.hero-tech-icon.docker { color:#22D3EE; }
.hero-tech-icon.git { color:#EF4444; }

/* Scroll Indicator */
.scroll-indicator { position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--color-text-muted);font-size:.75rem;animation:fadeInUp .6s ease .5s both; }
.scroll-mouse { width:24px;height:38px;border:2px solid var(--color-text-muted);border-radius:12px;position:relative; }
.scroll-mouse::after { content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:var(--color-accent);border-radius:2px;animation:scrollDown 1.5s ease infinite; }
@keyframes scrollDown { 0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(12px)} }

/* ===== Stats Bar ===== */
.stats-bar { background:var(--color-bg-secondary);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:2.5rem 0; }
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:800px;margin:0 auto;text-align:center; }
.stat-number { font-size:2.5rem;font-weight:800;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.stat-label { font-size:.85rem;color:var(--color-text-muted);margin-top:4px; }

/* ===== Section Common ===== */
.section-header { text-align:center;margin-bottom:3rem; }
.section-badge { display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2);border-radius:50px;font-size:.8rem;color:var(--color-accent);margin-bottom:1rem; }
.section-title { font-size:2.25rem;margin-bottom:.75rem; }
.section-subtitle { color:var(--color-text-secondary);font-size:1.1rem;max-width:600px;margin:0 auto; }

/* ===== Category Showcase ===== */
.category-showcase { padding:5rem 0; }
.categories-section { padding:4rem 0;background:var(--color-bg-primary); }
.category-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem; }

/* ===== Hot Tags ===== */
.hot-tags-section { padding:4rem 0;background:var(--color-bg-secondary); }
.hot-tags-grid { display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }
.hot-tag-card { display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:50px;font-size:.875rem;font-weight:500;color:var(--color-text-secondary);transition:var(--transition);text-decoration:none; }
.hot-tag-card i { color:var(--tag-color,var(--color-accent));font-size:.9rem; }
.hot-tag-card:hover { border-color:var(--tag-color,var(--color-accent));color:var(--tag-color,var(--color-accent));background:rgba(168,85,247,.05);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2); }
.category-card { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:2rem;transition:var(--transition);position:relative;overflow:hidden;display:block;text-decoration:none; }
.category-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent);opacity:0;transition:var(--transition); }
.category-card::after { content:'';position:absolute;top:-50%;right:-50%;width:100px;height:100px;border-radius:50%;background:rgba(0,212,255,.03);filter:blur(40px);transition:var(--transition); }
.category-card:hover { border-color:var(--color-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-glow); }
.category-card:hover::before { opacity:1; }
.category-card:hover::after { background:rgba(0,212,255,.08);width:200px;height:200px; }
.category-card:hover h3 { color:var(--color-accent); }
.category-icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.25rem;transition:var(--transition); }
.category-card:hover .category-icon { transform:scale(1.15) rotate(-5deg); }
.category-icon.python { background:rgba(52,211,153,.15);color:var(--color-green); }
.category-icon.ai { background:rgba(168,85,247,.15);color:var(--color-purple); }
.category-icon.web { background:rgba(244,114,182,.15);color:var(--color-pink); }
.category-icon.seo { background:rgba(251,191,36,.15);color:var(--color-orange); }
.category-icon.devops { background:rgba(34,211,238,.15);color:var(--color-cyan); }
.category-icon.mobile { background:rgba(248,113,113,.15);color:var(--color-red); }
.category-card h3 { font-size:1.125rem;margin-bottom:.75rem;transition:var(--transition); }
.category-card p { font-size:.875rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:1rem; }
.category-count { font-size:.75rem;color:var(--color-text-muted);display:flex;align-items:center;gap:6px; }
.category-start-btn { display:inline-flex;align-items:center;gap:6px;margin-top:1rem;padding:6px 16px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);border-radius:8px;font-size:.8rem;font-weight:600;color:var(--color-accent);transition:var(--transition); }
.category-start-btn:hover { background:var(--color-accent);color:var(--color-bg-primary); }

/* ===== Featured Carousel ===== */
.featured-section { padding:5rem 0;background:var(--color-bg-secondary); }
.featured-carousel { position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--color-border); }
.featured-track { display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1); }
.featured-slide { min-width:100%;position:relative;overflow:hidden; }
.featured-slide img, .featured-slide .thumb-auto { width:100%;height:400px;object-fit:cover; }
.featured-slide .thumb-auto { height:400px; }
.featured-slide .thumb-auto i { font-size:4rem;margin-bottom:12px; }
.featured-slide .thumb-auto span { font-size:.85rem; }
.featured-overlay { position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(11,18,32,.95));padding:3rem 2rem 2rem; }
.featured-tag { display:inline-block;padding:4px 12px;background:var(--color-accent);color:var(--color-bg-primary);border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem; }
.featured-difficulty { display:inline-block;padding:4px 12px;border-radius:6px;font-size:.65rem;font-weight:700;text-transform:uppercase;margin-left:6px; }
.featured-difficulty.beginner { background:rgba(52,211,153,.2);color:var(--color-green); }
.featured-difficulty.intermediate { background:rgba(251,191,36,.2);color:var(--color-orange); }
.featured-difficulty.advanced { background:rgba(248,113,113,.2);color:var(--color-red); }
.featured-title { font-size:1.75rem;margin-bottom:.5rem; }
.featured-title a { color:white; }
.featured-excerpt { color:var(--color-text-secondary);font-size:.9rem; }
.featured-meta { display:flex;gap:1rem;margin-top:.75rem;font-size:.8rem;color:var(--color-text-muted); }
.featured-meta i { margin-right:4px; }
.featured-read-btn { display:inline-flex;align-items:center;gap:6px;margin-top:1rem;padding:8px 20px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:white;font-size:.85rem;font-weight:600;transition:var(--transition); }
.featured-read-btn:hover { background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg-primary); }
.carousel-controls { display:flex;gap:.75rem;margin-top:1.5rem;justify-content:center;align-items:center; }
.carousel-btn { width:44px;height:44px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-primary);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center; }
.carousel-btn:hover { border-color:var(--color-accent);color:var(--color-accent); }
.carousel-dots { display:flex;gap:8px; }
.carousel-dot { width:8px;height:8px;border-radius:50%;background:var(--color-border);cursor:pointer;transition:var(--transition); }
.carousel-dot.active { background:var(--color-accent);width:24px;border-radius:4px; }
.carousel-progress { width:100%;height:3px;background:var(--color-border);border-radius:2px;margin-top:1rem;overflow:hidden; }
.carousel-progress-bar { height:100%;background:var(--gradient-accent);border-radius:2px;transition:width .1s linear; }

/* ===== Tutorial Cards ===== */
.tutorials-section { padding:5rem 0; }
.tutorials-layout { display:grid;grid-template-columns:1fr 320px;gap:2.5rem; }
.tutorial-card { display:grid;grid-template-columns:220px 1fr;gap:1.5rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem;transition:var(--transition);position:relative; }
.tutorial-card::before { content:'';position:absolute;inset:-1px;border-radius:17px;background:var(--gradient-accent);z-index:-1;opacity:0;transition:opacity .3s; }
.tutorial-card:hover { border-color:transparent;transform:translateY(-2px);box-shadow:var(--shadow-card); }
.tutorial-card:hover::before { opacity:1; }
.tutorial-thumb { border-radius:12px;overflow:hidden;height:150px;display:flex;align-items:center;justify-content:center;position:relative; }
.tutorial-thumb img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.tutorial-card:hover .tutorial-thumb img { transform:scale(1.05); }
.tutorial-info { display:flex;flex-direction:column; }
.tutorial-tags { display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap; }
.tag { padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:600; }
.tag-category { background:rgba(168,85,247,.1);color:var(--color-accent); }
.tag-difficulty-beginner { background:rgba(52,211,153,.15);color:var(--color-green); }
.tag-difficulty-intermediate { background:rgba(251,191,36,.15);color:var(--color-orange); }
.tag-difficulty-advanced { background:rgba(248,113,113,.15);color:var(--color-red); }
.tag-new { background:rgba(244,114,182,.15);color:var(--color-pink); }
.tutorial-title { font-size:1.1rem;margin-bottom:6px; }
.tutorial-title a { color:var(--color-text-primary);transition:var(--transition); }
.tutorial-title a:hover { color:var(--color-accent); }
.tutorial-excerpt { font-size:.85rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:10px;flex:1; }
.tutorial-meta { display:flex;gap:1rem;font-size:.75rem;color:var(--color-text-muted);align-items:center; }
.tutorial-author { display:flex;align-items:center;gap:6px; }
.tutorial-author img { width:20px;height:20px;border-radius:50%; }
.author-avatar-letter { display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(168,85,247,.15);color:var(--color-accent);font-size:.65rem;font-weight:700;flex-shrink:0; }
.author-avatar-letter.single-author-avatar { width:40px;height:40px;border-radius:10px;border:2px solid var(--color-border);font-size:1rem; }
.author-avatar-letter.author-card-avatar { width:50px;height:50px;border-radius:12px;border:2px solid var(--color-border);font-size:1.25rem; }
.tutorial-author span { font-size:.75rem;color:var(--color-text-secondary); }
.tutorial-actions { display:flex;gap:8px;margin-left:auto; }
.tutorial-action-btn { width:28px;height:28px;border-radius:6px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:var(--transition); }
.tutorial-action-btn:hover { border-color:var(--color-accent);color:var(--color-accent); }
.tutorial-action-btn.bookmarked { color:var(--color-orange);border-color:var(--color-orange); }

/* ===== Auto Thumbnails ===== */
.thumb-auto { width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.thumb-auto i { font-size:2rem;margin-bottom:8px;position:relative;z-index:1; }
.thumb-auto span { font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;position:relative;z-index:1;opacity:.8; }
.thumb-auto::before { content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:.12;z-index:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:15px 15px; }
.thumb-auto::after { content:'';position:absolute;width:80px;height:80px;border-radius:50%;filter:blur(30px);z-index:0;top:20%;right:-10%; }
.thumb-python { background:linear-gradient(135deg,#0D2818,#1A4D2E);color:#34D399; }
.thumb-python::after { background:#34D399; }
.thumb-ai { background:linear-gradient(135deg,#1A1035,#2D1B69);color:#A855F7; }
.thumb-ai::after { background:#A855F7; }
.thumb-web { background:linear-gradient(135deg,#1A0D20,#2D1848);color:#F472B6; }
.thumb-web::after { background:#F472B6; }
.thumb-nlp { background:linear-gradient(135deg,#1A1035,#2D1B69);color:#C084FC; }
.thumb-nlp::after { background:#C084FC; }
.thumb-devops { background:linear-gradient(135deg,#0A1628,#0D2F4F);color:#22D3EE; }
.thumb-devops::after { background:#22D3EE; }
.thumb-seo { background:linear-gradient(135deg,#1A1508,#3D2E0A);color:#FBBF24; }
.thumb-seo::after { background:#FBBF24; }
.thumb-mobile { background:linear-gradient(135deg,#1A0A0A,#3D1010);color:#F87171; }
.thumb-mobile::after { background:#F87171; }
.thumb-default { background:linear-gradient(135deg,#0D0A1A,#1E1833);color:#A855F7; }
.thumb-default::after { background:#A855F7; }

/* ===== Newsletter ===== */
.newsletter-section { padding:5rem 0;background:var(--color-bg-secondary);position:relative;overflow:hidden; }
.newsletter-glow { position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(168,85,247,.1) 0%,transparent 70%);top:-100px;right:-100px; }
.newsletter-content { max-width:600px;margin:0 auto;text-align:center;position:relative;z-index:1; }
.newsletter-form { display:flex;gap:12px;margin-top:1.5rem; }
.newsletter-input { flex:1;padding:14px 20px;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text-primary);font-size:.95rem; }
.newsletter-input:focus { border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px var(--color-accent-glow); }

/* ===== Sidebar ===== */
.tutorial-sidebar { position:sticky;top:84px;display:flex;flex-direction:column;gap:1.5rem;overflow:hidden; }
.tutorial-sidebar .widget-area,
.tutorial-sidebar #secondary { all:unset;display:flex;flex-direction:column;gap:1.5rem; }
.tutorial-sidebar .search-form { display:flex;gap:8px; }
.tutorial-sidebar .search-form label { flex:1; }
.tutorial-sidebar .search-form .search-field { width:100%;padding:8px 12px;background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:8px;color:var(--color-text-primary);font-size:.85rem; }
.tutorial-sidebar .search-form .search-field:focus { border-color:var(--color-accent);outline:none; }
.tutorial-sidebar .search-form .search-submit { padding:8px 14px;background:var(--gradient-accent);border:none;border-radius:8px;color:white;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap; }
.tutorial-sidebar .widget { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem;margin:0; }
.sidebar-widget { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem; }
.sidebar-widget-title { font-size:.95rem;font-weight:600;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:8px; }
.sidebar-widget-title i { color:var(--color-accent); }
.sidebar-category-list { list-style:none; }
.sidebar-category-list li { margin-bottom:6px; }
.sidebar-category-list a { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;color:var(--color-text-secondary);font-size:.85rem;transition:var(--transition); }
.sidebar-category-list a:hover { background:var(--color-bg-tertiary);color:var(--color-accent); }
.sidebar-category-count { background:var(--color-bg-tertiary);padding:2px 8px;border-radius:6px;font-size:.7rem; }
.sidebar-tags { display:flex;flex-wrap:wrap;gap:6px; }
.sidebar-tag { padding:4px 12px;background:var(--color-bg-tertiary);border-radius:8px;font-size:.75rem;color:var(--color-text-secondary);border:1px solid var(--color-border);transition:var(--transition); }
.sidebar-tag:hover { border-color:var(--color-accent);color:var(--color-accent); }
.sidebar-cta { background:linear-gradient(135deg,var(--color-bg-card),var(--color-bg-tertiary));border:1px solid var(--color-accent);text-align:center; }
.sidebar-popular-item { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-border); }
.sidebar-popular-item:last-child { border-bottom:none; }
.sidebar-popular-num { width:24px;height:24px;border-radius:6px;background:var(--color-bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--color-accent);flex-shrink:0; }
.sidebar-popular-info { flex:1; }
.sidebar-popular-title { font-size:.85rem;font-weight:500;color:var(--color-text-primary);line-height:1.4; }
.sidebar-popular-title:hover { color:var(--color-accent); }
.sidebar-popular-meta { font-size:.7rem;color:var(--color-text-muted);margin-top:2px; }

/* ===== Breadcrumb ===== */
.breadcrumb { background:var(--color-bg-secondary);padding:12px 0;border-bottom:1px solid var(--color-border); }
.breadcrumb-list { display:flex;list-style:none;gap:8px;font-size:.8rem; }
.breadcrumb-item::after { content:'/';margin-left:8px;color:var(--color-text-muted); }
.breadcrumb-item:last-child::after { content:''; }
.breadcrumb-link { color:var(--color-text-muted); }
.breadcrumb-link:hover { color:var(--color-accent); }

/* ===== Single Post ===== */
.tutorial-content { max-width:800px;margin:0 auto;padding:2rem 0; }
.tutorial-meta-bar { display:flex;gap:12px;margin-bottom:1.5rem;flex-wrap:wrap; }
.meta-badge { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--color-bg-tertiary);border-radius:8px;font-size:.8rem;font-weight:500; }
.difficulty-beginner { background:rgba(16,185,129,.15);color:var(--color-green); }
.difficulty-intermediate { background:rgba(245,158,11,.15);color:var(--color-orange); }
.difficulty-advanced { background:rgba(239,68,68,.15);color:var(--color-red); }
.article-content { color:var(--color-text-primary);line-height:1.8; }
.article-content p { margin-bottom:1.5rem; }
.article-content ul,.article-content ol { margin-bottom:1.5rem;padding-left:2rem; }
.article-content li { margin-bottom:.5rem; }
.article-content blockquote { border-left:4px solid var(--color-accent);padding:1rem 1.5rem;margin:1.5rem 0;background:var(--color-bg-secondary);border-radius:0 12px 12px 0;font-style:italic; }
.article-content img { max-width:100%;height:auto;border-radius:12px;margin:1.5rem 0; }
.article-content table { width:100%;border-collapse:collapse;margin:1.5rem 0;background:var(--color-bg-secondary);border-radius:12px;overflow:hidden; }
.article-content th,.article-content td { padding:12px 16px;text-align:left;border-bottom:1px solid var(--color-border); }
.article-content th { background:var(--color-bg-tertiary);font-weight:600; }

/* ===== Code Blocks ===== */
pre { position:relative;margin:2rem 0;background:#0D0A1A!important;border-radius:16px;overflow:hidden;border:1px solid rgba(168,85,247,.15);box-shadow:0 8px 30px rgba(0,0,0,.3); }
pre[class*="language-"] { padding:1.25rem;margin:0; }
code { font-family:var(--font-mono);font-size:.875rem; }
.code-header { display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:rgba(168,85,247,.08);border-bottom:1px solid rgba(168,85,247,.1);font-size:.75rem; }
.language-badge { background:var(--gradient-accent);color:white;padding:4px 12px;border-radius:8px;font-weight:600;text-transform:uppercase;font-size:.65rem;letter-spacing:.5px; }
div.code-toolbar>.toolbar { opacity:1;right:8px;top:8px; }
div.code-toolbar>.toolbar>.toolbar-item>button { background:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border);padding:4px 12px;border-radius:8px;font-size:.75rem;cursor:pointer;transition:var(--transition); }
div.code-toolbar>.toolbar>.toolbar-item>button:hover { background:var(--color-accent);color:var(--color-bg-primary); }

/* ===== TOC ===== */
.table-of-contents { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem; }
.toc-title { font-size:.95rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px; }
.toc-title i { color:var(--color-accent); }
.toc-list { list-style:none; }
.toc-item { margin-bottom:4px; }
.toc-link { color:var(--color-text-secondary);font-size:.85rem;display:block;padding:6px 12px;border-left:2px solid transparent;border-radius:0 6px 6px 0;transition:var(--transition); }
.toc-link:hover,.toc-link.active { color:var(--color-accent);border-left-color:var(--color-accent);background:rgba(168,85,247,.05); }

/* ===== Post Bottom Grid ===== */
.single-bottom-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--color-border); }
.single-bottom-col { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;padding:1.5rem; }
.single-bottom-heading { font-size:1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px;color:var(--color-accent); }
.single-bottom-heading i { font-size:.85rem; }
.single-bottom-links { list-style:none; }
.single-bottom-links li { margin-bottom:8px; }
.single-bottom-links a { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;color:var(--color-text-secondary);font-size:.85rem;transition:var(--transition); }
.single-bottom-links a:hover { background:var(--color-bg-tertiary);color:var(--color-accent); }
.single-bottom-links a i { width:16px;text-align:center;color:var(--color-accent);font-size:.75rem; }
.single-bottom-nav { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.nav-link-card { background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:12px;padding:1rem;transition:var(--transition);display:block;text-decoration:none; }
.nav-link-card:hover { border-color:var(--color-accent);transform:translateY(-2px); }
.nav-link-label { font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px; }
.nav-link-title { font-size:.85rem;font-weight:600;color:var(--color-text-primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* ===== Related Posts ===== */
.related-posts { margin-top:2rem; }
.related-posts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.5rem; }
.related-post-card { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;padding:1.25rem;transition:var(--transition); }
.related-post-card:hover { border-color:var(--color-accent); }

/* ===== Share Bar ===== */
.share-bar { position:fixed;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:50; }
.share-btn { width:40px;height:40px;border-radius:10px;background:var(--color-bg-card);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:var(--transition);cursor:pointer;font-size:.9rem; }
.share-btn:hover { border-color:var(--color-accent);color:var(--color-accent);transform:translateX(4px); }

/* ===== Footer ===== */
.footer { background:var(--color-bg-secondary);border-top:1px solid var(--color-border);padding:4rem 0 2rem;margin-top:0; }
.footer-content { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem; }
.footer-brand p { color:var(--color-text-secondary);font-size:.875rem;margin-top:1rem;line-height:1.7; }
.footer-social { display:flex;gap:12px;margin-top:1.5rem; }
.footer-social a { width:40px;height:40px;border-radius:10px;background:var(--color-bg-tertiary);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:var(--transition); }
.footer-social a:hover { border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px); }
.footer-section h4 { color:var(--color-text-primary);margin-bottom:1.25rem;font-size:.95rem; }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:var(--color-text-secondary);font-size:.85rem;transition:var(--transition); }
.footer-links a:hover { color:var(--color-accent);padding-left:4px; }
.footer-bottom { text-align:center;padding-top:2rem;margin-top:2rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.8rem; }
.footer-sponsors { display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;opacity:.4; }
.footer-sponsors img { height:24px;filter:grayscale(1) brightness(2); }

/* ===== Reading Progress ===== */
.reading-progress { position:fixed;top:0;left:0;height:3px;background:var(--gradient-accent);z-index:9999;transition:width .1s linear;width:0; }

/* ===== Back to Top ===== */
.back-to-top { position:fixed;bottom:2rem;right:2rem;width:48px;height:48px;border-radius:14px;background:var(--gradient-accent);color:white;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:1rem;z-index:99;box-shadow:0 8px 25px rgba(0,212,255,.3);transition:var(--transition); }
.back-to-top:hover { transform:translateY(-3px); }

/* ===== Pagination ===== */
.pagination .nav-links { display:flex;gap:8px;justify-content:center;flex-wrap:wrap; }
.pagination .page-numbers { padding:8px 14px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:10px;color:var(--color-text-secondary);font-size:.85rem;transition:var(--transition); }
.pagination .page-numbers:hover,.pagination .page-numbers.current { background:var(--color-accent);color:var(--color-bg-primary);border-color:var(--color-accent); }
.pagination .page-numbers.dots { border:none;background:transparent; }

/* ===== Toast ===== */
.toast { position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--color-bg-card);border:1px solid var(--color-accent);border-radius:12px;padding:12px 24px;color:var(--color-text-primary);font-size:.875rem;z-index:9999;transition:transform .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 8px 30px rgba(0,0,0,.3); }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast i { color:var(--color-accent); }

/* ===== Responsive ===== */
@media(max-width:1024px) {
    .tutorials-layout { grid-template-columns:1fr; }
    .tutorial-sidebar { position:static; }
    .footer-content { grid-template-columns:1fr 1fr; }
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .share-bar { display:none; }
    .category-grid { grid-template-columns:repeat(2,1fr); }
    .tools-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
    .header-inner { flex-wrap:wrap;height:auto;padding:12px 24px;gap:12px; }
    .main-nav { order:3;width:100%;margin:0; }
    .nav-menu { flex-wrap:wrap;gap:1rem; }
    .search-input { width:100%; }
    .search-input:focus { width:100%; }
    .hero-title { font-size:2rem; }
    .hero-subtitle { font-size:1rem; }
    .hero-tech-icons { gap:1rem; }
    .tutorial-card { grid-template-columns:1fr; }
    .tutorial-thumb { height:200px; }
    .post-navigation { grid-template-columns:1fr; }
    .footer-content { grid-template-columns:1fr; }
    .category-grid { grid-template-columns:1fr; }
    .tools-grid { grid-template-columns:1fr; }
    .featured-slide img,.featured-slide .thumb-auto { height:250px; }
    .newsletter-form { flex-direction:column; }
}
@media print {
    .platform-header,.breadcrumb,.tutorial-sidebar,.single-bottom-grid,.related-posts,.back-to-top,.reading-progress,.share-bar { display:none; }
    body { background:white;color:black; }
    pre { border:1px solid #ccc;page-break-inside:avoid; }
}

/* ===== Light Mode ===== */
body.light-mode { --color-bg-primary:#F8F6FF;--color-bg-secondary:#FFFFFF;--color-bg-tertiary:#F1EDFF;--color-bg-card:#FFFFFF;--color-text-primary:#1E1B2E;--color-text-secondary:#6B6880;--color-text-muted:#9492A6;--color-border:rgba(168,85,247,.08);--color-border-hover:rgba(168,85,247,.3);--shadow-card:0 4px 24px rgba(0,0,0,.06);--shadow-glow:0 0 30px rgba(168,85,247,.1); }
body.light-mode .platform-header { background:rgba(255,255,255,.85); }
body.light-mode pre { border-color:#e5e7eb; }
body.light-mode .code-header { background:#f3f4f6;border-color:#e5e7eb; }
body.light-mode { background-image:linear-gradient(rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.04) 1px,transparent 1px),linear-gradient(rgba(168,85,247,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.02) 1px,transparent 1px); }

/* ===== Learning Roadmap ===== */
.roadmap-section { padding:5rem 0; background:var(--color-bg-secondary); }
.roadmap-track { display:flex; align-items:center; justify-content:center; gap:0; max-width:1100px; margin:0 auto; }
.roadmap-step { text-align:center; flex:1; max-width:220px; padding:1.5rem 1rem; }
.roadmap-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto 1rem; transition:var(--transition); border:3px solid transparent; }
.roadmap-icon.beginner { background:rgba(52,211,153,.15); color:var(--color-green); border-color:rgba(52,211,153,.3); }
.roadmap-icon.intermediate { background:rgba(168,85,247,.15); color:var(--color-accent); border-color:rgba(168,85,247,.3); }
.roadmap-icon.advanced { background:rgba(244,114,182,.15); color:var(--color-pink); border-color:rgba(244,114,182,.3); }
.roadmap-icon.expert { background:rgba(251,191,36,.15); color:var(--color-orange); border-color:rgba(251,191,36,.3); }
.roadmap-step:hover .roadmap-icon { transform:scale(1.15); box-shadow:0 0 25px rgba(0,212,255,.2); }
.roadmap-content h3 { font-size:1rem; margin-bottom:.5rem; }
.roadmap-content p { font-size:.8rem; color:var(--color-text-secondary); line-height:1.5; margin-bottom:.5rem; }
.roadmap-time { font-size:.7rem; color:var(--color-text-muted); }
.roadmap-connector { width:48px; height:3px; background:var(--gradient-accent); border-radius:2px; opacity:.4; flex-shrink:0; }

/* ===== AI Tools Directory ===== */
.tools-section { padding:5rem 0; }
.tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.tool-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; padding:1.5rem; transition:var(--transition); position:relative; overflow:hidden; }
.tool-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-accent); opacity:0; transition:var(--transition); }
.tool-card:hover { border-color:var(--color-border-hover); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.tool-card:hover::before { opacity:1; }
.tool-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:1rem; }
.tool-card h3 { font-size:1.1rem; margin-bottom:.5rem; }
.tool-card p { font-size:.85rem; color:var(--color-text-secondary); line-height:1.5; margin-bottom:1rem; }
.tool-meta { display:flex; justify-content:space-between; align-items:center; font-size:.8rem; }
.tool-price { padding:3px 10px; background:var(--color-bg-tertiary); border-radius:6px; color:var(--color-text-secondary); font-weight:600; }
.tool-rating { color:var(--color-orange); letter-spacing:2px; }

/* ===== Quick Start Guide ===== */
.quickstart-section { padding:5rem 0; background:var(--color-bg-secondary); }
.quickstart-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(480px,1fr)); gap:2rem; }
.quickstart-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; overflow:hidden; }
.quickstart-header { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:#2D2D2D; border-bottom:1px solid #3D3D3D; }
.quickstart-lang { font-size:.85rem; font-weight:600; color:var(--color-accent); display:flex; align-items:center; gap:8px; }
.quickstart-copy { background:transparent; border:1px solid #555; color:#aaa; padding:4px 12px; border-radius:6px; cursor:pointer; font-size:.75rem; transition:var(--transition); }
.quickstart-copy:hover { border-color:var(--color-accent); color:var(--color-accent); }
.quickstart-code { margin:0!important; border-radius:0!important; border:none!important; background:#1E1E1E!important; }
.quickstart-code code { font-family:var(--font-mono); font-size:.8rem; color:#D4D4D4; }
.quickstart-btn { display:inline-flex; align-items:center; gap:8px; margin:1rem 1.5rem 1.5rem; padding:8px 20px; background:var(--gradient-accent); color:white; border-radius:8px; font-size:.85rem; font-weight:600; transition:var(--transition); }
.quickstart-btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,212,255,.3); }

/* ===== Cheat Sheets ===== */
.cheatsheet-section { padding:5rem 0; position:relative; overflow:hidden; }
.cheatsheet-section::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse 60% 40% at 50% 50%, rgba(168,85,247,.03) 0%, transparent 70%); pointer-events:none; }
.cheatsheet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; position:relative; z-index:1; }
.cheatsheet-card { display:flex; flex-direction:column; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; overflow:hidden; transition:var(--transition); text-decoration:none; position:relative; }
.cheatsheet-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-accent); opacity:0; transition:var(--transition); }
.cheatsheet-card:hover { border-color:var(--color-border-hover); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.cheatsheet-card:hover::before { opacity:1; }
.cheatsheet-preview { height:120px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cheatsheet-preview::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; opacity:.08; background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:12px 12px; }
.cheatsheet-preview::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; filter:blur(25px); top:10%; right:-5%; }
.cheatsheet-preview.python { background:linear-gradient(135deg,#0D2818,#1A4D2E); }
.cheatsheet-preview.python::after { background:#34D399; }
.cheatsheet-preview.git { background:linear-gradient(135deg,#1A0A0A,#3D1010); }
.cheatsheet-preview.git::after { background:#F87171; }
.cheatsheet-preview.docker { background:linear-gradient(135deg,#0A1628,#0D2F4F); }
.cheatsheet-preview.docker::after { background:#22D3EE; }
.cheatsheet-preview.linux { background:linear-gradient(135deg,#1A1508,#3D2E0A); }
.cheatsheet-preview.linux::after { background:#FBBF24; }
.cheatsheet-preview.sql { background:linear-gradient(135deg,#1A1035,#2D1B69); }
.cheatsheet-preview.sql::after { background:#A855F7; }
.cheatsheet-preview.javascript { background:linear-gradient(135deg,#1A1508,#3D2E0A); }
.cheatsheet-preview.javascript::after { background:#FBBF24; }
.cheatsheet-preview i { font-size:2.5rem; position:relative; z-index:1; opacity:.7; }
.cheatsheet-body { padding:1.25rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.cheatsheet-body h3 { font-size:1rem; margin-bottom:.4rem; color:var(--color-text-primary); }
.cheatsheet-desc { font-size:.75rem; color:var(--color-text-secondary); line-height:1.5; margin-bottom:.75rem; flex:1; }
.cheatsheet-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.cheatsheet-pages { font-size:.7rem; color:var(--color-text-muted); display:flex; align-items:center; gap:4px; }
.cheatsheet-format { font-size:.65rem; font-weight:700; padding:2px 8px; background:rgba(168,85,247,.1); color:var(--color-accent); border-radius:4px; text-transform:uppercase; letter-spacing:.5px; }
.cheatsheet-actions { display:flex; gap:8px; }
.cheatsheet-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:8px; font-size:.75rem; font-weight:600; transition:var(--transition); cursor:pointer; border:none; text-decoration:none; }
.cheatsheet-btn-primary { background:var(--gradient-accent); color:white; }
.cheatsheet-btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(0,212,255,.3); }
.cheatsheet-btn-secondary { background:var(--color-bg-tertiary); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.cheatsheet-btn-secondary:hover { border-color:var(--color-accent); color:var(--color-accent); }

/* ===== Social Proof ===== */
.socialproof-section { padding:5rem 0; background:var(--color-bg-secondary); }
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
.testimonial-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; padding:2rem; transition:var(--transition); }
.testimonial-card:hover { border-color:var(--color-border-hover); transform:translateY(-2px); }
.testimonial-text { font-size:.95rem; color:var(--color-text-secondary); line-height:1.7; margin-bottom:1.5rem; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.testimonial-author strong { font-size:.9rem; color:var(--color-text-primary); }
.testimonial-author span { font-size:.75rem; color:var(--color-text-muted); }

/* ===== FAQ ===== */
.faq-section { padding:5rem 0; }
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid var(--color-border); border-radius:12px; margin-bottom:12px; overflow:hidden; transition:var(--transition); }
.faq-item:hover { border-color:var(--color-border-hover); }
.faq-question { width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; background:var(--color-bg-card); border:none; color:var(--color-text-primary); font-size:.95rem; font-weight:600; cursor:pointer; text-align:left; transition:var(--transition); }
.faq-question:hover { color:var(--color-accent); }
.faq-question i { transition:transform .3s; color:var(--color-text-muted); font-size:.8rem; }
.faq-item.active .faq-question i { transform:rotate(180deg); color:var(--color-accent); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.active .faq-answer { max-height:300px; }
.faq-answer p { padding:0 1.5rem 1.25rem; font-size:.9rem; color:var(--color-text-secondary); line-height:1.7; }

@media(max-width:768px) {
    .roadmap-track { flex-direction:column; align-items:center; }
    .roadmap-connector { width:3px; height:30px; margin:0; }
    .quickstart-grid { grid-template-columns:1fr; }
    .testimonial-grid { grid-template-columns:1fr; }
}
body.light-mode::before { background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(168,85,247,.04) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 50%,rgba(244,114,182,.03) 0%,transparent 50%); }

/* ===== Single Post V3 ===== */
.single-tutorial { position:relative; }
.single-hero { position:relative; padding:3rem 0 2.5rem; background:linear-gradient(135deg,#0D0A1A 0%,#1E1833 50%,#0D0A1A 100%); overflow:hidden; border-bottom:1px solid var(--color-border); }
.single-hero-glow { position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(168,85,247,.06) 0%,transparent 70%); top:-200px; right:-100px; pointer-events:none; }
.single-hero-glow-2 { position:absolute; width:400px; height:400px; background:radial-gradient(circle,rgba(244,114,182,.05) 0%,transparent 70%); bottom:-100px; left:-100px; pointer-events:none; }
.single-hero-content { position:relative; z-index:1; max-width:860px; margin:0 auto; }
.single-hero-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.25rem; }
.single-title { font-size:2.25rem; font-weight:800; line-height:1.25; margin-bottom:1.5rem; color:var(--color-text-primary); }
.single-hero-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.single-author { display:flex; align-items:center; gap:12px; }
.single-author-avatar { width:40px; height:40px; border-radius:10px; border:2px solid var(--color-border); }
.single-author-info { display:flex; flex-direction:column; }
.single-author-name { font-size:.9rem; font-weight:600; color:var(--color-text-primary); }
.single-author-date { font-size:.75rem; color:var(--color-text-muted); }
.single-meta-items { display:flex; gap:1rem; flex-wrap:wrap; }
.single-meta-item { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--color-text-secondary); }
.single-meta-item i { color:var(--color-accent); font-size:.7rem; }
.single-hero-actions { display:flex; gap:8px; margin-left:auto; }
.single-action-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--color-border); background:rgba(255,255,255,.05); color:var(--color-text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; transition:var(--transition); }
.single-action-btn:hover { border-color:var(--color-accent); color:var(--color-accent); background:rgba(168,85,247,.08); }
.single-action-btn.bookmarked { color:var(--color-orange); border-color:var(--color-orange); }

/* Prerequisites */
.single-prerequisites { padding:1.5rem 0 0; }
.prerequisites-card { display:flex; gap:1.25rem; align-items:flex-start; background:var(--color-bg-card); border:1px solid rgba(245,158,11,.2); border-radius:16px; padding:1.25rem 1.5rem; }
.prerequisites-icon { width:40px; height:40px; border-radius:10px; background:rgba(245,158,11,.15); color:var(--color-orange); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.prerequisites-content h4 { font-size:.9rem; color:var(--color-orange); margin-bottom:.5rem; }
.prerequisites-content ul { list-style:none; padding:0; margin:0; }
.prerequisites-content li { font-size:.85rem; color:var(--color-text-secondary); padding:3px 0; padding-left:1.25rem; position:relative; }
.prerequisites-content li::before { content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--color-orange); opacity:.6; }

/* Single Layout */
.single-layout { display:grid; grid-template-columns:1fr 300px; gap:2.5rem; padding:2rem 0 4rem; }
.single-main { min-width:0; }

/* Article Content V3 */
.single-main .article-content { color:var(--color-text-primary); line-height:1.9; font-size:1.05rem; }
.single-main .article-content h2 { font-size:1.75rem; margin:3rem 0 1.25rem; padding:1rem 1.25rem; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:12px; position:relative; border-left:4px solid var(--color-accent); }
.single-main .article-content h3 { font-size:1.4rem; margin:2.5rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--color-border); position:relative; }
.single-main .article-content h3::after { content:''; position:absolute; bottom:-1px; left:0; width:40px; height:2px; background:var(--gradient-accent); border-radius:2px; }
.single-main .article-content h4 { font-size:1.15rem; margin:2rem 0 .75rem; color:var(--color-accent); }
.single-main .article-content h5 { font-size:1rem; margin:1.5rem 0 .5rem; color:var(--color-text-secondary); }
.single-main .article-content p { margin-bottom:1.5rem; text-align:justify; }
.single-main .article-content ul, .single-main .article-content ol { margin-bottom:1.5rem; padding-left:0; list-style:none; }
.single-main .article-content ul li { margin-bottom:.75rem; padding-left:1.75rem; position:relative; }
.single-main .article-content ul li::before { content:''; position:absolute; left:0; top:10px; width:8px; height:8px; border-radius:50%; background:var(--gradient-accent); }
.single-main .article-content ol { counter-reset:ol-item; }
.single-main .article-content ol li { margin-bottom:.75rem; padding-left:2rem; position:relative; counter-increment:ol-item; }
.single-main .article-content ol li::before { content:counter(ol-item); position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:8px; background:var(--gradient-accent); color:var(--color-bg-primary); font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.single-main .article-content blockquote { border-left:4px solid var(--color-accent); padding:1.5rem 1.75rem; margin:2rem 0; background:var(--color-bg-card); border-radius:0 16px 16px 0; position:relative; }
.single-main .article-content blockquote::before { content:'\201C'; position:absolute; top:-8px; left:14px; font-size:3.5rem; color:var(--color-accent); opacity:.12; font-family:serif; line-height:1; }
.single-main .article-content blockquote p { margin-bottom:.5rem; font-style:italic; color:var(--color-text-secondary); }
.single-main .article-content blockquote p:last-child { margin-bottom:0; }
.single-main .article-content img { max-width:100%; height:auto; border-radius:16px; margin:2rem 0; border:1px solid var(--color-border); box-shadow:0 8px 30px rgba(0,0,0,.3); }
.single-main .article-content hr { border:none; height:2px; background:var(--color-border); margin:3rem 0; border-radius:2px; position:relative; }
.single-main .article-content hr::after { content:'···'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--color-bg-primary); padding:0 1rem; color:var(--color-text-muted); font-size:1.25rem; letter-spacing:4px; }
.single-main .article-content table { width:100%; border-collapse:separate; border-spacing:0; margin:2rem 0; background:var(--color-bg-card); border-radius:16px; overflow:hidden; border:1px solid var(--color-border); }
.single-main .article-content th { background:var(--color-bg-tertiary); font-weight:600; color:var(--color-accent); font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }
.single-main .article-content th, .single-main .article-content td { padding:14px 18px; text-align:left; border-bottom:1px solid var(--color-border); }
.single-main .article-content tr:last-child td { border-bottom:none; }
.single-main .article-content tr:hover td { background:rgba(168,85,247,.03); }
.single-main .article-content a { color:var(--color-accent); text-decoration:underline; text-decoration-color:rgba(168,85,247,.3); text-underline-offset:3px; transition:var(--transition); }
.single-main .article-content a:hover { text-decoration-color:var(--color-accent); text-decoration-thickness:2px; }
.single-main .article-content code:not([class*="language-"]) { font-family:var(--font-mono); background:rgba(168,85,247,.08); padding:3px 10px; border-radius:6px; font-size:.85em; color:var(--color-accent); border:1px solid rgba(168,85,247,.15); }
.single-main .article-content strong { color:var(--color-text-primary); font-weight:700; }
.single-main .article-content em { color:var(--color-text-secondary); font-style:italic; }
.single-main .article-content .wp-block-image { margin:2rem 0; }
.single-main .article-content .wp-block-image figcaption { text-align:center; font-size:.8rem; color:var(--color-text-muted); margin-top:.75rem; }
.single-main .article-content > :first-child { margin-top:0; }
.page-links { display:flex; gap:8px; margin:2rem 0; flex-wrap:wrap; }
.page-links span, .page-links a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:var(--color-bg-card); border:1px solid var(--color-border); font-size:.85rem; color:var(--color-text-secondary); transition:var(--transition); }
.page-links a:hover, .page-links > span { background:var(--color-accent); color:var(--color-bg-primary); border-color:var(--color-accent); }

/* Callout / Tip boxes */
.single-main .article-content .is-style-tip,
.single-main .article-content .wp-block-group.is-style-tip { background:rgba(52,211,153,.05); border:1px solid rgba(52,211,153,.2); border-left:4px solid var(--color-green); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin:1.5rem 0; }
.single-main .article-content .is-style-warning,
.single-main .article-content .wp-block-group.is-style-warning { background:rgba(251,191,36,.05); border:1px solid rgba(251,191,36,.2); border-left:4px solid var(--color-orange); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin:1.5rem 0; }
.single-main .article-content .is-style-danger,
.single-main .article-content .wp-block-group.is-style-danger { background:rgba(248,113,113,.05); border:1px solid rgba(248,113,113,.2); border-left:4px solid var(--color-red); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin:1.5rem 0; }
.single-main .article-content .is-style-info,
.single-main .article-content .wp-block-group.is-style-info { background:rgba(168,85,247,.05); border:1px solid rgba(168,85,247,.2); border-left:4px solid var(--color-accent); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin:1.5rem 0; }

/* Single Tags */
.single-tags { display:flex; align-items:center; gap:1rem; margin-top:2.5rem; padding:1.5rem 0; border-top:1px solid var(--color-border); }
.single-tags-label { font-size:.85rem; font-weight:600; color:var(--color-text-muted); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.single-tags-label i { color:var(--color-accent); }
.single-tags-list { display:flex; gap:8px; flex-wrap:wrap; }
.single-tag { padding:5px 14px; background:var(--color-bg-tertiary); border:1px solid var(--color-border); border-radius:8px; font-size:.8rem; color:var(--color-text-secondary); transition:var(--transition); }
.single-tag:hover { border-color:var(--color-accent); color:var(--color-accent); background:rgba(168,85,247,.05); }

/* Share Bar Inline */
.single-share-bar { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding:1.25rem 1.5rem; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; }
.share-label { font-size:.85rem; font-weight:600; color:var(--color-text-muted); white-space:nowrap; }
.share-buttons { display:flex; gap:8px; }
.share-platform-btn { width:36px; height:36px; border-radius:10px; border:1px solid var(--color-border); background:transparent; color:var(--color-text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:var(--transition); }
.share-platform-btn:hover { transform:translateY(-2px); }
.share-platform-btn.twitter:hover { border-color:#1DA1F2; color:#1DA1F2; background:rgba(29,161,242,.08); }
.share-platform-btn.facebook:hover { border-color:#4267B2; color:#4267B2; background:rgba(66,103,178,.08); }
.share-platform-btn.linkedin:hover { border-color:#0A66C2; color:#0A66C2; background:rgba(10,102,194,.08); }
.share-platform-btn.wechat:hover { border-color:var(--color-accent); color:var(--color-accent); background:rgba(168,85,247,.08); }

/* Related Posts V3 */
.related-posts { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--color-border); }
.related-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.related-title { font-size:1.25rem; display:flex; align-items:center; gap:10px; margin:0; }
.related-title i { color:var(--color-accent); }
.related-more { font-size:.85rem; color:var(--color-accent); display:flex; align-items:center; gap:6px; }
.related-more:hover { gap:10px; }
.related-posts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.related-post-card { display:flex; flex-direction:column; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:16px; overflow:hidden; transition:var(--transition); text-decoration:none; }
.related-post-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-accent); opacity:0; transition:var(--transition); }
.related-post-card:hover { border-color:var(--color-border-hover); transform:translateY(-4px); box-shadow:var(--shadow-glow); }
.related-post-thumb { height:140px; overflow:hidden; }
.related-post-thumb img, .related-post-thumb .thumb-auto { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.related-post-card:hover .related-post-thumb img, .related-post-card:hover .related-post-thumb .thumb-auto i { transform:scale(1.05); }
.related-post-info { padding:1.25rem; flex:1; display:flex; flex-direction:column; }
.related-post-tags { display:flex; gap:6px; margin-bottom:8px; }
.related-post-info h4 { font-size:.95rem; margin-bottom:.5rem; color:var(--color-text-primary); line-height:1.4; }
.related-post-card:hover .related-post-info h4 { color:var(--color-accent); }
.related-post-info p { font-size:.8rem; color:var(--color-text-secondary); line-height:1.5; margin-bottom:.75rem; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-post-meta { display:flex; gap:1rem; font-size:.7rem; color:var(--color-text-muted); }
.related-post-meta i { margin-right:3px; }

/* Single Sidebar */
.single-sidebar { position:sticky; top:84px; display:flex; flex-direction:column; gap:1.5rem; }
.toc-widget { position:relative; }
.toc-widget::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gradient-accent); border-radius:16px 16px 0 0; }
.author-widget {}
.author-card { display:flex; gap:12px; align-items:flex-start; }
.author-card-avatar { width:50px; height:50px; border-radius:12px; border:2px solid var(--color-border); }
.author-card-info strong { font-size:.9rem; color:var(--color-text-primary); display:block; margin-bottom:4px; }
.author-card-info p { font-size:.8rem; color:var(--color-text-secondary); line-height:1.5; margin:0; }

/* Single Comments */
.single-comments { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--color-border); }

/* Single Responsive */
@media(max-width:1024px) {
    .single-layout { grid-template-columns:1fr; }
    .single-sidebar { position:static; order:-1; }
    .toc-widget { display:none; }
}
@media(max-width:768px) {
    .single-title { font-size:1.5rem; }
    .single-hero-meta { flex-direction:column; align-items:flex-start; gap:1rem; }
    .single-hero-actions { margin-left:0; }
    .single-share-bar { flex-direction:column; align-items:flex-start; }
    .related-posts-grid { grid-template-columns:1fr; }
    .single-bottom-grid { grid-template-columns:1fr; }
    .single-bottom-nav { grid-template-columns:1fr; }
}

/* ===== Custom Login / Register Page ===== */
html.wp-auth-check-wrap, html.wp-auth-check-wrap body { background:#0D0A1A!important; }
body.login { background:#0D0A1A!important; min-height:100vh!important; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif!important; overflow-y:auto!important; overflow-x:hidden!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; padding:0!important; }
body.login::before { content:''!important; position:fixed!important; top:0!important; left:0!important; width:100%!important; height:100%!important; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(168,85,247,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 50%,rgba(244,114,182,.05) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 20% 80%,rgba(168,85,247,.04) 0%,transparent 50%)!important; pointer-events:none!important; z-index:0!important; }
body.login::after { content:''!important; position:fixed!important; top:0!important; left:0!important; width:100%!important; height:100%!important; background-image:linear-gradient(rgba(168,85,247,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.03) 1px,transparent 1px),linear-gradient(rgba(168,85,247,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.015) 1px,transparent 1px)!important; background-size:100px 100px,100px 100px,20px 20px,20px 20px!important; pointer-events:none!important; z-index:0!important; }
body.login > * { position:relative!important; z-index:1!important; }

.login-page-decor { position:fixed!important; top:0!important; left:0!important; width:100%!important; height:100%!important; pointer-events:none!important; z-index:0!important; }
.login-page-decor i { position:absolute!important; color:rgba(168,85,247,.06)!important; animation:floatIcon 6s ease-in-out infinite!important; }
@keyframes floatIcon { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }

#login { max-width:420px!important; width:calc(100% - 2rem)!important; padding:2rem!important; margin:0 auto!important; background:rgba(26,21,48,.92)!important; backdrop-filter:blur(24px)!important; -webkit-backdrop-filter:blur(24px)!important; border:1px solid rgba(168,85,247,.15)!important; border-radius:24px!important; box-shadow:0 25px 60px rgba(0,0,0,.5),0 0 80px rgba(168,85,247,.08)!important; overflow:visible!important; }
#loginform, #registerform, #lostpasswordform { background:transparent!important; border:none!important; box-shadow:none!important; padding:0!important; margin-top:0!important; }

body.login h1.wp-login-logo { display:none!important; }
.login-brand { text-align:center!important; margin-bottom:1rem!important; }
.login-brand a { display:inline-flex!important; align-items:center!important; gap:10px!important; text-decoration:none!important; color:#F1F0F5!important; font-size:1.4rem!important; font-weight:800!important; font-family:'Inter',sans-serif!important; }
.login-brand-icon { width:48px!important; height:48px!important; border-radius:14px!important; background:linear-gradient(135deg,#A855F7,#F472B6)!important; display:flex!important; align-items:center!important; justify-content:center!important; color:white!important; font-size:1.2rem!important; box-shadow:0 8px 25px rgba(168,85,247,.3)!important; }
.login-page-title { text-align:center!important; color:#F1F0F5!important; font-size:1.35rem!important; font-weight:700!important; margin-bottom:.5rem!important; font-family:'Inter',sans-serif!important; }
.login-page-subtitle { text-align:center!important; color:#6B6880!important; font-size:.875rem!important; margin-bottom:1rem!important; font-family:'Inter',sans-serif!important; }

.login .message, .login .success, .login #login_error { background:rgba(168,85,247,.08)!important; border:1px solid rgba(168,85,247,.2)!important; border-left:4px solid #A855F7!important; color:#F1F0F5!important; border-radius:12px!important; padding:1rem 1.25rem!important; margin:0 0 1.25rem!important; font-size:.875rem!important; }
.login .success { border-left-color:#34D399!important; background:rgba(52,211,153,.08)!important; border-color:rgba(52,211,153,.2)!important; }
.login #login_error { border-left-color:#F87171!important; background:rgba(248,113,113,.08)!important; border-color:rgba(248,113,113,.2)!important; }

body.login label { color:#A09EAF!important; font-size:.85rem!important; font-weight:500!important; margin-bottom:8px!important; display:block!important; font-family:'Inter',sans-serif!important; }
body.login .input, body.login input[type="text"], body.login input[type="password"], body.login input[type="email"] { background:rgba(168,85,247,.06)!important; border:1px solid rgba(168,85,247,.15)!important; border-radius:12px!important; color:#F1F0F5!important; font-size:.95rem!important; padding:14px 16px!important; width:100%!important; transition:all .3s ease!important; font-family:'Inter',sans-serif!important; box-shadow:none!important; outline:none!important; margin:0!important; }
body.login .input:focus, body.login input[type="text"]:focus, body.login input[type="password"]:focus, body.login input[type="email"]:focus { border-color:#A855F7!important; box-shadow:0 0 0 3px rgba(168,85,247,.15)!important; outline:none!important; background:rgba(168,85,247,.1)!important; }
body.login input::-webkit-input-placeholder { color:#6B6880!important; }
body.login input::-moz-placeholder { color:#6B6880!important; }

body.login .button-primary { background:linear-gradient(135deg,#A855F7,#F472B6)!important; border:none!important; border-radius:12px!important; color:white!important; font-size:1rem!important; font-weight:700!important; padding:14px 24px!important; width:100%!important; cursor:pointer!important; transition:all .3s ease!important; text-shadow:none!important; box-shadow:0 8px 25px rgba(168,85,247,.3)!important; height:auto!important; line-height:1.4!important; float:none!important; font-family:'Inter',sans-serif!important; }
body.login .button-primary:hover { transform:translateY(-2px)!important; box-shadow:0 12px 35px rgba(168,85,247,.4)!important; }
body.login .button-primary:active { transform:translateY(0)!important; }
body.login .button-secondary { background:rgba(168,85,247,.1)!important; border:1px solid rgba(168,85,247,.2)!important; border-radius:8px!important; color:#A855F7!important; font-size:.8rem!important; padding:6px 12px!important; cursor:pointer!important; transition:all .3s ease!important; }

body.login .forgetmenot { margin-bottom:1.25rem!important; display:flex!important; align-items:center!important; gap:6px!important; }
body.login .forgetmenot label { font-size:.8rem!important; color:#6B6880!important; margin-bottom:0!important; display:inline!important; }
body.login .forgetmenot input[type="checkbox"] { accent-color:#A855F7!important; }

.login #nav, .login #backtoblog { text-align:center!important; padding:.75rem 0!important; margin:0!important; font-size:.85rem!important; }
.login #nav a, .login #backtoblog a { color:#A09EAF!important; font-size:.85rem!important; text-decoration:none!important; transition:color .3s ease!important; }
.login #nav a:hover, .login #backtoblog a:hover { color:#A855F7!important; }
.login #nav { border-top:1px solid rgba(168,85,247,.1)!important; margin-top:1.5rem!important; padding-top:1.25rem!important; }

body.login .user-pass-wrap { position:relative!important; }
body.login .wp-hide-pw { color:#6B6880!important; background:transparent!important; border:none!important; box-shadow:none!important; top:50%!important; right:12px!important; transform:translateY(-50%)!important; }
body.login .wp-hide-pw:hover { color:#A855F7!important; }
body.login .dashicons { font-size:18px!important; width:18px!important; height:18px!important; }

.login-divider { display:flex!important; align-items:center!important; gap:12px!important; margin:1.5rem 0 1rem!important; color:#6B6880!important; font-size:.75rem!important; font-family:'Inter',sans-serif!important; }
.login-divider::before, .login-divider::after { content:''!important; flex:1!important; height:1px!important; background:rgba(168,85,247,.15)!important; }
.login-social { display:flex!important; gap:10px!important; justify-content:center!important; margin-top:.5rem!important; }
.login-social-btn { width:48px!important; height:48px!important; border-radius:14px!important; border:1px solid rgba(168,85,247,.15)!important; background:rgba(168,85,247,.05)!important; color:#A09EAF!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:1.1rem!important; cursor:pointer!important; transition:all .3s ease!important; text-decoration:none!important; }
.login-social-btn:hover { border-color:#A855F7!important; color:#A855F7!important; background:rgba(168,85,247,.1)!important; transform:translateY(-3px)!important; box-shadow:0 8px 20px rgba(168,85,247,.15)!important; }
.login-social-btn.wechat:hover { border-color:#07C160!important; color:#07C160!important; background:rgba(7,193,96,.08)!important; box-shadow:0 8px 20px rgba(7,193,96,.15)!important; }
.login-social-btn.github:hover { border-color:#F1F0F5!important; color:#F1F0F5!important; background:rgba(255,255,255,.05)!important; }
.login-social-btn.google:hover { border-color:#EA4335!important; color:#EA4335!important; background:rgba(234,67,53,.08)!important; box-shadow:0 8px 20px rgba(234,67,53,.15)!important; }

.login-footer { text-align:center!important; margin-top:1.5rem!important; padding-top:1rem!important; border-top:1px solid rgba(168,85,247,.1)!important; }
.login-footer p { color:#6B6880!important; font-size:.75rem!important; font-family:'Inter',sans-serif!important; margin:0!important; }
.login-footer a { color:#A855F7!important; text-decoration:none!important; }

.login .privacy-policy-page-link { text-align:center!important; margin:1rem 0 0!important; }
.login .privacy-policy-page-link a { color:#6B6880!important; font-size:.8rem!important; }
.login .privacy-policy-page-link a:hover { color:#A855F7!important; }

/* Hide WP default elements we don't need */
body.login .language-switcher { display:none!important; }
body.login #login > p:first-child { display:none!important; }

@media(max-width:480px) {
    #login { margin:1rem auto!important; padding:1.5rem!important; border-radius:20px!important; }
    .login-page-title { font-size:1.15rem!important; }
}

/* ===== Daily Challenge ===== */
.daily-challenge-home-section { padding:4rem 0; background:var(--color-bg-secondary); }
.challenge-home-card { display:grid; grid-template-columns:1fr 320px; gap:2rem; background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:20px; padding:2.5rem; position:relative; overflow:hidden; }
.challenge-home-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#A855F7,#F472B6,#A855F7); background-size:200% 100%; animation:challengeGradient 3s ease infinite; }
@keyframes challengeGradient { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.challenge-home-left { display:flex; flex-direction:column; gap:1.25rem; }
.challenge-home-right { display:flex; flex-direction:column; gap:1.5rem; }
.challenge-home-meta { display:flex; gap:.75rem; flex-wrap:wrap; }
.challenge-difficulty { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:600; }
.challenge-difficulty.easy { background:rgba(52,211,153,.12); color:#34D399; border:1px solid rgba(52,211,153,.25); }
.challenge-difficulty.medium { background:rgba(251,191,36,.12); color:#FBBF24; border:1px solid rgba(251,191,36,.25); }
.challenge-difficulty.hard { background:rgba(248,113,113,.12); color:#F87171; border:1px solid rgba(248,113,113,.25); }
.challenge-language-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:600; background:rgba(168,85,247,.1); color:#A855F7; border:1px solid rgba(168,85,247,.2); }
.challenge-points-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:600; background:rgba(244,114,182,.1); color:#F472B6; border:1px solid rgba(244,114,182,.2); }
.challenge-home-title { font-size:1.4rem; font-weight:700; color:var(--color-text-primary); line-height:1.4; margin:0; }
.challenge-home-content { color:var(--color-text-secondary); font-size:.95rem; line-height:1.7; }
.challenge-home-options { display:flex; flex-direction:column; gap:.75rem; }
.challenge-option { display:flex; align-items:center; gap:12px; padding:14px 18px; background:rgba(168,85,247,.04); border:1px solid var(--color-border); border-radius:14px; cursor:pointer; transition:all .3s ease; }
.challenge-option:hover { border-color:var(--color-border-hover); background:rgba(168,85,247,.08); }
.challenge-option.selected { border-color:#A855F7; background:rgba(168,85,247,.12); box-shadow:0 0 20px rgba(168,85,247,.1); }
.challenge-option.correct { border-color:#34D399; background:rgba(52,211,153,.1); }
.challenge-option.wrong { border-color:#F87171; background:rgba(248,113,113,.1); }
.challenge-option input[type=radio] { display:none; }
.option-letter { width:32px; height:32px; border-radius:10px; background:rgba(168,85,247,.1); color:#A855F7; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; }
.challenge-option.selected .option-letter { background:#A855F7; color:#fff; }
.option-text { color:var(--color-text-primary); font-size:.9rem; }
.challenge-code-input { position:relative; }
.code-input-area { width:100%; padding:14px 18px; background:rgba(13,10,26,.8); border:1px solid var(--color-border); border-radius:14px; color:var(--color-text-primary); font-family:var(--font-mono); font-size:.9rem; resize:vertical; transition:border-color .3s ease; }
.code-input-area:focus { outline:none; border-color:#A855F7; box-shadow:0 0 0 3px rgba(168,85,247,.12); }
.challenge-home-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.challenge-home-actions .btn { padding:12px 24px; }
.challenge-hint-btn { font-size:.85rem; }
.challenge-home-hint { margin-top:.5rem; padding:12px 16px; background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.15); border-radius:12px; color:#FBBF24; font-size:.85rem; }
.challenge-home-hint.visible { display:block!important; }
.challenge-home-result { margin-top:1rem; padding:1.25rem; border-radius:14px; font-size:.95rem; }
.challenge-home-result.correct { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); color:#34D399; }
.challenge-home-result.wrong { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.25); color:#F87171; }
.challenge-result-explanation { margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.1); color:var(--color-text-secondary); font-size:.85rem; line-height:1.6; }
.challenge-countdown-card { background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(244,114,182,.08)); border:1px solid var(--color-border); border-radius:16px; padding:1.5rem; text-align:center; }
.countdown-label { color:var(--color-text-secondary); font-size:.8rem; margin-bottom:.5rem; text-transform:uppercase; letter-spacing:1px; }
.countdown-timer-large { font-family:var(--font-mono); font-size:2rem; font-weight:700; color:#A855F7; letter-spacing:2px; }
.countdown-sublabel { color:var(--color-text-muted); font-size:.75rem; margin-top:.5rem; }
.challenge-stats-card { display:flex; align-items:center; gap:1rem; background:var(--color-bg-tertiary); border:1px solid var(--color-border); border-radius:16px; padding:1.25rem; }
.challenge-stat { flex:1; text-align:center; }
.challenge-stat-value { display:block; font-size:1.5rem; font-weight:800; color:#A855F7; }
.challenge-stat-label { display:block; font-size:.75rem; color:var(--color-text-muted); margin-top:.25rem; }
.challenge-stat-divider { width:1px; height:40px; background:var(--color-border); }
.challenge-login-prompt { text-align:center; padding:1.5rem; background:var(--color-bg-tertiary); border:1px solid var(--color-border); border-radius:16px; }
.challenge-login-prompt i { font-size:2rem; color:var(--color-text-muted); margin-bottom:.75rem; display:block; }
.challenge-login-prompt p { color:var(--color-text-secondary); font-size:.85rem; margin-bottom:1rem; }
.challenge-empty-home { text-align:center; padding:3rem; color:var(--color-text-muted); }
.challenge-empty-home i { font-size:3rem; margin-bottom:1rem; display:block; }
.challenge-empty-home h3 { color:var(--color-text-secondary); margin-bottom:.5rem; }

/* Daily Challenge - Shortcode Full Page */
.daily-challenge-section { max-width:800px; margin:0 auto; }
.challenge-card { background:var(--color-bg-card); border:1px solid var(--color-border); border-radius:20px; padding:2.5rem; position:relative; overflow:hidden; }
.challenge-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#A855F7,#F472B6,#A855F7); background-size:200% 100%; animation:challengeGradient 3s ease infinite; }
.challenge-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.challenge-badge { display:flex; align-items:center; gap:8px; padding:8px 16px; background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(244,114,182,.1)); border-radius:20px; color:#A855F7; font-weight:700; font-size:.9rem; }
.challenge-countdown { display:flex; align-items:center; gap:6px; color:var(--color-text-muted); font-size:.85rem; }
.challenge-countdown .countdown-timer { font-family:var(--font-mono); font-weight:600; color:#F472B6; }
.challenge-meta-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.challenge-title { font-size:1.5rem; font-weight:700; color:var(--color-text-primary); margin-bottom:1rem; line-height:1.4; }
.challenge-content { color:var(--color-text-secondary); font-size:.95rem; line-height:1.8; margin-bottom:1.5rem; }
.challenge-content pre { background:rgba(13,10,26,.8); border:1px solid var(--color-border); border-radius:12px; padding:1rem; overflow-x:auto; margin:1rem 0; }
.challenge-content code { font-family:var(--font-mono); font-size:.85rem; color:#A855F7; }
.challenge-hint { margin:1rem 0; }
.hint-toggle { background:none; border:1px solid rgba(251,191,36,.25); color:#FBBF24; padding:8px 16px; border-radius:10px; cursor:pointer; font-size:.85rem; transition:all .3s ease; }
.hint-toggle:hover { background:rgba(251,191,36,.08); }
.hint-content { display:none; margin-top:.75rem; padding:12px 16px; background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.15); border-radius:12px; color:#FBBF24; font-size:.85rem; line-height:1.6; }
.challenge-hint.hint-visible .hint-content { display:block; }
.challenge-actions { margin-top:1.5rem; }
.challenge-result { margin-top:1.25rem; padding:1.25rem; border-radius:14px; }
.challenge-result.correct-result { background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.25); }
.challenge-result.wrong-result { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.25); }
.challenge-empty { text-align:center; padding:3rem; color:var(--color-text-muted); }
.challenge-empty i { font-size:3rem; margin-bottom:1rem; display:block; }

@media(max-width:768px) {
    .challenge-home-card { grid-template-columns:1fr; }
    .challenge-home-right { flex-direction:row; }
    .challenge-countdown-card { flex:1; }
    .challenge-stats-card { flex:1; }
    .challenge-home-title { font-size:1.15rem; }
    .countdown-timer-large { font-size:1.5rem; }
}
@media(max-width:480px) {
    .challenge-home-card { padding:1.5rem; }
    .challenge-home-right { flex-direction:column; }
}