/* 课件专用样式 */
.slide-content {
    max-width: 1200px;
    margin: 0 auto;
}

.concept-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.concept-item {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.concept-item h3 {
    margin-top: 0;
    font-size: 22px;
    margin-bottom: 15px;
}

.concept-item ul {
    list-style: none;
    padding: 0;
}

.concept-item li {
    margin: 10px 0;
    padding-left: 25px;
    position: relative;
}

.concept-item li:before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: bold;
}

.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.before,
.after {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.before {
    border-left: 5px solid #ef4444;
}

.after {
    border-left: 5px solid #10b981;
}

.before h3,
.after h3 {
    margin-top: 0;
    text-align: center;
    font-size: 20px;
}

.hierarchy-diagram {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
}

.interface-level,
.subinterface-level,
.implementation-level {
    margin: 20px 0;
}

.interface-level h3,
.subinterface-level h3,
.implementation-level h3 {
    text-align: center;
    color: #1e293b;
    margin-bottom: 15px;
}

.interface-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.interface-box {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.interface-box.map {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.subinterface-boxes {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.subinterface-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 10px 0 0 0;
}

.subinterface-group h4 {
    margin: 0 0 10px 0;
    color: #334155;
    text-align: center;
}

.subinterface-box {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.relation-tag {
    display: inline-block;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fefefe;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
}

.impl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.relationship-note {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.relationship-note .badge {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
}

.impl-group {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e2e8f0;
}

.impl-group h4 {
    margin: 0 0 8px 0;
    color: #1e293b;
}

.impl-group span {
    color: #64748b;
    font-size: 14px;
}

.family-intro {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 15px;
    padding: 25px;
    margin: 30px 0;
    border-left: 5px solid #f59e0b;
}

.family-intro h3 {
    margin-top: 0;
    color: #92400e;
}

.selection-guide {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.guide-item {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #3b82f6;
}

.guide-item h4 {
    margin-top: 0;
    color: #1e293b;
}

.quick-reference {
    background: #1e293b;
    color: #943737;
    border-radius: 15px;
    padding: 25px;
    margin: 30px 0;
}

.quick-reference h3 {
    margin-top: 0;
    text-align: center;
}

.reference-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    color: #1e293b;
}

.reference-table th {
    background: #3b82f6;
    color: white;
    padding: 15px;
    text-align: left;
}

.reference-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
}

.highlight {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    padding: 3px 8px;
    border-radius: 15px;
    font-weight: bold;
    color: #92400e;
}

.practice-section {
    background: #f8fafc;
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    border-left: 5px solid #10b981;
}

.practice-section h3 {
    margin-top: 0;
    color: #064e3b;
}

.thinking-box {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    border-left: 4px solid #f59e0b;
}

.thinking-box h4 {
    margin-top: 0;
    color: #92400e;
}

.conclusion {
    background: linear-gradient(135deg, #c96232, #c36d23);
    border-radius: 15px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
    border-left: 5px solid #10b981;
}

.conclusion h3 {
    margin-top: 0;
    color: #064e3b;
    font-size: 24px;
}

.emoji-large {
    font-size: 48px;
    display: block;
    margin: 20px 0;
}

.code-block {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
    overflow-x: auto;
}

.code-block .comment {
    color: #64748b;
    font-style: italic;
}

.code-block .keyword {
    color: #f59e0b;
    font-weight: bold;
}

.code-block .string {
    color: #10b981;
}

.key-point {
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
}

.key-point strong {
    color: #dc2626;
}