.ide-page { background: #0f172a; }

.ide { display: flex; flex-direction: column; height: calc(100vh - 64px); color: #e2e8f0; }

/* ---------- 工具栏 ---------- */
.ide-toolbar {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: #111827; border-bottom: 1px solid #1f2937; flex-wrap: wrap;
}
.ide-title {
    flex: 0 0 240px; max-width: 320px; padding: 8px 12px; border-radius: 8px;
    border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: 14px; outline: none;
}
.ide-lang {
    padding: 8px 12px; border-radius: 8px; border: 1px solid #334155;
    background: #0f172a; color: #e2e8f0; font-size: 14px; outline: none;
}
.ide-tools { margin-left: auto; display: flex; gap: 8px; }
.ide-tools .btn-ghost { color: #cbd5e1; border-color: #334155; background: #0f172a; }
.ide-tools .btn-ghost:hover { color: #fff; border-color: var(--brand); }

/* ---------- 主体 ---------- */
.ide-body { flex: 1; display: flex; min-height: 0; }
.ide-side {
    flex: 0 0 220px; background: #0b1220; border-right: 1px solid #1f2937; overflow-y: auto; padding: 14px;
}
.side-head { font-size: 13px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.snippet-list { list-style: none; margin: 0; padding: 0; }
.snippet-list li { margin-bottom: 2px; }
.snippet-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 8px; color: #cbd5e1; font-size: 13px;
}
.snippet-list a:hover { background: #1e293b; color: #fff; }
.snippet-lang { font-size: 11px; color: #64748b; background: #1e293b; padding: 1px 7px; border-radius: 999px; }
.side-more { display: inline-block; margin-top: 10px; font-size: 13px; }
.side-empty { color: #64748b; font-size: 13px; line-height: 1.7; }

/* ---------- 编辑 + 预览 ---------- */
.ide-main { flex: 1; display: flex; min-height: 0; }
.editor-wrap { flex: 1; display: flex; min-height: 0; border-right: 1px solid #1f2937; }
.editor-gutter {
    flex: 0 0 50px; overflow: hidden; text-align: right; padding: 14px 8px 14px 0;
    background: #0b1220; color: #475569; font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
    user-select: none;
}
.editor-gutter div { height: 1.6em; }

.editor-area { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.editor-highlight, .editor-input {
    position: absolute; inset: 0; margin: 0; padding: 14px 16px;
    font: 14px/1.6 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    white-space: pre; tab-size: 4; border: 0; border-radius: 0;
    overflow: auto; overflow-wrap: normal; word-break: normal;
}
.editor-highlight { z-index: 1; color: #cbd5e1; pointer-events: none; background: transparent; }
.editor-highlight code { font: inherit; }
.editor-input {
    z-index: 2; color: transparent; background: transparent; caret-color: #fff;
    resize: none; outline: none; -webkit-text-fill-color: transparent;
}
.editor-input::selection { background: rgba(99, 102, 241, .35); }

/* 语法高亮配色 */
.tok-comment { color: #64748b; font-style: italic; }
.tok-string  { color: #34d399; }
.tok-number  { color: #fbbf24; }
.tok-keyword { color: #c084fc; font-weight: 600; }
.tok-func    { color: #60a5fa; }

/* ---------- 预览 ---------- */
.ide-preview { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.preview-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; color: #475569; font-size: 13px;
}
.ide-preview iframe { flex: 1; border: 0; width: 100%; background: #fff; }

@media (max-width: 900px) {
    .ide-main { flex-direction: column; }
    .editor-wrap { border-right: none; border-bottom: 1px solid #1f2937; }
    .ide-side { display: none; }
}