/* Code block styling for editors – macOS light inspired */
.qm-code-block {
    --qm-code-font-family: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, Menlo, Monaco, "Liberation Mono", monospace;
    --qm-code-font-size: 13px;
    --qm-code-line-height: 22px;
    margin: 1.25rem 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08),
        0 16px 48px rgba(15, 23, 42, 0.04);
    color-scheme: light;
}

.qm-code-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem 0.625rem 4.5rem;
    background: linear-gradient(180deg, #f5f5f7 0%, #ececef 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* macOS traffic lights (close / minimize / maximize) */
.qm-code-header::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 12px;
    background-image:
        radial-gradient(circle at 7px 6px, #ff5f57 0 5px, rgba(255, 95, 87, 0.22) 5.5px 6.5px, transparent 7px),
        radial-gradient(circle at 26px 6px, #febc2e 0 5px, rgba(254, 188, 46, 0.22) 5.5px 6.5px, transparent 7px),
        radial-gradient(circle at 45px 6px, #28c840 0 5px, rgba(40, 200, 64, 0.22) 5.5px 6.5px, transparent 7px);
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.96;
}

.qm-code-lang {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4338ca;
    background: rgba(67, 56, 202, 0.1);
    border: 1px solid rgba(67, 56, 202, 0.22);
    padding: 0.2rem 0.6rem;
    border-radius: var(--qm-radius-pill);
}

.qm-code-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.qm-code-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #475569;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--qm-radius-xs);
    cursor: pointer;
    transition: all 0.2s ease;
}

.qm-code-action:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.18);
}

.qm-code-action[data-qm-code-action="done"] {
    color: #047857;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.34);
}

.qm-code-action i {
    font-size: 0.72rem;
}

.qm-code-content pre {
    margin: 0;
    max-height: min(420px, 62vh);
    padding: 1rem 1.25rem 1rem 3.7rem;
    background: #fbfbfd;
    border-radius: 0 0 12px 12px;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

.qm-code-content code {
    font-family: var(--qm-code-font-family);
    font-size: var(--qm-code-font-size);
    line-height: var(--qm-code-line-height);
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    color: #24292e;
}

.qm-code-editor-surface {
    position: relative;
    min-height: 180px;
    max-height: 520px;
    background: #fbfbfd;
    overflow: hidden;
}

.qm-code-content .qm-code-editor-preview,
.qm-code-editor-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 1rem 1.25rem 1rem 3.7rem;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    font-family: var(--qm-code-font-family);
    font-size: var(--qm-code-font-size);
    line-height: var(--qm-code-line-height);
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    tab-size: 4;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    overflow: auto;
}

.qm-code-content .qm-code-editor-preview {
    z-index: 1;
    pointer-events: none;
}

.qm-code-content .qm-code-editor-preview code,
.qm-code-content .qm-code-editor-preview code .token,
.qm-code-content .qm-code-editor-preview .line-numbers-rows,
.qm-code-content .qm-code-editor-preview .line-numbers-rows > span,
.qm-code-content .qm-code-editor-preview .line-numbers-rows > span::before {
    font-family: var(--qm-code-font-family) !important;
    font-size: var(--qm-code-font-size) !important;
    line-height: var(--qm-code-editor-line-height, var(--qm-code-line-height)) !important;
    letter-spacing: 0 !important;
}

.qm-code-content .qm-code-editor-preview .line-numbers-rows > span {
    height: var(--qm-code-editor-line-height, var(--qm-code-line-height)) !important;
}

.qm-code-editor-input {
    z-index: 2;
    resize: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: #0f172a;
    -webkit-text-fill-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

.qm-code-editor-input::placeholder {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
    opacity: 1;
}

.qm-code-editor-input::selection {
    background: rgba(67, 56, 202, 0.22);
}

.qm-code-block.is-editing {
    border-color: rgba(67, 56, 202, 0.5);
    box-shadow:
        0 0 0 2px rgba(67, 56, 202, 0.16),
        0 12px 30px rgba(15, 23, 42, 0.14);
}

/* macOS style thin scrollbars */
.qm-code-content pre::-webkit-scrollbar,
.qm-code-editor-input::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.qm-code-content pre::-webkit-scrollbar-track,
.qm-code-editor-input::-webkit-scrollbar-track {
    background: transparent;
}

.qm-code-content pre::-webkit-scrollbar-thumb,
.qm-code-editor-input::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16);
    border: 2px solid transparent;
    border-radius: var(--qm-radius-pill);
    background-clip: padding-box;
}

.qm-code-content pre::-webkit-scrollbar-thumb:hover,
.qm-code-editor-input::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.28);
    background-clip: padding-box;
}

.line-numbers .line-numbers-rows {
    border-right: 1px solid rgba(15, 23, 42, 0.08);
}

/* Ensure line numbers share the exact same font metrics as the code text */
.qm-code-content .line-numbers-rows {
    padding: 1rem 0 !important;
}

.qm-code-content .line-numbers-rows > span {
    height: var(--qm-code-line-height);
    font-family: var(--qm-code-font-family);
    font-size: var(--qm-code-font-size);
    line-height: var(--qm-code-line-height);
    letter-spacing: 0;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

.line-numbers-rows > span:before {
    color: rgba(71, 85, 105, 0.5);
}

/* Override Prism okaidia (dark) with GitHub Light token colors for readability */
.qm-code-block code[class*="language-"],
.qm-code-block pre[class*="language-"],
.qm-code-content code[class*="language-"],
.qm-code-content pre[class*="language-"],
.qm-comment-code-shell code[class*="language-"],
.qm-comment-code-shell pre[class*="language-"] {
    color: #24292e;
    background: transparent;
    text-shadow: none;
}

.qm-code-block .token.comment,
.qm-code-block .token.prolog,
.qm-code-block .token.doctype,
.qm-code-block .token.cdata,
.qm-code-content .token.comment,
.qm-code-content .token.prolog,
.qm-code-content .token.doctype,
.qm-code-content .token.cdata,
.qm-comment-code-shell .token.comment,
.qm-comment-code-shell .token.prolog,
.qm-comment-code-shell .token.doctype,
.qm-comment-code-shell .token.cdata {
    color: #6a737d;
}

.qm-code-block .token.punctuation,
.qm-code-content .token.punctuation,
.qm-comment-code-shell .token.punctuation {
    color: #24292e;
}

.qm-code-block .token.property,
.qm-code-block .token.tag,
.qm-code-block .token.boolean,
.qm-code-block .token.number,
.qm-code-block .token.constant,
.qm-code-block .token.symbol,
.qm-code-content .token.property,
.qm-code-content .token.tag,
.qm-code-content .token.boolean,
.qm-code-content .token.number,
.qm-code-content .token.constant,
.qm-code-content .token.symbol,
.qm-comment-code-shell .token.property,
.qm-comment-code-shell .token.tag,
.qm-comment-code-shell .token.boolean,
.qm-comment-code-shell .token.number,
.qm-comment-code-shell .token.constant,
.qm-comment-code-shell .token.symbol {
    color: #005cc5;
}

.qm-code-block .token.selector,
.qm-code-block .token.attr-name,
.qm-code-block .token.string,
.qm-code-block .token.char,
.qm-code-block .token.builtin,
.qm-code-block .token.inserted,
.qm-code-content .token.selector,
.qm-code-content .token.attr-name,
.qm-code-content .token.string,
.qm-code-content .token.char,
.qm-code-content .token.builtin,
.qm-code-content .token.inserted,
.qm-comment-code-shell .token.selector,
.qm-comment-code-shell .token.attr-name,
.qm-comment-code-shell .token.string,
.qm-comment-code-shell .token.char,
.qm-comment-code-shell .token.builtin,
.qm-comment-code-shell .token.inserted {
    color: #032f62;
}

.qm-code-block .token.operator,
.qm-code-block .token.entity,
.qm-code-block .token.url,
.qm-code-block .token.variable,
.qm-code-content .token.operator,
.qm-code-content .token.entity,
.qm-code-content .token.url,
.qm-code-content .token.variable,
.qm-comment-code-shell .token.operator,
.qm-comment-code-shell .token.entity,
.qm-comment-code-shell .token.url,
.qm-comment-code-shell .token.variable {
    color: #d73a49;
}

.qm-code-block .token.atrule,
.qm-code-block .token.attr-value,
.qm-code-block .token.keyword,
.qm-code-content .token.atrule,
.qm-code-content .token.attr-value,
.qm-code-content .token.keyword,
.qm-comment-code-shell .token.atrule,
.qm-comment-code-shell .token.attr-value,
.qm-comment-code-shell .token.keyword {
    color: #d73a49;
}

.qm-code-block .token.function,
.qm-code-block .token.class-name,
.qm-code-content .token.function,
.qm-code-content .token.class-name,
.qm-comment-code-shell .token.function,
.qm-comment-code-shell .token.class-name {
    color: #6f42c1;
}

.qm-code-block .token.regex,
.qm-code-block .token.important,
.qm-code-content .token.regex,
.qm-code-content .token.important,
.qm-comment-code-shell .token.regex,
.qm-comment-code-shell .token.important {
    color: #005cc5;
}

/* Legacy editable block fallback */
.qm-code-editable {
    display: flex;
    gap: 0;
    background: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08);
}

.qm-code-editable .qm-code-lines {
    padding: 1rem 0.6rem;
    background: linear-gradient(180deg, #f5f5f7 0%, #ececef 100%);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    color: rgba(71, 85, 105, 0.65);
    font-size: 0.8rem;
    line-height: 1.65;
    text-align: right;
    user-select: none;
}

.qm-code-editable pre {
    flex: 1;
    margin: 0;
    padding: 1rem 1.25rem;
    color: #24292e;
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, Menlo, Monaco, "Liberation Mono", monospace;
    font-size: 0.84rem;
    line-height: 1.65;
    letter-spacing: 0.01em;
    white-space: pre;
    overflow: auto;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}

/* Dark mode: keep macOS light window but soften shadows for dark surroundings */
.dark .qm-code-block {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 12px 30px rgba(0, 0, 0, 0.36);
}

.dark .qm-code-action {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
}

.dark .line-numbers-rows > span:before {
    color: rgba(100, 116, 139, 0.55);
}

.dark .qm-code-content pre {
    scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}

.dark .qm-code-content pre::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.2);
    border-color: transparent;
    background-clip: padding-box;
}

/* Block editor baseline */
.editor-styles-wrapper pre[class*="language-"],
.block-editor-writing-flow pre[class*="language-"] {
    border-radius: 12px;
    background: #fbfbfd;
}

@media (max-width: 640px) {
    .qm-code-header {
        align-items: flex-start;
        padding: 0.625rem 0.65rem 0.625rem 4rem;
    }

    .qm-code-header::before {
        left: 0.65rem;
        width: 44px;
        background-image:
            radial-gradient(circle at 6px 6px, #ff5f57 0 4px, transparent 4.5px),
            radial-gradient(circle at 22px 6px, #febc2e 0 4px, transparent 4.5px),
            radial-gradient(circle at 38px 6px, #28c840 0 4px, transparent 4.5px);
    }

    .qm-code-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .qm-code-action {
        min-height: 30px;
        padding: 0.25rem 0.5rem;
    }

    .qm-code-content pre,
    .qm-code-content .qm-code-editor-preview,
    .qm-code-editor-input {
        padding-left: 3.25rem;
    }
}

/* ============================================================
   高级属性样式：行号开关 / 行高亮 / 行偏移 / 代码分组
   借鉴 zibll 的 data-enlighter-* 机制，保持 macOS Light 风格
   ============================================================ */

/* --- 行号开关：linenumbers=false 时移除行号列的左侧留白 --- */
.qm-code-block[data-qm-code-linenumbers="false"] .qm-code-content pre,
.qm-code-block[data-qm-code-linenumbers="false"] .qm-code-editor-preview,
.qm-code-block[data-qm-code-linenumbers="false"] .qm-code-editor-input {
    padding-left: 1.25rem;
}

.qm-code-block[data-qm-code-linenumbers="false"] .line-numbers-rows {
    display: none;
}

/* --- 行高亮：覆盖 Prism line-highlight 默认色，与 macOS Light 主题协调 --- */
.qm-code-block .line-highlight {
    background: linear-gradient(90deg, rgba(67, 56, 202, 0.10) 0%, rgba(67, 56, 202, 0.04) 100%);
    border-left: 3px solid rgba(67, 56, 202, 0.55);
    box-shadow: inset 1px 0 0 rgba(67, 56, 202, 0.18);
}

.qm-code-block .line-highlight[data-start]:before,
.qm-code-block .line-highlight[data-start]:after {
    color: rgba(67, 56, 202, 0.65);
}

/* 暗色环境下加深行高亮 */
.dark .qm-code-block .line-highlight {
    background: linear-gradient(90deg, rgba(129, 140, 248, 0.18) 0%, rgba(129, 140, 248, 0.08) 100%);
    border-left-color: rgba(129, 140, 248, 0.7);
}

/* --- 行偏移：data-start 显示在行号区顶部 --- */
.qm-code-block pre[data-start] .line-numbers-rows {
    counter-reset: linenumber calc(var(--qm-line-start, 1) - 1);
}

/* ============================================================
   代码分组容器（.qm-code-group）
   ============================================================ */
.qm-code-group {
    margin: 1.25rem 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08),
        0 16px 48px rgba(15, 23, 42, 0.04);
    color-scheme: light;
}

.qm-code-group-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0.5rem;
    background: linear-gradient(180deg, #f5f5f7 0%, #ececef 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    overflow-x: auto;
    scrollbar-width: thin;
}

.qm-code-group-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.qm-code-group-tab:hover {
    color: #0f172a;
}

.qm-code-group-tab.is-active {
    color: #4338ca;
    border-bottom-color: #4338ca;
}

.qm-code-group-tab:focus-visible {
    outline: 2px solid rgba(67, 56, 202, 0.45);
    outline-offset: -2px;
}

.qm-code-group-panels {
    position: relative;
}

.qm-code-group-panel {
    display: none;
}

.qm-code-group-panel.is-active {
    display: block;
}

/* 分组内的代码块去除自身外边框/阴影，避免双层视觉容器 */
.qm-code-group-panel > .qm-code-block {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.qm-code-group-panel > .qm-code-block:first-child .qm-code-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* 暗色模式下分组容器 */
.dark .qm-code-group {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 12px 30px rgba(0, 0, 0, 0.36);
}

.dark .qm-code-group-tab {
    color: #94a3b8;
}

.dark .qm-code-group-tab:hover {
    color: #f1f5f9;
}

.dark .qm-code-group-tab.is-active {
    color: #a5b4fc;
    border-bottom-color: #a5b4fc;
}

/* ============================================================
   代码块设置对话框（.qm-code-settings-modal）
   ============================================================ */
.qm-code-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.qm-code-settings-modal.is-open {
    opacity: 1;
}

.qm-code-settings-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.qm-code-settings-modal__panel {
    position: relative;
    width: calc(100% - 2rem);
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    background: #ffffff;
    border-radius: 14px;
    box-shadow:
        0 24px 64px rgba(15, 23, 42, 0.28),
        0 8px 16px rgba(15, 23, 42, 0.16);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s ease;
}

.qm-code-settings-modal.is-open .qm-code-settings-modal__panel {
    transform: translateY(0) scale(1);
}

.qm-code-settings-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.qm-code-settings-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.qm-code-settings-modal__close {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.25rem;
    color: #64748b;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease;
}

.qm-code-settings-modal__close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.qm-code-settings-modal__body {
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qm-code-settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.qm-code-settings-field--checkbox {
    flex-direction: row;
    align-items: center;
}

.qm-code-settings-field--checkbox .qm-code-settings-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: #334155;
    cursor: pointer;
}

.qm-code-settings-field--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4338ca;
    cursor: pointer;
}

.qm-code-settings-field__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.02em;
}

.qm-code-settings-field__control {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.86rem;
    color: #0f172a;
    background: #fbfbfd;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 8px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.qm-code-settings-field__control:focus {
    outline: none;
    border-color: rgba(67, 56, 202, 0.55);
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.16);
}

.qm-code-settings-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fbfbfd;
}

.qm-code-settings-modal__btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.qm-code-settings-modal__btn--ghost {
    background: transparent;
    color: #475569;
    border-color: rgba(15, 23, 42, 0.14);
}

.qm-code-settings-modal__btn--ghost:hover {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

.qm-code-settings-modal__btn--primary {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    color: #ffffff;
    border-color: transparent;
}

.qm-code-settings-modal__btn--primary:hover {
    background: linear-gradient(135deg, #3730a3 0%, #5b21b6 100%);
}

/* 暗色模式下的设置对话框 */
.dark .qm-code-settings-modal__panel {
    background: #1e293b;
    color: #f1f5f9;
}

.dark .qm-code-settings-modal__title {
    color: #f1f5f9;
}

.dark .qm-code-settings-modal__header,
.dark .qm-code-settings-modal__footer {
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .qm-code-settings-modal__footer {
    background: rgba(15, 23, 42, 0.4);
}

.dark .qm-code-settings-field__label {
    color: #cbd5e1;
}

.dark .qm-code-settings-field__control {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.14);
    color: #f1f5f9;
}

.dark .qm-code-settings-modal__btn--ghost {
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.14);
}

.dark .qm-code-settings-modal__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
}

@media (max-width: 640px) {
    .qm-code-settings-modal__panel {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        align-self: flex-end;
        max-height: 90vh;
    }

    .qm-code-settings-modal {
        align-items: flex-end;
    }
}