/* ===== Guide Article Styles ===== */
/* Dedicated styles for guide article pages */

/* Page Layout */
.guide-content {
    padding: 3rem 0 4rem;
}

.guide-content .container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    max-width: 1200px;
}

/* Article Styles */
.guide-article {
    min-width: 0;
}

/* Article Header */
.article-header {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.article-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1.5rem;
}

.article-icon.algo {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.article-icon.code {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.article-icon.finance {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.article-icon.math {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
}

.guide-article h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.article-intro {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-meta i {
    color: var(--primary-color);
}

/* Table of Contents */
.toc {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
}

.toc h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.toc h3 i {
    color: var(--primary-color);
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1.5rem;
}

.toc li {
    margin: 0;
}

.toc a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.toc a::before {
    content: '→';
    color: var(--primary-color);
    opacity: 0;
    transform: translateX(-10px);
    transition: all var(--transition-fast);
}

.toc a:hover {
    color: var(--primary-color);
}

.toc a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Content Sections */
.content-section {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
}

.content-section h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
}

.content-section h2 i {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.content-section > p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Concept Card */
.concept-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.concept-card.highlight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(14, 165, 233, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

.concept-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.concept-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.concept-card p:last-child {
    margin-bottom: 0;
}

.concept-card .big-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    padding: 1rem 0;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-list li i {
    color: #10b981;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Numbered Steps */
.numbered-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.numbered-steps li {
    counter-increment: step-counter;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.numbered-steps li:last-child {
    border-bottom: none;
}

.numbered-steps li::before {
    content: counter(step-counter);
    min-width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Code Block */
.code-block {
    background: #1e1e2e;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-header span {
    color: #a6adc8;
    font-size: 0.85rem;
    font-weight: 500;
}

.copy-btn {
    background: transparent;
    border: none;
    color: #a6adc8;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.code-block pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.code-block code {
    font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cdd6f4;
}

/* Complexity Info */
.complexity-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.complexity-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.complexity-item .label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.complexity-item .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: var(--font-mono);
}

/* Comparison Table */
.comparison-table {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.comparison-table td {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table tr:hover td {
    background: var(--bg-secondary);
}

.comparison-table .total-row td {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

.text-success {
    color: #10b981 !important;
}

.text-danger {
    color: #ef4444 !important;
}

/* Tip Box */
.tip-box {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.tip-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #b45309;
    margin-bottom: 0.75rem;
}

.tip-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tip-box li {
    padding: 0.4rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
}

.tip-box li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #f59e0b;
    font-weight: bold;
}

/* Warning Box */
.warning-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.warning-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 0.75rem;
}

.warning-box p {
    color: var(--text-secondary);
    margin: 0;
}

.warning-box ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.warning-box li {
    padding: 0.4rem 0;
    color: var(--text-secondary);
}

/* Formula Box */
.formula-box {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #bae6fd;
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.formula-box h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 1rem;
}

.formula {
    font-family: 'Times New Roman', serif;
    font-size: 1.75rem;
    color: var(--text-primary);
    padding: 1rem 0;
}

.formula sup {
    font-size: 0.75em;
}

.formula sub {
    font-size: 0.75em;
}

.formula-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #bae6fd;
}

.formula-legend span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.formula-legend strong {
    color: var(--primary-color);
}

/* Example Calculation */
.example-calculation {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.example-calculation h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.example-calculation h4 i {
    color: var(--primary-color);
}

.calc-problem {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.calc-problem p {
    margin: 0;
    color: var(--text-secondary);
}

.calc-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calc-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.calc-step .step-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-light);
    min-width: 80px;
}

.calc-step .step-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.calc-step .step-value.highlight {
    color: var(--primary-color);
    font-weight: 600;
}

.calc-insight {
    margin-top: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border-radius: var(--radius-md);
    color: #059669;
    font-size: 0.95rem;
}

.calc-insight i {
    margin-right: 0.5rem;
}

/* Phase Steps */
.phase-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.phase-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Execution Steps */
.execution-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.exec-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.exec-step:hover {
    background: var(--bg-tertiary);
    transform: translateX(5px);
}

.exec-step .step-num {
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.exec-step .step-text {
    color: var(--text-secondary);
}

/* Concept Grid */
.concept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.concept-item {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.concept-item .concept-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.concept-item h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.concept-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Context Types */
.context-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.context-type {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.type-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: white;
}

.type-icon.global {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.type-icon.function {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.type-icon.eval {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.context-type h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.context-type p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Visual Demo */
.visual-demo {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.demo-header {
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.demo-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.stack-demo {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    align-items: flex-end;
}

.stack-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

.stack-frame {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
}

.stack-labels {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
}

.stack-labels span {
    padding: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Queue Comparison */
.queue-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.queue-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.queue-card.macro {
    border-top: 4px solid #6366f1;
}

.queue-card.micro {
    border-top: 4px solid #10b981;
}

.queue-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.queue-card.macro h4 i {
    color: #6366f1;
}

.queue-card.micro h4 i {
    color: #10b981;
}

.queue-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.queue-card li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.queue-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.queue-card .priority {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-md);
    color: #059669;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Scope Types */
.scope-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.scope-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.scope-card.global {
    border-top: 4px solid #6366f1;
}

.scope-card.function {
    border-top: 4px solid #10b981;
}

.scope-card.block {
    border-top: 4px solid #f59e0b;
}

.scope-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.scope-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.code-snippet {
    padding: 0.75rem;
    background: #1e1e2e;
    border-radius: var(--radius-md);
}

.code-snippet code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: #cdd6f4;
}

/* Use Cases */
.use-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.use-case {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.use-case h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.use-case h4 i {
    color: var(--primary-color);
}

.use-case p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Anatomy Parts */
.anatomy-parts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.anatomy-part {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.anatomy-part.base {
    border-left: 4px solid #ef4444;
}

.anatomy-part.recursive {
    border-left: 4px solid #10b981;
}

.part-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.anatomy-part.base .part-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.anatomy-part.recursive .part-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.anatomy-part h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.anatomy-part p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Complexity Cards */
.complexity-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.complexity-card {
    padding: 1.25rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.complexity-card.excellent {
    border-left: 4px solid #10b981;
}

.complexity-card.good {
    border-left: 4px solid #22c55e;
}

.complexity-card.fair {
    border-left: 4px solid #f59e0b;
}

.complexity-card.poor {
    border-left: 4px solid #f97316;
}

.complexity-card.terrible {
    border-left: 4px solid #ef4444;
}

.complexity-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.complexity-badge {
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
}

.complexity-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.complexity-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.complexity-card .example {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
}

/* Decision Box */
.decision-box {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.decision-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.decision-box h4 i {
    color: var(--primary-color);
}

.decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.decision-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
}

.decision-card.positive {
    background: rgba(16, 185, 129, 0.1);
}

.decision-card.neutral {
    background: rgba(107, 114, 128, 0.1);
}

.decision-card.negative {
    background: rgba(239, 68, 68, 0.1);
}

.decision-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.decision-card.positive .decision-icon {
    color: #10b981;
}

.decision-card.neutral .decision-icon {
    color: #6b7280;
}

.decision-card.negative .decision-icon {
    color: #ef4444;
}

.decision-card h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.decision-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.decision-simple {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.decision-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
}

.decision-item.accept {
    background: rgba(16, 185, 129, 0.1);
}

.decision-item.reject {
    background: rgba(239, 68, 68, 0.1);
}

.decision-item .condition {
    font-weight: 500;
}

.decision-item.accept .action {
    color: #10b981;
    font-weight: 600;
}

.decision-item.reject .action {
    color: #ef4444;
    font-weight: 600;
}

/* Event Loop Visual */
.event-loop-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    margin-bottom: 1.5rem;
}

.loop-component {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    min-width: 140px;
}

.loop-component .component-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.25rem;
}

.loop-component h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.loop-component p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.loop-arrow {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* TVM Reasons */
.tvm-reasons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.reason-card {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.reason-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.reason-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.reason-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* DCF Table */
.dcf-table {
    margin-bottom: 1.5rem;
}

.dcf-table h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Comparison Visual */
.comparison-visual {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.comparison-visual h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.growth-comparison {
    display: flex;
    justify-content: center;
    gap: 3rem;
    height: 200px;
    align-items: flex-end;
}

.growth-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px;
}

.growth-bar .bar-fill {
    width: 60px;
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 0.5rem;
}

.growth-bar.simple .bar-fill {
    background: linear-gradient(180deg, #94a3b8, #64748b);
}

.bar-label {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.comparison-note {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Related Tools Section */
.related-tools-section {
    margin-top: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
}

.related-tools-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.related-tools-section h2 i {
    color: var(--primary-color);
}

.related-tools-section > p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.related-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.related-tool-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: inherit;
}

.related-tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.related-tool-card.featured {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(14, 165, 233, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

.related-tool-card .tool-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.related-tool-card.featured .tool-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    margin-bottom: 0;
}

.related-tool-card .tool-info {
    flex: 1;
}

.related-tool-card .tool-info h4 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.related-tool-card .tool-info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tool-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.tool-features-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tool-features-list li i {
    color: #10b981;
    font-size: 0.75rem;
}

.related-tool-card .tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    transition: gap var(--transition-fast);
}

.related-tool-card:hover .tool-cta {
    gap: 0.75rem;
}

.related-tool-card.featured .tool-cta {
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 768px) {
    .related-tools {
        grid-template-columns: 1fr;
    }
    
    .related-tool-card.featured {
        flex-direction: column;
        gap: 1rem;
    }
    
    .related-tool-card.featured .tool-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .tool-features-list {
        grid-template-columns: 1fr;
    }
}

/* Guide CTA */
.guide-cta {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-align: center;
    color: white;
    margin-top: 3rem;
}

.guide-cta h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.guide-cta p {
    font-size: 1.05rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.guide-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: white;
    color: #6366f1;
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.guide-cta .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.cta-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Sidebar */
.guide-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.sidebar-widget h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.related-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-links li {
    margin-bottom: 0.5rem;
}

.related-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.related-links a i {
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.related-links a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.sidebar-widget.quick-ref .ref-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-widget.quick-ref .ref-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sidebar-widget.quick-ref .ref-list li:last-child {
    border-bottom: none;
}

.sidebar-widget.quick-ref .ref-list strong {
    color: var(--primary-color);
}

/* Breadcrumb */
.breadcrumb-section {
    background: var(--bg-secondary);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--text-secondary);
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--primary-color);
}

.breadcrumb i {
    font-size: 0.7rem;
    color: var(--text-light);
}

.breadcrumb span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .guide-content .container {
        grid-template-columns: 1fr;
    }

    .guide-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .sidebar-widget {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .guide-article h1 {
        font-size: 2rem;
    }

    .toc ul {
        grid-template-columns: 1fr;
    }

    .context-types,
    .scope-types,
    .concept-grid,
    .complexity-cards {
        grid-template-columns: 1fr;
    }

    .queue-comparison,
    .anatomy-parts,
    .use-cases {
        grid-template-columns: 1fr;
    }

    .decision-grid {
        grid-template-columns: 1fr;
    }

    .tvm-reasons {
        grid-template-columns: 1fr;
    }

    .event-loop-visual {
        flex-direction: column;
    }

    .loop-arrow {
        transform: rotate(90deg);
    }

    .growth-comparison {
        gap: 2rem;
    }

    .guide-sidebar {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .article-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .guide-article h1 {
        font-size: 1.75rem;
    }

    .article-intro {
        font-size: 1.05rem;
    }

    .content-section h2 {
        font-size: 1.5rem;
    }

    .formula {
        font-size: 1.25rem;
    }

    .formula-legend {
        flex-direction: column;
        gap: 0.5rem;
    }

    .stack-demo {
        flex-direction: column;
        align-items: stretch;
    }

    .stack-labels {
        display: none;
    }
}

/* ===== Additional Styles for New Guide Pages ===== */

/* Use Cases Grid */
.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.use-case-card {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.use-case-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.use-case-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.use-case-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.use-case-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Step Breakdown */
.step-breakdown {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.step-breakdown h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
}

.step-breakdown h4 i {
    color: var(--primary-color);
}

.numbered-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-light);
}

.numbered-step:last-child {
    border-bottom: none;
}

.numbered-step .step-num {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.numbered-step .step-content h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.numbered-step .step-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Methods Comparison */
.methods-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.method-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
}

.method-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.method-card h4 i {
    color: var(--primary-color);
}

.method-card .formula.small {
    font-size: 1.1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: 1rem;
}

.method-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.method-example {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Calculation Table */
.calc-table {
    overflow-x: auto;
    margin-bottom: 1rem;
}

.calc-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.calc-table th,
.calc-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.calc-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.calc-table td {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.calc-table tr:last-child td {
    border-bottom: none;
}

.calc-table .highlight-row td {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
    color: #059669;
    font-weight: 500;
}

.calc-table .total-row td {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-primary);
}

/* Visual Timeline */
.visual-timeline {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.timeline-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.timeline-invested {
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: var(--radius-lg);
    text-align: center;
}

.timeline-invested span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
}

.timeline-invested strong {
    font-size: 1.1rem;
}

.timeline-recovery {
    display: flex;
    flex: 1;
    gap: 0.5rem;
}

.recovery-segment {
    flex: 1;
    padding: 1rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-radius: var(--radius-md);
    text-align: center;
    position: relative;
}

.recovery-segment span {
    display: block;
    font-size: 0.7rem;
    opacity: 0.9;
}

.recovery-segment strong {
    font-size: 0.95rem;
}

.recovery-segment.payback-point {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.payback-marker {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #f59e0b;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.timeline-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 1.5rem;
}

/* Operations Grid */
.operations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.operation-card {
    text-align: center;
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.op-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.operation-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.operation-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.op-example {
    padding: 0.75rem;
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Discriminant Info */
.discriminant-info {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.discriminant-info h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.discriminant-info h4 i {
    color: var(--primary-color);
}

.discriminant-cases {
    display: flex;
    gap: 1rem;
}

.case-card {
    flex: 1;
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.case-card.positive {
    background: rgba(16, 185, 129, 0.1);
}

.case-card.zero {
    background: rgba(107, 114, 128, 0.1);
}

.case-card.negative {
    background: rgba(239, 68, 68, 0.1);
}

.case-condition {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.case-result {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Scenario Analysis */
.scenario-analysis {
    margin-bottom: 1.5rem;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.scenario-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-align: center;
}

.scenario-card.pessimistic {
    border-top: 4px solid #ef4444;
}

.scenario-card.base {
    border-top: 4px solid #6b7280;
}

.scenario-card.optimistic {
    border-top: 4px solid #10b981;
}

.scenario-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.scenario-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.scenario-inputs {
    text-align: left;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.scenario-inputs .input-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 0.25rem 0;
}

.scenario-result {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.scenario-result .result-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
}

.scenario-result .result-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.scenario-result .result-value.positive {
    color: #10b981;
}

.scenario-result .result-value.negative {
    color: #ef4444;
}

/* ===== Logic & Proofs Styles ===== */

/* Logic Operators Grid */
.logic-operators {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.operator-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-fast);
}

.operator-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.op-symbol {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.operator-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.operator-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.truth-mini {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Proof Structure */
.proof-structure {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.proof-structure h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.structure-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.structure-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.structure-step .step-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Proof Examples */
.proof-example {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.proof-example h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.proof-example h4 i {
    color: var(--primary-color);
}

.theorem-box {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.1));
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.theorem-box strong {
    color: var(--primary-color);
}

.proof-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.proof-line {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    align-items: center;
}

.proof-line.contradiction {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.line-num {
    width: 28px;
    height: 28px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
}

.line-content {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.line-reason {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
}

.proof-section-header {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Induction Visual */
.induction-visual {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.induction-visual h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.domino-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.domino {
    width: 50px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    position: relative;
}

.domino.base {
    background: linear-gradient(135deg, #10b981, #059669);
}

.domino.inductive {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.domino-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.domino-arrow {
    font-size: 1.25rem;
    color: var(--text-light);
}

.induction-visual > p {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Tips Grid */
.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.tip-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-fast);
}

.tip-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.tip-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
    color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
}

.tip-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.tip-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== Physics Formula Styles ===== */

/* Formulas Grid */
.formulas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.formula-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.formula-card .formula {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
}

.formula-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Derivation Box */
.derivation-box {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.derivation-box h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.derivation-box h4 i {
    color: var(--primary-color);
}

.derivation-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deriv-step {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.deriv-step .step-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-light);
    min-width: 100px;
}

.deriv-step .step-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.deriv-step .step-content.highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* Laws Grid */
.laws-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.law-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.law-card.highlight {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(14, 165, 233, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

.law-number {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.law-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.law-card .formula {
    font-size: 1.5rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.law-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.law-implication {
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.law-implication strong {
    color: var(--primary-color);
}

/* Formula Group/Items */
.formula-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formula-item {
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
    text-align: left;
}

.formula-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    display: block;
}

.formula-item .formula {
    font-size: 1.25rem;
    padding: 0.5rem 0;
}

.formula-note {
    font-size: 0.8rem;
    color: var(--text-light);
    display: block;
}

/* Collision Types */
.collision-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.collision-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.collision-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.collision-card > p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.collision-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collision-card li {
    padding: 0.4rem 0;
    padding-left: 1.25rem;
    position: relative;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.collision-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* ===== Chemistry Calculation Styles ===== */

/* Mole Triangle */
.mole-triangle {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.mole-triangle h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.triangle-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.triangle-center {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 1.1rem;
}

.triangle-corner {
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-align: center;
}

.triangle-corner span:first-child {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.triangle-corner .conversion {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Balancing Steps */
.balancing-steps {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.balancing-steps h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.balancing-steps h4 i {
    color: var(--primary-color);
}

/* Stoichiometry Roadmap */
.stoich-roadmap {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.stoich-roadmap h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.roadmap-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roadmap-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-box {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
}

.step-box.result {
    background: linear-gradient(135deg, #10b981, #059669);
}

.step-arrow {
    font-size: 0.75rem;
    color: var(--text-light);
    padding: 0 0.5rem;
}

/* Related Concepts */
.related-concepts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.related-concept {
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.related-concept h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.related-concept p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Gas Laws Grid */
.gas-laws-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.gas-law-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.gas-law-card.combined {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(14, 165, 233, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

.gas-law-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.gas-law-card .formula {
    font-size: 1.25rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.gas-law-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ===== Sensitivity Analysis Styles ===== */

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}

.benefit-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: relative;
    padding-left: 4rem;
}

.benefit-number {
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.benefit-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.benefit-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Data Table Wrapper */
.data-table-wrapper {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.data-table-wrapper h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.data-table-wrapper h4 i {
    color: var(--primary-color);
}

/* Matrix Table */
.matrix-table {
    overflow-x: auto;
}

.matrix-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.matrix-table th,
.matrix-table td {
    padding: 0.75rem 1rem;
    text-align: center;
    border: 1px solid var(--border-color);
}

.matrix-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.matrix-table td {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.matrix-table td.positive {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-weight: 500;
}

.matrix-table td.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    font-weight: 500;
}

.calc-table td.positive {
    color: #059669;
    font-weight: 500;
}

.calc-table td.negative {
    color: #dc2626;
    font-weight: 500;
}

/* Tornado Chart */
.tornado-visual {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.tornado-visual h4 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.tornado-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tornado-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    width: 120px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: right;
    flex-shrink: 0;
}

.bar-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.bar-negative {
    background: linear-gradient(90deg, #ef4444, #f87171);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: right;
}

.bar-positive {
    background: linear-gradient(90deg, #34d399, #10b981);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.75rem;
    font-weight: 500;
}

.chart-note {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Scenarios Comparison */
.scenarios-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.scenarios-comparison .scenario-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.scenarios-comparison .scenario-card.pessimistic {
    border-top: 4px solid #ef4444;
}

.scenarios-comparison .scenario-card.base {
    border-top: 4px solid #6b7280;
}

.scenarios-comparison .scenario-card.optimistic {
    border-top: 4px solid #10b981;
}

.scenario-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.scenario-header i {
    font-size: 1.5rem;
}

.scenario-card.pessimistic .scenario-header i {
    color: #ef4444;
}

.scenario-card.base .scenario-header i {
    color: #6b7280;
}

.scenario-card.optimistic .scenario-header i {
    color: #10b981;
}

.scenario-header h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.scenarios-comparison .scenario-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: left;
}

.scenarios-comparison .scenario-card li {
    padding: 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.scenarios-comparison .scenario-card li:last-child {
    border-bottom: none;
}

/* ===== Payback Period Styles ===== */

/* Pros Cons Grid */
.pros-cons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pros-card,
.cons-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.pros-card {
    border-top: 4px solid #10b981;
}

.cons-card {
    border-top: 4px solid #ef4444;
}

.pros-card h4,
.cons-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pros-card h4 i {
    color: #10b981;
}

.cons-card h4 i {
    color: #ef4444;
}

.pros-card ul,
.cons-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pros-card li,
.cons-card li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.pros-card li:last-child,
.cons-card li:last-child {
    border-bottom: none;
}

.pros-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.cons-card li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #ef4444;
    font-weight: bold;
}

/* Decision Rules */
.decision-rules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.rule-card {
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    text-align: center;
}

.rule-card.accept {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.rule-card.reject {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rule-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.rule-card.accept .rule-icon {
    color: #10b981;
}

.rule-card.reject .rule-icon {
    color: #ef4444;
}

.rule-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.rule-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.rule-example {
    font-size: 0.8rem;
    color: var(--text-light);
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-md);
}

/* Comparison Cards */
.comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.compare-card {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}

.compare-card.preferred {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(14, 165, 233, 0.05));
}

.compare-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.compare-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-card li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.compare-card li i.fa-check {
    color: #10b981;
}

.compare-card li i.fa-times {
    color: #ef4444;
}

.compare-card ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.compare-card ol li {
    counter-increment: step;
    padding-left: 2rem;
    position: relative;
}

.compare-card ol li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Responsive Adjustments for New Styles */
@media (max-width: 1024px) {
    .operations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .laws-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .use-cases-grid,
    .methods-comparison,
    .scenario-grid,
    .scenarios-comparison {
        grid-template-columns: 1fr;
    }
    
    .operations-grid,
    .logic-operators,
    .formulas-grid,
    .tips-grid,
    .collision-types,
    .gas-laws-grid,
    .benefits-grid,
    .pros-cons-grid,
    .decision-rules,
    .comparison-cards,
    .related-concepts {
        grid-template-columns: 1fr;
    }
    
    .discriminant-cases {
        flex-direction: column;
    }
    
    .timeline-bar {
        flex-direction: column;
    }
    
    .timeline-recovery {
        flex-direction: column;
    }
    
    .proof-line {
        grid-template-columns: 30px 1fr;
    }
    
    .proof-line .line-reason {
        grid-column: 2;
        margin-top: 0.25rem;
    }
    
    .domino-container {
        flex-wrap: wrap;
    }
    
    .roadmap-flow {
        flex-direction: column;
        align-items: stretch;
    }
    
    .roadmap-step {
        flex-direction: column;
    }
    
    .step-box {
        width: 100%;
        text-align: center;
    }
    
    .step-arrow {
        text-align: center;
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }
    
    .bar-label {
        width: 80px;
        font-size: 0.75rem;
    }
    
    .triangle-visual {
        grid-template-columns: 1fr;
    }
}