/* 异常处理动画样式 */
#exception-animation-container {
    display: flex;
    gap: 20px;
}

#exception-animation-container > div:first-child {
    width: 55%;
}

#exception-animation-container > div:last-child {
    width: 45%;
}

#code-container {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
}

.code-line {
    transition: all 0.3s ease;
    border-radius: 4px;
    padding: 4px 0;
}

.code-line.highlighted {
    background: rgba(251, 191, 36, 0.2);
    border-left: 3px solid #fbbf24;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-line.error-highlighted {
    background: rgba(239, 68, 68, 0.2);
    border-left: 3px solid #ef4444;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.code-line.success-highlighted {
    background: rgba(34, 197, 94, 0.2);
    border-left: 3px solid #22c55e;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

.code-line.catch-highlighted {
    background: rgba(59, 130, 246, 0.2);
    border-left: 3px solid #3b82f6;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.code-line.throw-highlighted {
    background: rgba(251, 146, 60, 0.2);
    border-left: 3px solid #fb923c;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(251, 146, 60, 0.2);
}

.code-line.finally-highlighted {
    background: rgba(167, 139, 250, 0.2);
    border-left: 3px solid #a78bfa;
    margin-left: -10px;
    padding-left: 7px !important;
    box-shadow: 0 2px 4px rgba(167, 139, 250, 0.2);
}

.step-detail {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.step-detail.active {
    border-left: 3px solid #3b82f6;
    transform: translateX(5px);
}

#step-description {
    transition: all 0.3s ease;
}

#explanation {
    transition: all 0.3s ease;
}

#code-buttons {
    margin-top: 15px;
    text-align: center;
}

#startAnimation, #resetAnimation {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

#resetAnimation {
    background: #6b7280;
    margin-left: 10px;
}

#explanation {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    padding: 20px;
    border-radius: 8px;
    min-height: 300px;
    transition: all 0.3s ease;
}

#explanation h4 {
    margin-top: 0;
    color: #1e40af;
}

#step-description {
    margin: 10px 0;
    color: #64748b;
    transition: all 0.3s ease;
}

#step-details {
    margin-top: 15px;
    font-size: 14px;
}

.step-detail {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    padding: 10px;
    border-radius: 4px;
    margin: 5px 0;
}

.step-detail[data-step="1"] {
    background: #dbeafe;
}

.step-detail[data-step="2"] {
    background: #fef3c7;
}

.step-detail[data-step="3"] {
    background: #dcfce7;
}

.step-detail[data-step="4"] {
    background: #fee2e2;
}

.step-detail[data-step="5"],
.step-detail[data-step="6"] {
    background: #e0e7ff;
}

.step-detail[data-step="7"] {
    background: #fee2e2;
}

.step-detail.active {
    border-left: 3px solid #3b82f6;
    transform: translateX(5px);
}

#key-concepts {
    margin-top: 15px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 15px;
    border-radius: 8px;
}

#key-concepts h5 {
    margin: 0 0 10px 0;
    color: #991b1b;
}

#key-concepts ul {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

/* 动画按钮样式 */
#startAnimation, #resetAnimation {
    transition: all 0.3s ease;
}

#startAnimation:hover, #resetAnimation:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

#startAnimation:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

#startAnimation.step-mode {
    background: #10b981;
}

#startAnimation.step-mode:hover {
    background: #059669;
}

/* 执行进度指示器 */
#step-progress {
    font-size: 12px;
    color: #6b7280;
    margin-top: 8px;
    text-align: center;
}

/* 代码行缩进样式 */


#code-container .code-line:nth-child(2),
#code-container .code-line:nth-child(13) {
    /* main 方法 - 20px 缩进 */
    padding-left: 20px;
}

#code-container .code-line:nth-child(3),
#code-container .code-line:nth-child(9),
#code-container .code-line:nth-child(11) {
    /* try/catch/finally 结构 - 40px 缩进 */
    padding-left: 40px;
}

#code-container .code-line:nth-child(4) {
    /* 方法调用 - 60px 缩进 */
    padding-left: 60px;
}

#code-container .code-line:nth-child(5) {
    /* 变量使用 - 80px 缩进 */
    padding-left: 80px;
}

#code-container .code-line:nth-child(7),
#code-container .code-line:nth-child(8),
#code-container .code-line:nth-child(10) {
    /* catch 块内容 - 60px 缩进 */
    padding-left: 60px;
}

#code-container .code-line:nth-child(12) {
    /* 不可达代码 - 40px 缩进 */
    padding-left: 40px;
}

/* 代码语法高亮颜色 */
.code-keyword { color: #a78bfa; }    /* try, catch, finally, } */
.code-method { color: #fbbf24; }     /* divide 方法调用 */
.code-variable { color: #64748b; }   /* result */
.code-string { color: #34d399; }     /* "资源清理完成" */
.code-comment { color: #7dd3c0; }    /* class, public static void main */
.code-output { color: #60a5fa; }     /* System.out.println 输出 */
.code-exception { color: #fb923c; }  /* throw new RuntimeException */
.code-unreachable { color: #ef4444; } /* 不可达代码 */

/* 步骤详情默认隐藏 */
.step-detail {
    display: none;
}