/* Advanced Tips specific styles */

.page-header {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: var(--white);
    padding: var(--space-16) 0 var(--space-12) 0;
}

/* Expert Badges */
.expert-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}

.badge-icon {
    font-size: 2rem;
}

.badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Advanced Navigator */
.advanced-navigator {
    padding: var(--space-12) 0;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.nav-categories {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.category-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    color: var(--gray-700);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.category-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed;
}

.category-btn.active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: var(--white);
}

.cat-icon {
    font-size: 1.2rem;
}

/* Advanced Sections */
.advanced-section {
    display: none;
    padding: var(--space-16) 0;
    background: var(--white);
}

.advanced-section.active {
    display: block;
}

.section-intro {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-intro h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.section-intro p {
    font-size: 1.125rem;
    color: var(--gray-600);
    margin: 0;
}

/* Optimization Dashboard */
.optimization-dashboard {
    display: grid;
    gap: var(--space-8);
}

.optimization-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.optimization-card.featured {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.card-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.complexity-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
}

.complexity-badge.expert {
    background: #dc2626;
}

.complexity-badge.extreme {
    background: #7c2d12;
}

.complexity-badge.high {
    background: #ea580c;
}

/* Formula Display */
.formula-display {
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-6) 0;
}

.formula-display code {
    color: #22c55e;
    font-size: 1.125rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    display: block;
    text-align: center;
}

.formula-explanation {
    margin-top: var(--space-4);
}

.formula-explanation p {
    color: var(--gray-700);
    margin-bottom: var(--space-3);
    font-weight: 500;
}

.formula-explanation ul {
    margin: 0;
    padding-left: var(--space-6);
}

.formula-explanation li {
    color: var(--gray-600);
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

/* Mini Calculator */
.calculator-mini {
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-6);
}

.calculator-mini h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    text-align: center;
}

.calc-inputs-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--space-3);
    align-items: end;
}

.mini-input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.mini-btn {
    padding: var(--space-2) var(--space-4);
    background: #7c3aed;
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mini-btn:hover {
    background: #5b21b6;
}

.calc-result {
    text-align: center;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--white);
    border-radius: var(--radius-md);
    font-weight: 700;
    color: #7c3aed;
}

/* Optimization Techniques */
.optimization-techniques {
    margin-top: var(--space-12);
}

.optimization-techniques h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-8);
    text-align: center;
}

.techniques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.technique-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    transition: all var(--transition-normal);
}

.technique-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: #7c3aed;
}

.technique-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.technique-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.technique-content p {
    color: var(--gray-600);
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.code-block {
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.code-block code {
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
}

.technique-example {
    background: var(--gray-50);
    border-left: 4px solid #7c3aed;
    padding: var(--space-4);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin-top: var(--space-4);
}

.technique-example strong {
    color: #7c3aed;
    font-weight: 700;
}

/* Automation Strategies */
.automation-strategies {
    display: grid;
    gap: var(--space-8);
}

.strategy-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-8);
}

.showcase-item {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.showcase-item.macro {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.showcase-item.tools {
    border-color: #ea580c;
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}

.showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}

.showcase-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.difficulty-indicator {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
}

.difficulty-indicator.extreme {
    background: #7c2d12;
}

.difficulty-indicator.high {
    background: #ea580c;
}

/* Macro Examples */
.macro-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.macro-example h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.macro-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.step-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    border-left: 4px solid #dc2626;
}

.step-time {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #dc2626;
    min-width: 60px;
}

.step-action {
    color: var(--gray-700);
    font-weight: 500;
}

.macro-result,
.stack-result {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #22c55e;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-4);
    text-align: center;
}

.macro-result strong,
.stack-result strong {
    color: #16a34a;
    font-weight: 700;
}

/* Bot Features */
.bot-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.feature {
    color: var(--gray-700);
    font-weight: 500;
}

/* Tool Stack */
.tool-combinations h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
    text-align: center;
}

.tool-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tool-layer {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
}

.tool-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.tool-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tool-name {
    font-weight: 700;
    color: var(--gray-900);
}

.tool-effect {
    font-size: 0.875rem;
    color: #16a34a;
    font-weight: 600;
}

/* Meta Dashboard */
.meta-dashboard {
    display: grid;
    gap: var(--space-8);
}

.meta-tracker,
.trend-prediction {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.meta-tracker h3,
.trend-prediction h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
    text-align: center;
}

.meta-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.meta-stat {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.stat-icon {
    font-size: 1.5rem;
}

.stat-title {
    font-weight: 700;
    color: var(--gray-900);
}

.stat-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: var(--space-2);
}

.stat-adoption {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: var(--space-1);
}

.stat-winrate {
    font-size: 0.875rem;
    font-weight: 600;
    color: #16a34a;
}

/* Trend Predictions */
.predictions-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.prediction-item {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
}

.prediction-item.high-confidence {
    border-left-color: #16a34a;
}

.prediction-item.medium-confidence {
    border-left-color: #f59e0b;
}

.prediction-item.low-confidence {
    border-left-color: #dc2626;
}

.prediction-confidence {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    min-width: 80px;
}

.prediction-item.high-confidence .prediction-confidence {
    color: #16a34a;
}

.prediction-item.medium-confidence .prediction-confidence {
    color: #f59e0b;
}

.prediction-item.low-confidence .prediction-confidence {
    color: #dc2626;
}

.prediction-content h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-3);
}

.prediction-content p {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.prediction-timeframe {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-style: italic;
}

/* Community Builds */
.community-builds {
    padding: var(--space-16) 0;
    background: var(--gray-50);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin-bottom: var(--space-12);
}

.builds-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.build-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-normal);
}

.build-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.build-card.legendary {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.build-card.expert {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}

.build-card.master {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}

.build-header {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}

.build-rank {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.build-card.legendary .build-rank {
    background: #f59e0b;
}

.build-card.expert .build-rank {
    background: #7c3aed;
}

.build-card.master .build-rank {
    background: #dc2626;
}

.build-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.build-author {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.build-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.build-stat {
    text-align: center;
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.build-stat .stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: var(--space-1);
}

.build-stat .stat-label {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    font-weight: 500;
}

.build-description {
    margin-bottom: var(--space-6);
}

.build-description p {
    color: var(--gray-600);
    line-height: 1.6;
}

.build-requirements h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.req-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.req-item {
    color: var(--gray-600);
    font-weight: 500;
}

.build-btn {
    width: 100%;
    padding: var(--space-4);
    background: #7c3aed;
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.build-btn:hover {
    background: #5b21b6;
    transform: translateY(-1px);
}

/* Mathematical Models */
.mathematical-models {
    padding: var(--space-16) 0;
    background: var(--white);
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
}

.model-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: all var(--transition-normal);
}

.model-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: #7c3aed;
}

.model-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    text-align: center;
}

.model-formula {
    background: var(--gray-900);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-4) 0;
    text-align: center;
}

.model-formula code {
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 600;
}

.model-explanation {
    margin: var(--space-4) 0;
}

.model-explanation p {
    color: var(--gray-700);
    margin-bottom: var(--space-3);
    font-weight: 500;
}

.model-explanation ul {
    margin: 0;
    padding-left: var(--space-6);
}

.model-explanation li {
    color: var(--gray-600);
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.model-application {
    background: var(--white);
    border-left: 4px solid #7c3aed;
    padding: var(--space-4);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin-top: var(--space-4);
}

.model-application strong {
    color: #7c3aed;
    font-weight: 700;
}

/* Expert Resources */
.expert-resources {
    padding: var(--space-16) 0;
    background: var(--gray-50);
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
}

.resource-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: #7c3aed;
}

.resource-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

.resource-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
}

.resource-card p {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.resource-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    text-align: left;
}

.resource-features .feature {
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.875rem;
}

.resource-link {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    background: #7c3aed;
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-normal);
}

.resource-link:hover {
    background: #5b21b6;
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .calc-inputs-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .techniques-grid {
        grid-template-columns: 1fr;
    }
    
    .strategy-showcase {
        grid-template-columns: 1fr;
    }
    
    .meta-dashboard {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-categories {
        flex-direction: column;
        align-items: center;
    }
    
    .category-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .expert-badges {
        grid-template-columns: 1fr;
    }
    
    .meta-stats {
        grid-template-columns: 1fr;
    }
    
    .build-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prediction-item {
        flex-direction: column;
        text-align: center;
    }
    
    .models-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .section-intro h2,
    .section-title {
        font-size: 2rem;
    }
    
    .optimization-card,
    .showcase-item,
    .meta-tracker,
    .trend-prediction,
    .build-card,
    .model-card,
    .resource-card {
        padding: var(--space-6);
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }
    
    .tool-layer {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }
    
    .build-stats {
        grid-template-columns: 1fr;
    }
}

/* Animation for section transitions */
.advanced-section {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-slow);
}

.advanced-section.active {
    opacity: 1;
    transform: translateY(0);
}