/**
 * 六爻页：学易笔记（列表、只读浮层、管理、富文本编辑）及 sheet 内联图样式。
 * 依赖 liuyao/css/style.css 中的公共按钮与布局；由 version_liuyao.php 在 style.css 之后加载。
 * 奇门迷你九宫布局与卦录页同源（qimen/css/style.css），经此 @import 保证首页笔记 Tab 亦加载。
 */
@import url('../../qimen/css/style.css');
@import url('notes-qimen-mini-grid.css');

/* 学易笔记页 */
.notes-section {
    padding: 4px 2px 16px;
    text-align: center;
}

/* 笔记页顶部分类：两行四列网格（7 项：上 4 + 下 3） */
.notes-category-subtabs-row {
    max-width: 100%;
    margin: 0 auto 12px;
    padding: 0 4px;
    box-sizing: border-box;
}

.notes-category-subtabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    background: linear-gradient(180deg, #eef4fc 0%, #e4ecf8 100%);
    border: 1px solid #c5d6ec;
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.notes-category-subtab {
    min-width: 0;
    padding: 8px 4px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    white-space: nowrap;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.notes-category-subtab:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.5);
}

.notes-category-subtab[aria-selected="true"],
.notes-category-subtab.is-active {
    background: #fff;
    color: #1e4a8c;
    font-weight: 700;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(59, 130, 246, 0.2);
}

.notes-category-subtab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

@media (min-width: 768px) {
    .notes-category-subtabs {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .notes-category-subtab {
        font-size: 14px;
        padding: 9px 6px;
    }
}

.notes-entry-container {
    width: 100%;
}

/* 底部固定：新增 / 管理笔记 / 练习（及练习态「返回笔记」） */
:root {
    --notes-action-bar-h: 56px;
}

#notes-mode .notes-admin-container,
#notes-mode .notes-practice-inline-bar,
#notes-mode .notes-practice-return-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 150;
    box-sizing: border-box;
    width: 100%;
    max-width: 800px;
    margin-top: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e8e8f0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    text-align: center;
}

#notes-mode .notes-section {
    padding-bottom: calc(var(--notes-action-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

#notes-mode .notes-practice-page {
    padding-bottom: calc(var(--notes-action-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
}

.notes-admin-container {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    text-align: center;
}

.notes-entry-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 12px;
    padding: 8px 0;
}

.notes-entry-empty {
    width: 100%;
    margin: 12px 0 4px;
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
}

.notes-entry-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: unset;
    /* 标题胶囊：左右略加内边距，避免文字贴圆角边 */
    padding: 5px 14px;
    box-sizing: border-box;
}

/* 通用笔记悬浮层（与祷词层结构类似，便于扩展） */
.liuyao-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.liuyao-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.liuyao-sheet-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 8px 24px 20px;
    max-width: min(420px, 100%);
    width: 100%;
    max-height: min(85vh, 640px);
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* 笔记只读：全屏时正文区可滚、卦例区贴底；小弹窗时整卡仍可一起滚动 */
.liuyao-sheet-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-view {
    flex: 1 1 auto;
    overflow: hidden;
}

.liuyao-sheet-main-scroll {
    min-height: 0;
    --liuyao-note-reader-font-size: 15px;
    --liuyao-note-reader-bg: #ffffff;
    background-color: var(--liuyao-note-reader-bg, #ffffff);
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-main-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 笔记卦例：右下角「卦例」按钮 + 自底部滑入抽屉，高度随内容、不设上限 */
.liuyao-sheet-classic-fab {
    position: absolute;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px));
    z-index: 1004;
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid rgba(47, 107, 82, 0.35);
    border-radius: 12px;
    background: linear-gradient(180deg, #f0fdf4 0%, #e2f4e9 100%);
    color: #1a3d32;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.1;
    cursor: pointer;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.85) inset;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.liuyao-sheet-classic-fab:hover {
    border-color: rgba(47, 107, 82, 0.55);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.liuyao-sheet-classic-fab:active {
    transform: scale(0.97);
}

.liuyao-sheet-classic-fab[hidden] {
    display: none !important;
}

.liuyao-sheet-classic-drawer--open ~ .liuyao-sheet-classic-fab {
    visibility: hidden;
    pointer-events: none;
}

.liuyao-sheet-classic-drawer {
    position: absolute;
    inset: 0;
    z-index: 1002;
    pointer-events: none;
}

.liuyao-sheet-classic-drawer[hidden] {
    display: none !important;
}

.liuyao-sheet-classic-drawer--open {
    pointer-events: auto;
}

.liuyao-sheet-classic-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease;
}

.liuyao-sheet-classic-drawer--open .liuyao-sheet-classic-drawer-backdrop {
    opacity: 1;
    visibility: visible;
}

.liuyao-sheet-classic-drawer-panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 90%;
    /* 高度随内容增高；超出视口时在面板内滚动，条目仍全部保留（不再做「几行」截断） */
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f8fafc;
    border-radius: 16px 16px 0 0;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    box-shadow: 0 -10px 36px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
    transform: translate(-50%, 100%);
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease,
        visibility 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.liuyao-sheet-classic-drawer--open .liuyao-sheet-classic-drawer-panel {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.liuyao-sheet-classic-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 12px 8px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 16px 16px 0 0;
}

.liuyao-sheet-classic-drawer-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

.liuyao-sheet-classic-drawer-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.liuyao-sheet-classic-drawer-close:hover {
    background: #f1f5f9;
    color: #334155;
}

.liuyao-sheet-classic-panel-inner {
    font-size: var(--liuyao-note-body-font-size, 15px);
    line-height: var(--liuyao-note-body-line-height, 1.85);
    font-family: var(--liuyao-note-body-font-family, inherit);
    padding: 12px 14px 16px;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 2px;
}

.liuyao-sheet-classic-panel-inner .notes-classic-case-row-first {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.liuyao-sheet-classic-panel-inner .liuyao-sheet-classic-line {
    margin: 0;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

.liuyao-sheet-classic-panel-inner .liuyao-sheet-classic-line + .liuyao-sheet-classic-line {
    margin-top: 0;
}

/* 笔记卦例区响应式：平板两列、横屏三列、超宽四列 */
@media (min-width: 768px) {
    .liuyao-sheet-classic-drawer-panel {
        width: 60%;
    }
    .liuyao-sheet-classic-panel-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .liuyao-sheet-classic-drawer-panel {
        width: 40%;
    }
    .liuyao-sheet-classic-panel-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .liuyao-sheet-classic-panel-inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.liuyao-sheet-overlay.liuyao-note-sheet-full {
    padding: 0;
    overflow: auto;
    overscroll-behavior: none;
    background: #fff;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-box {
    /* 全屏笔记只读：与 .notes-edit-box 同系，见文件后部 @supports 100sv* */
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 0 0 0;
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-head {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-body {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-image-wrap {
    margin: 0 0 14px;
}

.liuyao-sheet-image-wrap + .liuyao-sheet-text-wrap {
    margin-top: 2px;
    padding-top: 4px;
}

.liuyao-sheet-text-wrap {
    width: 100%;
    box-sizing: border-box;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-line {
    padding: 0 5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 笔记只读浮层：有音频地址时右下角播放（与 #liuyao-sheet-overlay 同层） */
.liuyao-sheet-audio-slot {
    position: fixed;
    right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px));
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    z-index: 1003;
    display: flex;
    align-items: center;
    justify-content: center;
}

.liuyao-sheet-audio-slot[hidden] {
    display: none !important;
}

#liuyao-sheet-audio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.liuyao-sheet-audio-toggle {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    background: #dceee4;
    color: #2a6350;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s, box-shadow 0.2s;
}

.liuyao-sheet-audio-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
}

.liuyao-sheet-audio-toggle:focus-visible {
    outline: 2px solid #2a6350;
    outline-offset: 3px;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full::-webkit-scrollbar,
.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-box::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}


.liuyao-sheet-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    box-sizing: border-box;
    min-height: 48px;
    flex-shrink: 0;
}

.liuyao-sheet-head .liuyao-sheet-edit-btn {
    position: static;
    flex: 0 0 auto;
}

.liuyao-sheet-category-btn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 10px;
    min-height: 28px;
    line-height: 1.2;
    border-radius: 8px;
}

.liuyao-sheet-category-btn[hidden] {
    display: none !important;
}

/* 只读笔记：底栏导航 + 目录滑入 */
.liuyao-sheet-overlay.liuyao-note-sheet-full {
    --liuyao-sheet-nav-h: calc(48px + env(safe-area-inset-bottom, 0px));
}

.liuyao-sheet-nav-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 48px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid #e2e8f0;
    background: #fff;
    z-index: 5;
}

.liuyao-sheet-nav-bar[hidden] {
    display: none !important;
}

.liuyao-sheet-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 10px 8px;
    border: none;
    border-radius: 0;
    background: #fff;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.liuyao-sheet-nav-btn + .liuyao-sheet-nav-btn {
    border-left: 1px solid #e2e8f0;
}

.liuyao-sheet-nav-btn:hover:not(:disabled) {
    background: #f8fafc;
}

.liuyao-sheet-nav-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.liuyao-sheet-nav-btn--toc[aria-expanded="true"] {
    background: #ecfdf5;
    color: #166534;
}

.liuyao-sheet-nav-btn:focus-visible {
    outline: 2px solid #2a6350;
    outline-offset: -2px;
    z-index: 1;
}

.liuyao-sheet-toc {
    position: absolute;
    inset: 0 0 var(--liuyao-sheet-nav-h) 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    visibility: hidden;
}

.liuyao-sheet-toc[hidden] {
    display: flex !important;
}

.liuyao-sheet-toc.liuyao-sheet-toc--open {
    pointer-events: auto;
    visibility: visible;
}

.liuyao-sheet-toc-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(15, 23, 42, 0.28);
    opacity: 0;
    cursor: default;
    transition: opacity 0.28s ease;
    -webkit-tap-highlight-color: transparent;
}

.liuyao-sheet-toc.liuyao-sheet-toc--open .liuyao-sheet-toc-backdrop {
    opacity: 1;
}

.liuyao-sheet-toc-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-height: min(62vh, calc(100% - 8px));
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.liuyao-sheet-toc.liuyao-sheet-toc--open .liuyao-sheet-toc-panel {
    transform: translateY(0);
}

.liuyao-sheet-toc-head {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid #f1f5f9;
}

.liuyao-sheet-toc-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.liuyao-sheet-toc-sub {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.liuyao-sheet-toc-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.liuyao-sheet-toc-item {
    margin: 0;
    padding: 0;
}

.liuyao-sheet-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.liuyao-sheet-toc-link:hover {
    background: #f8fafc;
}

.liuyao-sheet-toc-link.is-active {
    background: #ecfdf5;
    color: #166534;
    font-weight: 600;
}

.liuyao-sheet-toc-index {
    flex: 0 0 auto;
    min-width: 1.6em;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
    font-weight: 600;
}

.liuyao-sheet-toc-link.is-active .liuyao-sheet-toc-index {
    color: #16a34a;
}

.liuyao-sheet-toc-name {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.liuyao-sheet-toc-pager {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
}

.liuyao-sheet-toc-pager[hidden] {
    display: none !important;
}

.liuyao-sheet-toc-pager-btn {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.liuyao-sheet-toc-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.liuyao-sheet-toc-pager-info {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    min-width: 4.5em;
    text-align: center;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-audio-slot {
    bottom: calc(var(--liuyao-sheet-nav-h) + 12px);
}

.liuyao-sheet-order-slot {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}

.liuyao-sheet-order-slot[hidden] {
    display: none !important;
}

.liuyao-sheet-order {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #475569;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    line-height: 1.3;
}

.liuyao-sheet-order--editable {
    cursor: pointer;
}

.liuyao-sheet-order--editable:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.liuyao-sheet-order-input {
    width: 3.2em;
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border: 2px solid #2f6b52;
    border-radius: 6px;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
}

.liuyao-sheet-order-input::-webkit-outer-spin-button,
.liuyao-sheet-order-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.liuyao-sheet-head .liuyao-sheet-share-btn {
    position: static;
    flex: 0 0 auto;
}

.liuyao-sheet-head .liuyao-sheet-settings-btn {
    position: static;
    flex: 0 0 auto;
}

.liuyao-sheet-settings-btn {
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.liuyao-sheet-settings-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.liuyao-sheet-settings-btn[aria-expanded="true"] {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.liuyao-sheet-settings {
    position: absolute;
    top: 48px;
    right: max(46px, calc(env(safe-area-inset-right, 0px) + 46px));
    width: min(300px, calc(100% - 24px));
    z-index: 7;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform 0.24s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.2s ease;
}

.liuyao-sheet-settings[hidden] {
    display: block !important;
}

.liuyao-sheet-settings.liuyao-sheet-settings--open {
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
    opacity: 1;
}

.liuyao-sheet-settings-panel {
    padding: 12px 14px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
}

.liuyao-sheet-settings.liuyao-sheet-settings--open .liuyao-sheet-settings-panel {
    transform: none;
    opacity: 1;
}

.liuyao-sheet-settings-fs-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.liuyao-sheet-settings-fs-title {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.liuyao-sheet-settings-fs-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.liuyao-sheet-settings-fs-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.liuyao-sheet-settings-fs-val {
    flex: 1 1 auto;
    min-width: 2em;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.liuyao-sheet-settings-bg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.liuyao-sheet-settings-bg-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.liuyao-sheet-settings-bg-btn:hover {
    transform: scale(1.06);
}

.liuyao-sheet-settings-bg-btn.is-active {
    border-color: #16a34a;
    box-shadow: 0 0 0 1px #16a34a;
}

.liuyao-sheet-share-btn {
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.liuyao-sheet-share-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.liuyao-sheet-head .liuyao-sheet-close {
    position: static;
    flex: 0 0 32px;
}

.liuyao-sheet-close {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 34px;
    line-height: 1;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.2s;
}

.liuyao-sheet-close:hover {
    color: #333;
}

.liuyao-sheet-edit-btn {
    font-size: 14px;
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f5f6f8;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.liuyao-sheet-edit-btn:hover {
    background: #eef0f4;
    border-color: #bbb;
}

.liuyao-sheet-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* 笔记浮层打开时脚本 focus 标题（tabindex=-1），不显轮廓以免误以为 UI 瑕疵 */
#liuyao-sheet-title:focus {
    outline: none;
}

.liuyao-sheet-close:focus:not(:focus-visible) {
    outline: none;
}

.liuyao-sheet-close:focus-visible {
    outline: 2px solid #64748b;
    outline-offset: 2px;
    border-radius: 4px;
}

.liuyao-sheet-body {
    text-align: left;
    /* 只读正文底部留白约三行，避免与底栏/安全区交叠（小窗与全屏共用） */
    padding-bottom: calc(3 * 1.85em + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

.liuyao-sheet-image-wrap {
    margin: 0 -20px 14px;
}

.liuyao-sheet-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    background: #f8fafc;
}

.liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-image {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.liuyao-sheet-line {
    --liuyao-note-body-font-size: var(--liuyao-note-reader-font-size, 15px);
    --liuyao-note-body-line-height: 1.85;
    --liuyao-note-body-font-family: inherit;
    margin: 0;
    font-size: var(--liuyao-note-reader-font-size, 15px);
    line-height: 1.85;
    color: #444;
    white-space: pre-wrap;
}

.liuyao-sheet-line:empty {
    min-height: 1.85em;
}

.liuyao-sheet-line + .liuyao-sheet-line {
    margin-top: 2px;
}

.liuyao-sheet-line strong,
.liuyao-sheet-line b {
    font-weight: 700;
}

.liuyao-sheet-line .notes-edit-inline-img {
    width: 100%;
    max-width: 100%;
    height: auto;
/*    vertical-align: middle;*/
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin: 6px 0;
    display: block;    
    object-fit: contain;
    background: #f8fafc;
}

/* 登录浮层（与九宫飞星 index.php 一致） */
.login-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.login-modal.show {
    display: flex;
}

.login-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

.login-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    z-index: 10001;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #2f6b52;
}

.login-header h2 {
    color: #2f6b52;
    font-size: 1.4rem;
    margin: 0;
}

.login-close {
    font-size: 1.75rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    border: none;
    background: none;
    padding: 4px;
    font-family: inherit;
}

.login-close:hover {
    color: #2f6b52;
}

.login-box .form-group {
    margin-bottom: 16px;
}

.login-box .form-group label {
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.login-box .form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.login-box .form-group input:focus {
    outline: none;
    border-color: #2f6b52;
}

.form-error {
    color: #dc3545;
    font-size: 14px;
    margin-bottom: 12px;
    min-height: 20px;
}

/* 压过梅花等模块 .btn-primary 的 max-width/flex，保证登录钮全宽居中 */
.btn-primary.btn-block,
.login-box .btn-primary.btn-block {
    display: block;
    width: 100%;
    max-width: none;
    flex: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #2f6b52 0%, #1a5f4a 100%);
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

.btn-primary.btn-block:hover {
    opacity: 0.95;
}

.login-footer {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: #666;
}

.login-footer a {
    color: #2f6b52;
    font-weight: 600;
}

.login-footer a:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
    border-radius: 2px;
}

.login-logged-block {
    text-align: center;
}

/* 退出登录确认（与主站 #logoutConfirmDialog 同级，z-index 高于登录浮层） */
.logout-confirm-dialog {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10005;
    align-items: center;
    justify-content: center;
}

.logout-confirm-dialog.show {
    display: flex;
}

.logout-confirm-dialog .dialog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.logout-confirm-dialog .dialog-bubble {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    width: 90%;
    max-width: 350px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10006;
    overflow: hidden;
}

.logout-confirm-dialog .dialog-header {
    background: linear-gradient(135deg, #2f6b52 0%, #1a5f4a 100%);
    padding: 20px;
    text-align: center;
    color: #fff;
}

.logout-confirm-dialog .dialog-header h3 {
    margin: 0;
    font-size: 1.3em;
    font-weight: bold;
}

.logout-confirm-dialog .dialog-content {
    padding: 25px 20px;
    text-align: center;
}

.logout-confirm-dialog .dialog-content p {
    margin: 0;
    color: #333;
    font-size: 1.1em;
    line-height: 1.6;
}

.logout-confirm-dialog .dialog-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px 20px;
    justify-content: center;
}

.logout-confirm-dialog .btn-dialog-cancel,
.logout-confirm-dialog .btn-dialog-confirm {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    max-width: 120px;
}

.logout-confirm-dialog .btn-dialog-cancel {
    background: #e0e0e0;
    color: #333;
}

.logout-confirm-dialog .btn-dialog-confirm {
    background: linear-gradient(135deg, #2f6b52 0%, #1a5f4a 100%);
    color: #fff;
}

.logout-confirm-dialog .btn-dialog-cancel:focus-visible,
.logout-confirm-dialog .btn-dialog-confirm:focus-visible {
    outline: 2px solid #2f6b52;
    outline-offset: 2px;
}

/* 笔记管理（站长可见，在笔记按钮下方） */
.notes-admin-bar {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
}

.notes-admin-add-direct,
.notes-admin-toggle {
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* 站长：管理笔记全屏浮层（z-index 低于 #notes-edit-overlay，便于从列表进入编辑） */
.notes-admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

.notes-admin-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.notes-admin-overlay-box {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* 管理笔记全屏：见文件后部 @supports 100svh */
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: #f4f6fb;
    overflow: auto;
    box-sizing: border-box;
}

.notes-admin-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e8e8f0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.notes-admin-overlay-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.notes-admin-overlay-close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    border-radius: 8px;
}

.notes-admin-overlay-close:hover {
    background: #f1f5f9;
    color: #334155;
}

.notes-admin-overlay-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.notes-admin-trash-btn,
.notes-trash-back-btn {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
}

.notes-trash-overlay {
    z-index: 10002;
}

.notes-trash-item {
    align-items: flex-start;
}

.notes-trash-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notes-trash-meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
}

.notes-trash-item-actions {
    align-self: center;
}

.notes-trash-restore {
    border-color: #2563eb;
    color: #2563eb;
}

.notes-trash-restore:hover {
    background: rgba(37, 99, 235, 0.08);
}

.notes-trash-empty {
    padding: 24px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.notes-admin-overlay-box .notes-admin-panel {
    flex: 1 1 auto;
    margin: 0 auto;
    width: 100%;
    max-width: 640px;
    padding: 16px 16px 32px;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
}

.notes-admin-panel {
    text-align: left;
    background: #f8f9ff;
    border: 1px solid #e0e4ff;
    border-radius: 10px;
    padding: 12px;
    margin-top: 12px;
    margin-bottom: 0;
    width: 100%;
    flex: 0 0 100%;
}

.notes-admin-tip {
    font-size: 12px;
    color: #666;
    margin: 0 0 10px;
    line-height: 1.5;
}

.notes-admin-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.notes-admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    flex-wrap: wrap;
}

.notes-admin-page-btn {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid #94a3b8;
    background: #f8fafc;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
}

.notes-admin-page-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #64748b;
}

.notes-admin-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.notes-admin-page-info {
    font-size: 12px;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.notes-admin-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 1px solid #eee;
}

.notes-admin-item-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-admin-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}

.notes-admin-mini {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #2f6b52;
    background: #fff;
    color: #2f6b52;
    border-radius: 6px;
    cursor: pointer;
}

.notes-admin-mini:hover {
    background: rgba(47, 107, 82, 0.08);
}

.notes-admin-order {
    min-width: 2.25em;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid #94a3b8;
    background: #f1f5f9;
    color: #334155;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.2;
}

.notes-admin-order:hover {
    background: #e2e8f0;
    border-color: #64748b;
}

.notes-admin-order-input {
    width: 3.2em;
    padding: 2px 4px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border: 2px solid #2f6b52;
    border-radius: 6px;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
}

.notes-admin-order-input::-webkit-outer-spin-button,
.notes-admin-order-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.notes-admin-del {
    border-color: #dc3545;
    color: #dc3545;
}

/* 编辑笔记浮层 */
.notes-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 从卦象横版（z-index 99998）内打开编辑时须盖住横版；JS 会写内联 z-index !important 作最终保障 */
.notes-edit-overlay.notes-edit-overlay--above-gua-layout {
    z-index: 1000200 !important;
}

/* 横版大屏：卦录原文/笔记/评论编辑半屏（宽与 .liuyao-gua-layout-aux-panel 一致 min(50%,50vw)） */
@media (min-width: 768px) {
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half {
        align-items: stretch;
        justify-content: flex-end;
    }
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half.notes-edit-overlay--layout-dock-left {
        justify-content: flex-start;
    }
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half .notes-edit-box {
        width: min(50%, 50vw);
        max-width: min(50%, 50vw);
        height: 100%;
        max-height: 100vh;
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0;
        box-shadow: -8px 0 28px rgba(15, 23, 42, 0.16);
    }
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half.notes-edit-overlay--layout-dock-left .notes-edit-box {
        box-shadow: 8px 0 28px rgba(15, 23, 42, 0.16);
    }
    @supports (height: 100svh) {
        .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half .notes-edit-box {
            height: 100svh;
            max-height: 100svh;
        }
    }
}

.notes-edit-backdrop {
    position: absolute;
    inset: 0; 
}

.notes-edit-box {
    position: relative;
    background: #fff;
    border-radius: 0;
    padding: 20px 20px 88px;
    width: 100vw;
    /* 100vh 在平板浏览器常等于大视口（地址栏收起态），见下方 100svh 贴合「浏览器可视区」 */
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 笔记相关全屏浮层：用 small viewport 单元，避免平板 100vh 踩大视口（像系统全屏） */
@supports (height: 100svh) {
    .liuyao-sheet-overlay.liuyao-note-sheet-full .liuyao-sheet-box {
        width: 100svw;
        max-width: 100svw;
        height: 100svh;
        max-height: 100svh;
    }
    .notes-admin-overlay-box {
        min-height: 100svh;
    }
    .notes-edit-box {
        width: 100svw;
        max-width: 100svw;
        height: 100svh;
        max-height: 100svh;
    }
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half .notes-edit-box {
        width: min(50%, 50vw);
        max-width: min(50%, 50vw);
        height: 100svh;
        max-height: 100svh;
    }
}

.notes-edit-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 2;
}

.notes-edit-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 36px 16px 0;
    min-width: 0;
}

.notes-edit-heading {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    color: #333;
}

.notes-edit-page-zoom {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.notes-edit-page-zoom[hidden] {
    display: none !important;
}

.notes-edit-page-zoom-label {
    min-width: 2.2em;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.notes-edit-page-zoom-btn {
    padding: 6px 14px;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.notes-edit-page-zoom-btn:hover:not(:disabled) {
    background: #e2e8f0;
    border-color: #64748b;
}

.notes-edit-page-zoom-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.notes-edit-page-layout-btn[hidden] {
    display: none !important;
}

.notes-edit-dock-layout-btn[hidden] {
    display: none !important;
}

.notes-edit-dock-layout-btn[aria-pressed='true'] {
    color: #1e3a5f;
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 42%, #bfdbfe 100%);
}

/* 主页面结果坞：卦录原文 / 笔记 / 评论内联编辑（默认；与全屏浮层 DOM 迁移切换） */
.result-section .notes-edit-inline-host {
    margin: 0;
    min-width: 0;
    overflow-anchor: none;
}

.result-section .notes-edit-box--inline-dock {
    overflow-anchor: none;
}

.result-section .liuyao-gua-result-dock__panel.notes-edit-inline-active > .gua-result-dock-panel__title,
.result-section .liuyao-gua-result-dock__panel.notes-edit-inline-active > .gua-result-record-text,
.result-section .liuyao-gua-result-dock__panel.notes-edit-inline-active > .gua-result-record-comment-list,
.result-section .liuyao-gua-result-dock__panel.notes-edit-inline-active > .gua-result-record-edit-btn {
    display: none !important;
}

/* 内联添加评论：已有评论时保留列表，编辑器在其下方 */
.result-section #gua-result-record-comment-card.notes-edit-inline-active--comment-compose-has-list {
    display: flex;
    flex-direction: column;
}

.result-section
    #gua-result-record-comment-card.notes-edit-inline-active--comment-compose-has-list
    > .gua-result-record-comment-list {
    display: block !important;
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    margin-bottom: 12px;
}

.result-section
    #gua-result-record-comment-card.notes-edit-inline-active--comment-compose-has-list
    > .notes-edit-inline-host {
    flex: 0 0 auto;
}

/* 横版/全屏浮层添加评论：已有评论上下文条 + 下方编辑器 */
.notes-edit-box.notes-edit-box--comment-compose-has-list {
    overflow: hidden;
}

.notes-edit-box.notes-edit-box--comment-compose-has-list .notes-edit-existing-comments {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(38vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.45);
    pointer-events: none;
}

.notes-edit-box.notes-edit-box--comment-compose-has-list .notes-edit-existing-comments .liuyao-gua-rec-comment-compose {
    display: none !important;
}

.notes-edit-box.notes-edit-box--comment-compose-has-list .notes-edit-zoom-scroll {
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 768px) {
    .notes-edit-overlay.notes-edit-overlay--above-gua-layout.notes-edit-overlay--layout-half
        .notes-edit-box.notes-edit-box--comment-compose-has-list
        .notes-edit-existing-comments {
        max-height: min(32vh, 280px);
    }
}

/* 横版完整排盘侧栏：评论内联编辑（列表在上、编辑器在下） */
#liuyao-gua-layout-aux-panel-body .liuyao-gua-layout-aux-comment-inline-wrap.notes-edit-inline-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#liuyao-gua-layout-aux-panel-body
    .liuyao-gua-layout-aux-comment-inline-wrap.notes-edit-inline-active:not(.notes-edit-inline-active--comment-compose-has-list)
    > .gua-result-record-comment-list {
    display: none !important;
}

#liuyao-gua-layout-aux-panel-body
    .liuyao-gua-layout-aux-comment-inline-wrap.notes-edit-inline-active--comment-compose-has-list
    > .gua-result-record-comment-list {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(36vh, 340px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
}

#liuyao-gua-layout-aux-panel-body
    .liuyao-gua-layout-aux-comment-inline-wrap.notes-edit-inline-active--comment-compose-has-list
    > .notes-edit-inline-host {
    flex: 0 0 auto;
}

/* 横版完整排盘侧栏：笔记内联编辑（堆叠在上、编辑器在下） */
#liuyao-gua-layout-aux-panel-body .liuyao-gua-layout-aux-note-inline-wrap.notes-edit-inline-active {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#liuyao-gua-layout-aux-panel-body
    .liuyao-gua-layout-aux-note-inline-wrap.notes-edit-inline-active
    > .gua-result-record-text {
    display: none !important;
}

#liuyao-gua-layout-aux-panel-body .notes-edit-inline-host {
    margin: 0;
    min-width: 0;
}

#liuyao-gua-layout-aux-panel-body .notes-edit-box.notes-edit-box--inline-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 12px 12px 64px;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    overflow: visible;
    box-sizing: border-box;
}

#liuyao-gua-layout-aux-panel-body .notes-edit-box.notes-edit-box--inline-dock .notes-edit-zoom-scroll {
    flex: none;
    min-height: 0;
    overflow: visible;
}

#liuyao-gua-layout-aux-panel-body .notes-edit-box.notes-edit-box--inline-dock .notes-edit-rich {
    flex: none;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
}

#liuyao-gua-layout-aux-panel-body .notes-edit-box.notes-edit-box--inline-dock .notes-edit-rich.notes-edit-rich--inline-clamped {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 16px 16px 72px;
    border-radius: 8px;
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    overflow: visible;
    box-sizing: border-box;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock.notes-edit-box--page-zoom-layout {
    overflow: visible;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-zoom-scroll {
    flex: none;
    min-height: 0;
    overflow: visible;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-zoom-inner {
    flex: none;
    min-height: min-content;
    overflow: visible;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-header-row,
.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-label,
.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-input,
.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-classic-row,
.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-toolbar-block,
.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-record-context {
    flex-shrink: 0;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-rich {
    flex: none;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 0;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock.notes-edit-box--page-zoom-layout .notes-edit-rich {
    min-height: 0;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-rich.notes-edit-rich--inline-clamped {
    overflow-y: auto;
    overflow-anchor: auto;
    scroll-padding-top: 8px;
    scroll-padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-btns {
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .result-section .notes-edit-box.notes-edit-box--inline-dock {
        padding: 12px 12px 64px;
    }

    .result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-header-row {
        margin: 0 28px 12px 0;
        gap: 8px;
    }

    .result-section .notes-edit-box.notes-edit-box--inline-dock .notes-edit-page-zoom-btn {
        padding: 5px 10px;
        font-size: 13px;
    }
}

.notes-edit-page-layout-btn[aria-pressed='true'] {
    color: #1e3a5f;
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 42%, #bfdbfe 100%);
}

/* 笔记编辑浮层：缩放仅作用于中间可滚动区，标题行与底部「确定」保持固定可见 */
.notes-edit-zoom-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.notes-edit-zoom-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.notes-edit-box.notes-edit-box--page-zoom-layout {
    overflow: hidden;
}

.notes-edit-box.notes-edit-box--page-zoom-layout.notes-edit-box--inline-dock {
    overflow: visible;
}

.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-header-row {
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    background: #fff;
}

/* 卦录笔记/评论编辑：顶栏与奇门一致，操作钮靠右 */
.notes-edit-box--comment-mode.notes-edit-box--page-zoom-layout .notes-edit-header-row {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    width: 100%;
    box-sizing: border-box;
}

.notes-edit-box--comment-mode.notes-edit-box--page-zoom-layout .notes-edit-heading {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
}

.notes-edit-box--comment-mode.notes-edit-box--page-zoom-layout .notes-edit-page-zoom {
    margin-left: auto;
}

.notes-edit-box--comment-mode .notes-edit-header-row {
    flex-wrap: nowrap;
    align-items: center;
}

.notes-edit-box--comment-mode .notes-edit-page-zoom {
    display: inline-flex;
    flex-wrap: nowrap;
}

/* 学易笔记：顶栏标题与缩放钮同一行（与卦录笔记/评论一致） */
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--comment-mode) .notes-edit-header-row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--comment-mode) .notes-edit-heading {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--comment-mode) .notes-edit-page-zoom {
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-zoom-scroll {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 4;
    /* 勿 hidden：工具栏配色/诗体弹层在上方展开，会被裁切 */
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-zoom-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* 全站标准：加大/减小只对 #notes-edit-lines 设 zoom；zoom-inner 仅作布局壳，勿再对其设 zoom */

/* 全屏模式：工具栏可溢出以显示配色弹层（对齐奇门 qimenRecordCommentEdit.css） */
.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-toolbar-block {
    position: relative;
    z-index: 5;
    overflow: visible;
}

.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-color-wrap,
.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-poetry-wrap {
    overflow: visible;
}

.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-color-popover,
.notes-edit-box.notes-edit-box--page-zoom-layout .notes-edit-poetry-popover {
    z-index: 100020;
    pointer-events: auto;
}

.notes-edit-toolbar-block--comment-mode .notes-edit-color-wrap {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.notes-edit-toolbar-block--comment-mode .notes-edit-color-popover {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 全屏浮层（非容器内联）：与 inline-dock 一致——顶栏/工具栏固定，仅正文滚动 */
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-record-context,
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-label,
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-input,
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-classic-row,
.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-toolbar-block {
    flex-shrink: 0;
}

.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-rich {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 8px;
    scroll-padding-bottom: 12px;
}

.notes-edit-box.notes-edit-box--page-zoom-layout:not(.notes-edit-box--inline-dock) .notes-edit-btns {
    flex-shrink: 0;
}

.notes-edit-record-context {
    margin: -8px 0 14px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    line-height: 1.55;
}

.notes-edit-record-matter-line,
.notes-edit-record-meta-line {
    margin: 0;
    font-size: 14px;
    color: #334155;
    word-break: break-word;
}

.notes-edit-record-matter-line + .notes-edit-record-meta-line {
    margin-top: 6px;
}

/* 第二行：复用卦录列表 .liuyao-gua-rec-line2 结构与 gua-records.css 五行配色 */
.notes-edit-record-meta-line {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #1e293b;
}

.notes-edit-record-meta-line .notes-edit-record-meta-inner,
.notes-edit-record-meta-line .liuyao-gua-rec-line2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.notes-edit-record-meta-line .liuyao-gua-rec-gua-names {
    text-align: left;
    white-space: normal;
}

.notes-edit-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

/* 编辑页不展示「分类」「标题」可见提示；控件保留 aria-label / for 关联 */
.notes-edit-box .notes-edit-title-row .notes-edit-label,
.notes-edit-box label.notes-edit-label[for='notes-edit-title'],
.notes-edit-box label.notes-edit-label[for='notes-edit-category'] {
    display: none !important;
}

.notes-edit-title-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.notes-edit-category-wrap {
    flex: 0 0 auto;
    width: 92px;
}

.notes-edit-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.notes-edit-category-select {
    width: 100%;
    margin-bottom: 14px;
    cursor: pointer;
}

.notes-edit-title-wrap .notes-edit-title-input {
    margin-bottom: 14px;
}

.notes-edit-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    margin-bottom: 14px;
    box-sizing: border-box;
    white-space: pre-wrap;
}

.notes-edit-classic-row {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.notes-edit-classic-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
}

.notes-edit-classic-preset-btn {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.notes-edit-classic-preset-btn:hover,
.notes-edit-classic-preset-btn:focus {
    background: #f1f5f9;
    outline: none;
}

.notes-edit-classic-preset-btn--active,
.notes-edit-classic-preset-btn[aria-pressed="true"] {
    border-color: #64748b;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 600;
}

.notes-edit-classic-name-input {
    margin-bottom: 0;
    flex: 1 1 120px;
    min-width: 8em;
}

.notes-edit-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    box-sizing: border-box;
    resize: vertical;
    font-family: inherit;
}

.notes-edit-toolbar-block {
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* 卦录评论编辑：仅保留 色 / 配色微调 / 图片 / 加粗 / 格式清除 */
.notes-edit-toolbar-block--comment-mode .notes-edit-rich-toolbar > *:not(.notes-edit-color-wrap):not(#notes-edit-bold):not(#notes-edit-clear-format):not(#notes-edit-image-upload) {
    display: none !important;
}

.notes-edit-toolbar-block--comment-mode > .notes-edit-guali-overlay,
.notes-edit-toolbar-block--comment-mode > #notes-edit-audio-expand {
    display: none !important;
}

.notes-edit-toolbar-block .notes-edit-rich-toolbar {
    margin-bottom: 0;
}

.notes-edit-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    row-gap: 8px;
    position: relative;
}

.notes-edit-rich-toolbar > button,
.notes-edit-rich-toolbar > .notes-edit-color-wrap,
.notes-edit-rich-toolbar > .notes-edit-poetry-wrap {
    flex-shrink: 0;
}

.notes-edit-audio-expand {
    margin-top: 8px;
}

.notes-edit-audio-expand[hidden] {
    display: none !important;
}

.notes-edit-audio-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
}

.notes-edit-audio-upload-btn {
    flex: 0 0 auto;
    border: none;
    border-right: 1px solid #ddd;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    white-space: nowrap;
}

.notes-edit-audio-upload-btn:hover {
    background: #eef2f7;
}

.notes-edit-audio-prefix {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 12px;
    font-size: 14px;
    color: #64748b;
    background: #f1f5f9;
    border-right: 1px solid #ddd;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.notes-edit-audio-suffix-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    padding: 10px 12px;
    font-size: 14px;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.notes-edit-color-wrap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notes-edit-color-btn {
    box-sizing: border-box;
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    color: #333;
    cursor: pointer;
}

.notes-edit-color-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

.notes-edit-color-btn.is-active,
.notes-edit-color-btn[aria-pressed='true'] {
    background: #2a6350;
    border-color: #1e4d3f;
    color: #f4faf7;
    box-shadow: 0 1px 4px rgba(30, 77, 63, 0.25);
}

.notes-edit-color-btn.is-active:hover,
.notes-edit-color-btn[aria-pressed='true']:hover {
    background: #1e4d3f;
    border-color: #163d32;
}

.notes-edit-palette-btn {
    box-sizing: border-box;
    min-width: 36px;
    width: 36px;
    height: 32px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-edit-palette-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

.notes-edit-palette-btn[aria-expanded="true"] {
    border-color: #64748b;
    background: #e2e8f0;
}

/* 诗体配色已废弃（2026-07）：工具栏不再提供入口；历史正文着色仍可读 */
.notes-edit-poetry-wrap {
    display: none !important;
}

.notes-edit-poetry-btn {
    box-sizing: border-box;
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    color: #333;
    cursor: pointer;
}

.notes-edit-poetry-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

.notes-edit-poetry-palette-btn {
    box-sizing: border-box;
    min-width: 36px;
    width: 36px;
    height: 32px;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    border: 2px solid #c62828;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    color: #c62828;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-edit-poetry-palette-btn:hover {
    background: #e5e7eb;
}

.notes-edit-poetry-palette-btn[aria-expanded="true"] {
    border-color: #64748b;
    background: #e2e8f0;
}

.notes-edit-poetry-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    top: auto;
    z-index: 10005;
    min-width: 220px;
    padding: 10px 12px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px 10px 8px 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.notes-edit-poetry-popover[hidden] {
    display: none !important;
}

.notes-edit-color-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    top: auto;
    z-index: 10005;
    min-width: 252px;
    padding: 10px 12px 12px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 10px 10px 8px 8px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.notes-edit-color-popover[hidden] {
    display: none !important;
}

.notes-edit-color-popover-inner {
    margin: 0;
}

.notes-edit-color-pop-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.02em;
}

.notes-edit-color-pop-label--jx {
    margin-top: 12px;
}

.notes-edit-color-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.notes-edit-color-grid--jx {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}

.notes-edit-color-swatch {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.35);
}

.notes-edit-color-swatch--jin {
    background: #c9a227;
    color: #1a1a1a;
    text-shadow: none;
}

.notes-edit-color-swatch--mu {
    background: #2e7d32;
}

.notes-edit-color-swatch--shui {
    background: #1565c0;
}

.notes-edit-color-swatch--huo {
    background: #c62828;
}

.notes-edit-color-swatch--tu {
    background: #8d6e63;
}

.notes-edit-color-swatch--ji {
    background: #0f766e;
}

.notes-edit-color-swatch--xiong {
    background: #b91c5c;
}

.notes-edit-color-swatch--ping {
    background: #4b5563;
}

.notes-edit-color-auto-btn {
    box-sizing: border-box;
    min-width: 44px;
    height: 32px;
    padding: 0 10px;
    margin-left: 4px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    cursor: pointer;
}

.notes-edit-color-auto-btn:hover {
    background: #eef2f7;
    border-color: #64748b;
}

.notes-edit-bold-btn {
    box-sizing: border-box;
    min-width: 36px;
    height: 32px;
    padding: 0 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #f3f4f6;
    color: #222;
    cursor: pointer;
}

.notes-edit-bold-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

.notes-edit-fs-btn {
    box-sizing: border-box;
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #f3f4f6;
    color: #222;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-edit-fs-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

.notes-edit-rich {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6; 
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
    outline: none;
    white-space: pre-wrap;
}

.notes-edit-rich:focus {
    border-color: #94a3b8;
}

.notes-edit-rich > p {
    margin: 0 0 6px;
    min-height: 1.5em;
}

.notes-edit-rich > p:last-child {
    margin-bottom: 0;
}

.notes-edit-bracket-title {
    font-size: 1.12em;
    font-weight: 700;
    color: #1565c0;
}

.notes-edit-bracket-tail {
    font-size: 1.12em;
    font-weight: 400;
    color: #1565c0;
}

.notes-edit-numbered-title {
    color: #1565c0;
    font-weight: 700;
    font-size: 1.12em;
}

.notes-edit-inline-img {
    max-width: 100%;
    height: auto;
 /*   max-height: 220px; */
    vertical-align: middle;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin: 4px 0;
    display: inline-block;
    background: #f8fafc;
}

.notes-edit-image-icon-btn {
    box-sizing: border-box;
    min-width: 36px;
    width: 36px;
    height: 32px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff 0%, #f3f4f6 100%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notes-edit-image-icon-btn:hover {
    background: #e5e7eb;
    border-color: #999;
}

#notes-edit-guali-toggle {
    min-width: 48px;
    width: auto;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
}

#notes-edit-guali-toggle[aria-expanded="true"] {
    border-color: #64748b;
    background: #e2e8f0;
}

/* 卦例：全站卦录搜索浮层 */
.notes-edit-guali-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.42);
    overflow: hidden;
    overscroll-behavior: contain;
}

.notes-edit-guali-overlay[hidden] {
    display: none !important;
}

.notes-edit-guali-overlay-panel {
    width: min(100%, 640px);
    max-height: calc(100% - 24px);
    height: min(88vh, 100%);
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.notes-edit-guali-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid #e5e7eb;
}

.notes-edit-guali-overlay-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
}

.notes-edit-guali-overlay-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 2px 6px;
}

.notes-edit-guali-overlay-close:hover {
    color: #1f2937;
}

.notes-edit-guali-overlay-panel .notes-edit-guali-search-bar {
    padding: 10px 14px 0;
}

.notes-edit-guali-overlay-panel .notes-edit-guali-search-hint {
    margin: 8px 14px 0;
}

.notes-edit-guali-overlay-panel .liuyao-gua-rec-pagination {
    padding: 8px 14px 0;
}

.notes-edit-guali-search-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 8px 14px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}

.notes-edit-guali-search-item {
    width: 100%;
    display: block;
    text-align: left;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.55;
    color: #1f2937;
    cursor: pointer;
}

.notes-edit-guali-search-item:last-child {
    border-bottom: none;
}

.notes-edit-guali-search-item:hover {
    background: #f8fafc;
}

.notes-edit-guali-search-item-line1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.notes-edit-guali-module-badge,
.notes-edit-guali-bucket-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.notes-edit-guali-module-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.notes-edit-guali-bucket-badge {
    background: #f1f5f9;
    color: #475569;
}

.notes-edit-guali-search-item-matter {
    font-weight: 700;
}

.notes-edit-guali-search-item-gua {
    color: #334155;
    font-size: 13px;
}

.notes-edit-guali-search-item-snippet {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
}

.notes-edit-guali-search-item-snippet .liuyao-gua-rec-search-hit {
    color: #b45309;
    font-weight: 700;
}

.notes-edit-guali-popover {
    margin-top: 8px;
    max-height: 280px;
    overflow: auto;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.notes-edit-guali-popover[hidden] {
    display: none !important;
}

.notes-edit-guali-item {
    width: 100%;
    display: block;
    text-align: left;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    cursor: pointer;
}

.notes-edit-guali-item:last-child {
    border-bottom: none;
}

.notes-edit-guali-item:hover {
    background: #f8fafc;
}

.notes-edit-guali-item-index {
    color: #64748b;
    margin-right: 2px;
}

.notes-edit-guali-item .sizhu-jin,
.notes-edit-guali-item .sizhu-mu,
.notes-edit-guali-item .sizhu-shui,
.notes-edit-guali-item .sizhu-huo,
.notes-edit-guali-item .sizhu-tu {
    font-weight: 700;
}

.notes-classic-case-ref {
    cursor: pointer;
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

/* 编辑区：卦录整块原子块，不可选中/编辑内部；左右键跳过整块 */
.notes-edit-rich .notes-classic-case-ref--atomic,
.notes-edit-rich [data-notes-atomic-block="classic-case-ref"] {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    caret-color: transparent;
}

.notes-edit-rich .notes-classic-case-ref--atomic .yongshen-export-qin-capsule,
.notes-edit-rich [data-notes-atomic-block="classic-case-ref"] .yongshen-export-qin-capsule {
    cursor: pointer;
}

.notes-edit-rich .notes-classic-case-ref--atomic *,
.notes-edit-rich [data-notes-atomic-block="classic-case-ref"] * {
    user-select: none;
    -webkit-user-select: none;
}

.notes-edit-rich .notes-classic-case-ref--atomic .yongshen-export-qin-capsule,
.notes-edit-rich [data-notes-atomic-block="classic-case-ref"] .yongshen-export-qin-capsule {
    user-select: none;
    -webkit-user-select: none;
}

/* ===== 笔记卦录：迷你排盘（窄屏简化 DOM；≥768px 或桌面横屏为横版同源 LiuyaoGuaImageExport.buildExportContent） ===== */
.notes-classic-case-ref--with-mini {
    /* 块级 flex（非 inline-flex）：后续正文换行；宽度用 max-content 与原先 fit-content 一致，由排盘实际宽度决定，不拉满整段 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    /* 勿用 inherit：父级若未设字色时，导语「得“…”」易与背景混淆；排盘区内仍用各自字号/色 */
    color: #1d4ed8;
}

/* 奇门迷你盘需与卦录页同宽，避免 max-content 把九宫挤窄 */
.notes-classic-case-ref--with-mini.notes-classic-case-ref--qimen-mini {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

/* 六爻主页同源迷你盘：与主页面本卦/变卦同宽，避免 max-content 触发横向滚动 */
.notes-classic-case-ref--with-mini:has(.notes-classic-main-paipan-wrap) {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.notes-classic-case-ref--with-mini .notes-classic-simplified-paipan,
.notes-classic-case-ref--with-mini .notes-classic-mini-card,
.notes-classic-case-ref--with-mini .notes-classic-main-paipan-wrap,
.notes-classic-case-ref--with-mini .notes-classic-export-paipan-wrap,
.notes-classic-case-ref--with-mini > .qimen-display-section {
    color: #444;
    font-weight: 400;
    /* 与正文同宽作滚动视口；内层 .notes-sp-main 仍 max-content，标准一致 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 奇门卦例：笔记内直接使用 qimen-pan-info-section + qimen-display-section */
.notes-classic-case-ref--qimen-mini > .qimen-pan-info-section {
    margin-top: 0.35em;
    margin-bottom: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.notes-classic-case-ref--qimen-mini > .qimen-pan-info-section .qimen-pan-meta {
    margin: 0;
}

.notes-classic-case-ref--qimen-mini .notes-qimen-mini-matter {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.45;
}

.notes-classic-case-ref--qimen-mini .notes-qimen-mini-info {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
}

.notes-classic-case-ref--qimen-mini > .qimen-display-section {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

.liuyao-sheet-text-wrap .notes-classic-case-ref--with-mini.notes-classic-case-ref--qimen-mini {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.liuyao-sheet-text-wrap .notes-classic-case-ref--with-mini:has(.notes-classic-main-paipan-wrap) {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
}

.liuyao-sheet-text-wrap .notes-qimen-mini-paipan,
.liuyao-sheet-text-wrap .notes-classic-case-ref--qimen-mini > .qimen-display-section {
    white-space: normal;
}

/* 与横版浮层同源：LiuyaoGuaImageExport.buildExportContent 克隆，嵌在笔记内 */
.notes-classic-export-paipan-wrap {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin-top: 0.25em;
    position: relative;
    padding: 0.45em 10px 1.65em;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* 电脑大屏：横版同源迷你排盘在锚点内靠左对齐（锚点宽度为 max-content，与排盘内容一致） */
@media (min-width: 1200px) {
    .notes-classic-case-ref--with-mini .notes-classic-export-paipan-wrap {
        align-self: flex-start;
        margin-right: auto;
    }
}

/* result-export.css 将 .liuyao-gua-export-host 置于 left:-20000px 供离屏生图；笔记内必须拉回可视区（同横版浮层覆盖） */
.notes-classic-export-paipan-wrap .liuyao-gua-export-host {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: max-content;
    max-width: none;
    min-width: 360px;
    margin: 0;
    flex-shrink: 0;
    will-change: auto;
}

/* 无侧栏时勿用 stretch 把本卦/变卦卡纵向拉齐，避免一侧出现大块空白 */
.notes-classic-export-paipan-wrap .liuyao-gua-export-row {
    align-items: flex-start;
}

/* 与 .liuyao-gua-layout-overlay 内横版一致：爻象槽加粗拉伸 */
.notes-classic-export-paipan-wrap .liuyao-gua-export-host .yao-symbol-wrap {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    font-size: 17px;
    height: 0.9em;
    min-height: 15px;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
}

.notes-classic-export-paipan-wrap .liuyao-gua-export-host .yao-symbol {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    object-position: center;
    display: block;
}

.notes-classic-export-paipan-wrap .liuyao-gua-export-host .dongyao-item {
    word-break: break-word;
    overflow-wrap: break-word;
}

.notes-classic-export-paipan-wrap .liuyao-gua-export-host .ben-gua-fushen-block {
    max-width: 100%;
}

.notes-classic-simplified-paipan {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25em;
    position: relative;
    padding: 0.5em 10px 1.65em;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    /* 与 .notes-classic-export-paipan-wrap 一致：行宽随内容，超出时横向滑动，避免本卦/变卦 flex 劈分导致误换行 */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    font-family: var(--liuyao-note-body-font-family, inherit);
    font-size: var(--liuyao-note-body-font-size, 15px);
    line-height: 1.35;
}

.notes-sp-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* 与 result-export .liuyao-gua-export-row：列间距固定 px，避免 em 随字号变、与本卦/变卦内容宽度叠加造成「忽远忽近」 */
    gap: 10px 12px;
    width: max-content;
    max-width: none;
    min-width: min-content;
    box-sizing: border-box;
}

/* 本卦/变卦列宽 = 各自内容（勿 min-width:0，以免在部分嵌套宽度下被压窄触发行内 wrap） */
.notes-sp-col {
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
    max-width: none;
    box-sizing: border-box;
}

.notes-sp-head {
    margin-bottom: 0.35em;
}

.notes-sp-name {
    font-weight: 600;
}

.notes-sp-type {
    font-size: 0.92em;
    opacity: 0.9;
}

.notes-sp-lines {
    display: flex;
    flex-direction: column;
    gap: 0.12em;
}

/* 每爻一行横排到底；整体超出时由 .notes-classic-simplified-paipan overflow-x 滑动，避免同一套 DOM 下列宽算差导致有的卦断行、有的不断 */
.notes-sp-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.2em 0.45em;
}

.notes-sp-line--bian-static .notes-sp-gz,
.notes-sp-line--bian-static .notes-sp-lq,
.notes-sp-line--bian-static .notes-sp-ws {
    opacity: 0.72;
}

.notes-sp-cell {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.notes-sp-sy {
    width: 1em;
    justify-content: center;
    font-weight: 600;
}

.notes-sp-symbol-wrap {
    flex-shrink: 0;
}

.notes-sp-symbol {
    display: block;
    width: 1.15em;
    height: 0.8em;
/*    vertical-align: middle;*/
}

.notes-sp-lq {
    min-width: 1.5em;
}

/* 手机端笔记迷你排盘：隐藏月建旺衰列（旺相休囚死单字），与 prefersWide 的 768px 分界一致 */
@media (max-width: 767px) {
    .notes-classic-case-ref--with-mini .notes-classic-simplified-paipan .notes-sp-ws {
        display: none !important;
    }

    .notes-classic-case-ref--with-mini .notes-classic-export-paipan-wrap .yao-wangshuai {
        display: none !important;
    }

    /* 卦名后卦宫五行括号（如 （乾金）），简化排盘与横版克隆标题共用 .notes-mini-gua-gong */
    .notes-classic-case-ref--with-mini .notes-mini-gua-gong {
        display: none !important;
    }
}

.notes-sp-fushen {
    margin-top: 0;
    font-size: 0.92em;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 通栏伏神：节点仍带 ben-gua-fushen-block 以命中 gua-layout 内 .dongyao-* 等子规则，在此覆盖根级 margin/padding/border/字号 */
.notes-classic-simplified-paipan > .notes-sp-fushen--below-pair.ben-gua-fushen-block {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: 0.92em;
    line-height: 1.35;
    color: #444;
}

.notes-classic-simplified-paipan > .notes-sp-fushen--below-pair {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* 伏神行与飞神行紧邻：避免两行各自 margin:2px 0 叠成过高空隙 */
.notes-classic-simplified-paipan > .notes-sp-fushen--below-pair .dongyao-fushen-main .dongyao-fushen-row + .dongyao-fushen-row {
    margin-top: 0;
}

.notes-sp-fushen .dongyao-item {
    white-space: normal;
}

.notes-sp-bian-extra {
    margin-top: 0.35em;
    font-size: 0.92em;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
}

/* 旧版兜底 HTML（极少触发）仍用卡片盒子 */
.notes-classic-mini-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0.25em 0 0;
    position: relative;
    padding: 0.45em 10px 1.65em;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
    color: inherit;
    font-family: var(--liuyao-note-body-font-family, inherit);
    font-size: var(--liuyao-note-body-font-size, 15px);
}

/* 离屏 staging：供迷你卦录 displayResult，不参与页面布局 */
.notes-classic-paipan-staging {
    position: fixed;
    left: -12000px;
    top: 0;
    width: 960px;
    max-width: 100vw;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

/* 迷你卦录：result-section 兼作 gua-layout 作用域（notes-classic-main-paipan-layout.css），无额外外围卡片 */
.notes-classic-main-paipan-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25em;
    position: relative;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow-x: visible;
    overflow-y: visible;
}

.notes-classic-main-paipan-wrap.notes-classic-mini-result-section,
.result-section.notes-classic-main-paipan-wrap {
    display: block !important;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    min-width: 0;
}

.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack {
    margin: 0;
}

.notes-classic-main-paipan-wrap .liuyao-gua-pair-merged.gua-container {
    margin: 0;
}

/* 笔记内六爻迷你盘：不限高、不出现横向/纵向滚动条（覆盖 gua-layout 主页滑动与 pair-fit 裁切） */
.notes-classic-main-paipan-wrap,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .notes-classic-mini-gua-pair-merged,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .notes-classic-mini-gua-pair-merged.gua-container,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .liuyao-gua-pair-row-fit,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .liuyao-gua-pair-row-fit.is-liuyao-pair-fit-scaled,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .liuyao-gua-pair-row-fit.is-liuyao-pair-fit-scale-capped,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .liuyao-gua-pair-scale-inner,
.notes-classic-main-paipan-wrap .liuyao-gua-visual-stack .liuyao-gua-visual-stack-inner {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    -webkit-overflow-scrolling: auto;
}

.notes-classic-case-ref--with-mini:has(.notes-classic-main-paipan-wrap),
.liuyao-sheet-text-wrap .notes-classic-case-ref--with-mini:has(.notes-classic-main-paipan-wrap) {
    overflow: visible;
}

.notes-classic-simplified-paipan::after,
.notes-classic-mini-card::after,
.notes-classic-export-paipan-wrap::after {
    content: '点击展开';
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
    color: #2563eb;
    pointer-events: none;
}

.notes-classic-case-row-first {
    border-top: none;
    margin-top: 10px;
    padding-top: 8px;
}

#notes-edit-format {
    font-size: 15px;
}

.notes-edit-btns {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.notes-edit-confirm-btn {
    box-sizing: border-box;
    width: 112px;
    height: 40px;
    padding: 0;
    margin: 0;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1.2;
}

/* 卦录评论编辑（对齐全站 §8） */
.notes-edit-box--comment-mode .notes-edit-close {
    display: none !important;
}

.notes-edit-box--comment-mode .notes-edit-header-row {
    margin-right: 0;
}

.notes-edit-box--comment-mode .notes-edit-heading {
    font-size: 15px;
    font-weight: 600;
}

.notes-edit-box--comment-mode .notes-edit-btns {
    justify-content: center;
    gap: 12px;
}

/* 卦录笔记/评论：底栏钮与奇门一致，覆盖学易笔记 primary-btn 大圆角 */
.notes-edit-box--comment-mode .notes-edit-btns .primary-btn.notes-edit-confirm-btn {
    width: 112px;
    max-width: none;
    height: 40px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(47, 107, 82, 0.28);
    transform: none;
}

.notes-edit-box--comment-mode .notes-edit-btns .primary-btn.notes-edit-confirm-btn:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(47, 107, 82, 0.34);
}

.notes-edit-box--comment-mode .notes-edit-btns .primary-btn.notes-edit-confirm-btn:active {
    transform: none;
}

.notes-edit-box--comment-mode .notes-edit-record-context {
    margin: 0 0 8px;
    padding: 6px 10px;
}

.notes-edit-cancel-btn {
    box-sizing: border-box;
    width: 112px;
    height: 40px;
    padding: 0;
    margin: 0;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    line-height: 1.2;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    font-family: inherit;
}

.notes-edit-cancel-btn:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.notes-edit-cancel-btn[hidden] {
    display: none !important;
}