.smart-editor-shell .smart-editor-source {
    min-height: 420px;
}

.smart-editor-shell.is-enhanced .smart-editor-source {
    display: none;
}

.smart-editor-shell .editor-card {
    display: none;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 18px;
}

.smart-editor-shell.is-enhanced .editor-card {
    display: block;
}

#toolbar-shell {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(249, 250, 251, 0.96);
    border-bottom: 1px solid #e5e7eb;
    backdrop-filter: blur(10px);
}

#toolbar,
#toolbar-popover,
#selection-toolbar,
#context-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px;
}

#toolbar button,
#toolbar select,
#toolbar-popover button,
#selection-toolbar button,
#context-toolbar button,
.action-bar .btn {
    min-height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1;
}

#toolbar button:hover,
#toolbar-popover button:hover,
#selection-toolbar button:hover,
#context-toolbar button:hover,
.action-bar .btn:hover {
    border-color: #c4b5fd;
    background: #f5f3ff;
}

#toolbar button.is-active,
#selection-toolbar button.is-active,
#context-toolbar button.is-active {
    border-color: #a78bfa;
    background: #ede9fe;
    color: #5b21b6;
}

#selection-toolbar,
#context-toolbar {
    position: fixed;
    z-index: 50;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
}

#find-replace-panel {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e5e7eb;
}

#find-replace-panel[hidden],
#selection-toolbar[hidden],
#context-toolbar[hidden],
#toolbar-popover[hidden] {
    display: none;
}

#find-replace-panel input {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 10px;
}

#editor-container {
    min-height: 520px;
    max-height: 72vh;
    overflow: auto;
    background: #fff;
}

.ProseMirror,
.smart-editor-content,
#preview-pane {
    padding: 28px;
    color: #1f2937;
    font-size: 16px;
    line-height: 1.75;
}

.ProseMirror:focus {
    outline: none;
}

.ProseMirror [data-word-font-weight="700"],
.smart-editor-content [data-word-font-weight="700"],
#preview-pane [data-word-font-weight="700"] {
    font-weight: 700;
}

.ProseMirror [data-word-font-weight="400"],
.smart-editor-content [data-word-font-weight="400"],
#preview-pane [data-word-font-weight="400"] {
    font-weight: 400;
}

.ProseMirror > * + *,
.smart-editor-content > * + *,
#preview-pane > * + * {
    margin-top: 0.75em;
}

.ProseMirror h1,
.smart-editor-content h1,
#preview-pane h1 {
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.35;
}

.ProseMirror h2,
.smart-editor-content h2,
#preview-pane h2 {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.3em;
}

.ProseMirror h2[data-source-style="true"],
.smart-editor-content h2[data-source-style="true"],
#preview-pane h2[data-source-style="true"] {
    border-bottom: 0;
    padding-bottom: 0;
}

.ProseMirror h3,
.smart-editor-content h3,
#preview-pane h3 {
    font-size: 1.25em;
    font-weight: 650;
    line-height: 1.45;
}

.ProseMirror h4,
.smart-editor-content h4,
#preview-pane h4 {
    font-size: 1.1em;
    font-weight: 650;
}

.ProseMirror ul,
.ProseMirror ol,
.smart-editor-content ul,
.smart-editor-content ol,
#preview-pane ul,
#preview-pane ol {
    padding-left: 1.7em;
}

.ProseMirror ul,
.smart-editor-content ul,
#preview-pane ul {
    list-style: disc;
}

.ProseMirror ol,
.smart-editor-content ol,
#preview-pane ol {
    list-style: decimal;
}

.ProseMirror table,
.smart-editor-content table,
#preview-pane table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    table-layout: auto;
}

.ProseMirror th,
.ProseMirror td,
.smart-editor-content th,
.smart-editor-content td,
#preview-pane th,
#preview-pane td {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    vertical-align: top;
}

.ProseMirror th,
.smart-editor-content th,
#preview-pane th {
    background: #4472c4;
    color: #fff;
    font-weight: 600;
}

.ProseMirror blockquote,
.smart-editor-content blockquote,
#preview-pane blockquote {
    border-left: 4px solid #8b5cf6;
    padding-left: 1em;
    color: #4b5563;
}

.ProseMirror img,
.smart-editor-content img,
#preview-pane img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.ProseMirror code,
.smart-editor-content code,
#preview-pane code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.ProseMirror pre,
.smart-editor-content pre,
#preview-pane pre {
    position: relative;
    overflow: auto;
    margin: 1.25em 0;
    border: 1px solid #24283b;
    border-radius: 10px;
    background: #1a1b26;
    color: #c0caf5;
}

.ProseMirror pre.has-line-numbers,
.smart-editor-content pre.has-line-numbers,
#preview-pane pre.has-line-numbers {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}

.ProseMirror pre.has-line-numbers .code-line-gutter,
.smart-editor-content pre.has-line-numbers .code-line-gutter,
#preview-pane pre.has-line-numbers .code-line-gutter {
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 14px 12px;
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    color: #64748b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
    user-select: none;
}

.ProseMirror pre.has-line-numbers .code-line-gutter span,
.smart-editor-content pre.has-line-numbers .code-line-gutter span,
#preview-pane pre.has-line-numbers .code-line-gutter span {
    display: block;
    min-height: 0;
    line-height: inherit;
}

.ProseMirror pre > code,
.smart-editor-content pre > code,
#preview-pane pre > code {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: max-content;
    padding: 14px 16px;
    background: transparent !important;
    color: inherit;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre;
}

/*
 * Source-faithful code blocks carry the source pre typography as safe inline
 * style. The generic grid must not add a second layer of padding/font metrics:
 * CSDN's 56px left code offset is already represented by gutter + code inset,
 * and its 36px top area is shared by both columns.
 */
.ProseMirror pre[data-source-style="true"],
.smart-editor-content pre[data-source-style="true"],
#preview-pane pre[data-source-style="true"] {
    padding: 0 !important;
}

.ProseMirror pre[data-source-style="true"] > .code-line-gutter,
.smart-editor-content pre[data-source-style="true"] > .code-line-gutter,
#preview-pane pre[data-source-style="true"] > .code-line-gutter {
    padding-top: 36px;
    padding-bottom: 6px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ProseMirror pre[data-source-style="true"] > code,
.smart-editor-content pre[data-source-style="true"] > code,
#preview-pane pre[data-source-style="true"] > code {
    padding: 36px 16px 6px 14px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/*
 * The cnblogs PingFang skin exports its mac-style code panel through a
 * highlighter-hljs clipboard fragment. Preserve that source presentation
 * without accepting arbitrary source CSS or changing the code text.
 */
.ProseMirror pre[data-source-code-profile="cnblogs-pingfang-mac"],
.smart-editor-content pre[data-source-code-profile="cnblogs-pingfang-mac"],
#preview-pane pre[data-source-code-profile="cnblogs-pingfang-mac"] {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 10px auto;
    padding: 32px 12px 12px !important;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 6px;
    background: rgb(245, 245, 245);
    color: rgb(68, 68, 68);
    font-family: "Courier New", sans-serif;
    font-size: 12px;
    line-height: 18px;
}

.ProseMirror pre[data-source-code-profile="cnblogs-pingfang-mac"] > .code-line-gutter,
.smart-editor-content pre[data-source-code-profile="cnblogs-pingfang-mac"] > .code-line-gutter,
#preview-pane pre[data-source-code-profile="cnblogs-pingfang-mac"] > .code-line-gutter {
    padding: 0 12px 0 0;
    border-right-color: rgb(229, 231, 235);
    color: rgb(156, 163, 175);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ProseMirror pre[data-source-code-profile="cnblogs-pingfang-mac"] > code,
.smart-editor-content pre[data-source-code-profile="cnblogs-pingfang-mac"] > code,
#preview-pane pre[data-source-code-profile="cnblogs-pingfang-mac"] > code {
    padding: 0 !important;
    background: transparent !important;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ProseMirror pre[data-lang]::before,
.smart-editor-content pre[data-lang]::before,
#preview-pane pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    border-radius: 6px;
    background: #414868;
    color: #c0caf5;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
}

/* Keep this source-profile override after the generic language badge rule. */
.ProseMirror pre[data-source-code-profile="cnblogs-pingfang-mac"]::before,
.smart-editor-content pre[data-source-code-profile="cnblogs-pingfang-mac"]::before,
#preview-pane pre[data-source-code-profile="cnblogs-pingfang-mac"]::before {
    content: "" !important;
    position: absolute;
    top: 10px;
    right: auto;
    left: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: rgb(254, 95, 89);
    box-shadow: rgb(254, 187, 44) 20px 0, rgb(41, 199, 63) 40px 0;
    color: transparent;
    text-transform: none;
}

/*
 * Older cnblogs skins render shell/output blocks as compact light panels.
 * The profile is explicit and sanitizer-enumerated, so it cannot become an
 * arbitrary source-controlled CSS channel.
 */
.ProseMirror pre[data-source-code-profile="cnblogs-compact"],
.smart-editor-content pre[data-source-code-profile="cnblogs-compact"],
#preview-pane pre[data-source-code-profile="cnblogs-compact"] {
    grid-template-columns: auto minmax(0, 1fr);
    margin: 5px 0;
    padding: 5px !important;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 0;
    background: rgb(245, 245, 245);
    color: rgb(0, 0, 0);
    font-family: "Courier New", serif;
    font-size: 12px;
    line-height: 21.6px;
}

.ProseMirror pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter,
.smart-editor-content pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter,
#preview-pane pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter {
    padding: 0 8px 0 0;
    border-right-color: rgb(204, 204, 204);
    color: rgb(117, 117, 117);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ProseMirror pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter > span,
.smart-editor-content pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter > span,
#preview-pane pre[data-source-code-profile="cnblogs-compact"] > .code-line-gutter > span {
    min-height: 21.6px;
    line-height: 21.6px;
}

.ProseMirror pre[data-source-code-profile="cnblogs-compact"] > code,
.smart-editor-content pre[data-source-code-profile="cnblogs-compact"] > code,
#preview-pane pre[data-source-code-profile="cnblogs-compact"] > code {
    padding: 0 0 0 5px !important;
    background: transparent !important;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ProseMirror pre[data-source-code-profile="cnblogs-compact"]::before,
.smart-editor-content pre[data-source-code-profile="cnblogs-compact"]::before,
#preview-pane pre[data-source-code-profile="cnblogs-compact"]::before {
    content: none !important;
}

.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.action-bar .info {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #64748b;
    font-size: 14px;
}

.action-bar .btn-group {
    display: flex;
    gap: 8px;
}

.preview-card {
    display: none;
    border-top: 1px solid #e5e7eb;
}

.preview-card.is-open {
    display: block;
}

.tab-bar {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
}

.tab {
    cursor: pointer;
    border-radius: 999px;
    padding: 6px 12px;
    color: #64748b;
    font-size: 14px;
}

.tab.active {
    background: #ede9fe;
    color: #5b21b6;
}

.toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 100;
    display: none;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    padding: 10px 14px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.24);
}

.editor-prompt-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 14px;
    padding: 20px;
    max-width: min(420px, calc(100vw - 32px));
    width: max-content;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.editor-prompt-dialog::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

.editor-prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}