.code-wrapper { padding: 24px; background: var(--bg-surface); }
.code-header { text-align: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
.code-title { margin: 0 0 10px 0; font-size: 1.8rem; color: var(--text-main); }
.code-subtitle { margin: 0; color: var(--text-muted); font-size: 1rem; }

.code-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 16px; background: var(--bg-body); padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.code-lang-selector { display: flex; align-items: center; gap: 8px; font-weight: bold; color: var(--text-main); }
.code-select { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font-size: 1rem; outline: none; cursor: pointer; }

.code-btn-group { display: flex; gap: 10px; flex-wrap: wrap; }
.code-btn { padding: 10px 20px; border-radius: 6px; font-size: 0.95rem; font-weight: bold; cursor: pointer; transition: 0.2s; border: none; }
.code-btn-primary { background: var(--primary-color); color: #fff; box-shadow: 0 4px 10px rgba(0, 102, 204, 0.2); }
.code-btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }
.code-btn-outline { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-main); }
.code-btn-outline:hover { border-color: var(--primary-color); color: var(--primary-color); }
.code-btn-danger { background: #fef2f2; border: 1px solid #fecaca; color: #ef4444; }
.code-btn-danger:hover { background: #fee2e2; }

.code-msg { font-size: 0.95rem; font-weight: bold; color: #10b981; }

.code-workspace { display: flex; gap: 20px; height: 500px; }
.code-panel { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-body); }
.code-panel-header { background: #f8fafc; padding: 12px 16px; font-weight: bold; color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

.code-textarea { flex: 1; border: none; padding: 16px; resize: none; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.95rem; line-height: 1.6; color: var(--text-main); background: transparent; outline: none; }
.output-area { background: #0f172a; color: #f8fafc; }

@media (max-width: 900px) {
    .code-workspace { flex-direction: column; height: auto; }
    .code-panel { height: 350px; }
}

/* 暗黑模式适配 */
[data-theme="dark"] .code-toolbar, [data-theme="dark"] .code-panel { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .code-select, [data-theme="dark"] .code-btn-outline { background: #0f172a; border-color: #334155; color: #f8fafc; }
[data-theme="dark"] .code-panel-header { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .code-textarea { color: #f8fafc; }
[data-theme="dark"] .code-btn-danger { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.2); }