/* ======================================================= */
/* 1. GLOBAL BASE & THEME (Dark & Techy) */
/* ======================================================= */

body {
    background: #0D1117; /* Dark background color (GitHub Dark Blue/Gray) */
    color: #E6E6E6;      /* Light text color */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* Subtle background image/gradient for 'techy' feel, matching the Viewer */
    background-image: radial-gradient(circle at 10% 20%, rgba(31, 23, 102, 0.2) 0%, rgba(13, 17, 23, 1) 90%);
    background-attachment: fixed;
}

/* Core Glassmorphism Effect - Used across all cards/containers */
.glassmorphism-card {
    background: rgba(18, 18, 18, 0.3); /* Semi-transparent black with low opacity */
    backdrop-filter: blur(10px);        /* The key to the 'frosted glass' look */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for definition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Accent Colors */
a { color: #4CAF50; } /* Tech Green for links */
.special-tag { color: #00BCD4; } /* Cyan/Blue for special categories like Gaming */

/* ======================================================= */
/* 2. ARTICLE LAYOUT & HERO */
/* ======================================================= */

.guide-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.guide-hero {
    padding: 40px;
    margin-bottom: 40px;
    /* Inherits .glassmorphism-card */
}

.hero-main-title {
    font-size: 2.5em;
    margin: 0 0 15px 0;
    color: #E6E6E6;
}

.hero-summary {
    font-size: 1.15em;
    color: #B0B0B0;
    margin-bottom: 25px;
}

.hero-meta span {
    display: inline-block;
    font-size: 0.9em;
    color: #888;
    margin-right: 20px;
}

/* ======================================================= */
/* 3. CONTENT WRAPPER & TOC (Sidebar) */
/* ======================================================= */

.guide-content-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.toc-sidebar {
    position: sticky;
    top: 20px;
    flex: 0 0 250px;
    height: fit-content;
    padding: 20px;
    border-left: 3px solid #4CAF50; /* Accent line */
    /* Inherits .glassmorphism-card */
}

.toc-sidebar h2 {
    font-size: 1.3em;
    margin-top: 0;
    color: #4CAF50;
}

.toc-sidebar nav a {
    display: block;
    color: #B0B0B0;
    text-decoration: none;
    padding: 5px 0;
    font-size: 0.95em;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.toc-sidebar nav a:hover {
    color: #E6E6E6;
    padding-left: 5px;
    transition: padding 0.1s;
}

/* ======================================================= */
/* 4. GUIDE BODY & ELEMENTS */
/* ======================================================= */

.guide-body {
    flex-grow: 1;
    max-width: 700px;
}

.guide-body h2 {
    font-size: 1.8em;
    margin-top: 40px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
    color: #E6E6E6;
}

.guide-body p {
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Code Blocks */
.code-block {
    padding: 15px;
    margin: 25px 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    overflow-x: auto;
    color: #00BCD4; /* Cyan color for code */
    /* Inherits .glassmorphism-card */
}

/* Call-to-Action Box */
.cta-box {
    margin: 40px 0;
    padding: 30px;
    text-align: center;
    border-left: 5px solid #00BCD4; /* Cyan accent for CTA */
    /* Inherits .glassmorphism-card */
}

.cta-box h3 {
    font-size: 1.6em;
    color: #00BCD4;
    margin-top: 0;
}

.cta-button {
    display: inline-block;
    padding: 12px 25px;
    margin-top: 15px;
    border-radius: 6px;
    background: #4CAF50;
    color: #0D1117;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s, transform 0.2s;
}

.cta-button:hover {
    background: #66BB6A;
    transform: translateY(-2px);
}

/* ======================================================= */
/* 5. RESPONSIVENESS */
/* ======================================================= */

@media (max-width: 900px) {
    .guide-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .toc-sidebar {
        position: static;
        flex: auto;
        border-left: none;
        border-bottom: 3px solid #4CAF50;
    }
    .guide-hero {
        padding: 30px 20px;
    }
}