:root{
    --ce-btn-color:#fff;
    --ce-btn-bg:rgba(0, 0, 0, 0.55);
    --ce-btn-hover-bg:rgba(0, 0, 0, 0.75);
    --ce-btn-radius:16px;
    --ce-header-bg:#e8ecf1;
    --ce-header-color:#24292e;
    --ce-line-num-color:#adb5bd;
    --ce-line-num-width:3em;
    --ce-border-color:#d1d5da;
}

.ce-fold-wrap{
    margin:16px 0;
    border-radius:8px;
    border:1px solid var(--ce-border-color);
    position:relative;
    overflow:hidden;
}

/* 启用高亮时：让 hljs 完全控制样式 */
.ce-highlight-enabled .ce-fold-wrap > pre {
    background: transparent;
    margin: 0;
    border: none;
    box-shadow: none;
}

.ce-highlight-enabled .ce-fold-wrap > pre > code.hljs {
    background: transparent !important;
}

/* 未启用高亮时：继承页面样式 */
.ce-highlight-disabled .ce-fold-wrap {
    background: inherit;
}

.ce-highlight-disabled .ce-fold-wrap > pre {
    background: inherit;
    color: inherit;
}

.ce-highlight-disabled .ce-fold-wrap > pre > code {
    background: transparent;
    color: inherit;
}

.ce-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    background:var(--ce-header-bg);
    border-bottom:1px solid var(--ce-border-color);
    border-radius:8px 8px 0 0;
    font-size:12px;
    color:var(--ce-header-color);
    user-select:none;
}

.ce-header-dots{display:flex;gap:6px}
.ce-header-dot{width:10px;height:10px;border-radius:50%}
.ce-header-dot--red{background:#ff5f57}
.ce-header-dot--yellow{background:#febc2e}
.ce-header-dot--green{background:#28c840}

.ce-header-lang{font-family:monospace;font-weight:600;text-transform:uppercase;letter-spacing:.5px;font-size:11px}

.ce-header-copy{
    padding:4px 10px;
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    background:0 0;
    border:1px solid var(--ce-border-color);
    color:var(--ce-header-color);
    transition:all .15s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    min-height:28px;
    display:flex;
    align-items:center;
}
.ce-header-copy:hover{background:rgba(128,128,128,.12)}
.ce-header-copy:active{background:rgba(128,128,128,.2);transform:scale(.98)}
.ce-header-copy--copied{color:#28c840;border-color:#28c840}

.ce-header-actions{display:flex;gap:6px;align-items:center}

.ce-header-fold{
    border-radius:6px;
    font-size:12px;
    cursor:pointer;
    background:0 0;
    border:1px solid var(--ce-border-color);
    color:var(--ce-header-color);
    transition:all .15s;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:28px;
    padding:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.ce-header-fold:hover{background:rgba(128,128,128,.12)}
.ce-header-fold:active{background:rgba(128,128,128,.2);transform:scale(.98)}

.ce-header-fold-icon{font-size:9px;transition:transform .2s;line-height:1}
.ce-header-fold-icon--fold{display:none}
.ce-header-fold--folded .ce-header-fold-icon--unfold{display:none}
.ce-header-fold--folded .ce-header-fold-icon--fold{display:inline}

.ce-fully-folded > pre{display:none!important}
.ce-fully-folded > .ce-collapse-btn,.ce-fully-folded > .ce-expand-btn{display:none!important}
.ce-fully-folded{border-bottom:none}
.ce-fully-folded > .ce-header{border-radius:8px;border-bottom:none;cursor:pointer}
.ce-fully-folded > .ce-header:hover{filter:brightness(.95)}

/* :has() 选择器：现代浏览器支持 */
@supports selector(:has(*)) {
    .ce-fold-wrap:has(.ce-header) > pre{border-radius:0 0 8px 8px}
}

/* fallback：不支持 :has() 的浏览器 */
.ce-fold-wrap > pre:first-child{border-radius:0 0 8px 8px}

.ce-code-grid{display:grid;grid-template-columns:var(--ce-line-num-width) 1fr;gap:0;width:100%}
.ce-line-num{
    grid-column:1;
    width:var(--ce-line-num-width);
    min-width:var(--ce-line-num-width);
    padding:0 8px 0 12px;
    text-align:right;
    color:var(--ce-line-num-color);
    font-size:.85em;
    font-family:monospace;
    line-height:inherit;
    user-select:none;
    white-space:nowrap;
}
.ce-line-code{
    grid-column:2;
    padding:0 12px 0 8px;
    white-space:pre;
    line-height:inherit;
}
.ce-code-grid > .ce-line-code:nth-child(2n):hover,.ce-code-grid > .ce-line-num:nth-child(odd):hover + .ce-line-code{background:rgba(128,128,128,.05)}

.ce-code-fold{
    max-height:var(--ce-fold-height,320px)!important;
    overflow-y:auto!important;
    overflow-x:auto!important;
    position:relative;
    transition:max-height .35s ease;
    border:none;
    box-shadow:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.ce-code-fold::-webkit-scrollbar{display:none;width:0;height:0}

.ce-code-unfold{max-height:none!important;overflow:auto!important;border:none;box-shadow:none}

.ce-code-fold::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:80px;
    background:linear-gradient(transparent,rgba(128,128,128,.2));
    pointer-events:none;
    z-index:1;
}
.ce-code-unfold::after{display:none}

.ce-collapse-btn,.ce-expand-btn,.ce-img-expand-btn{
    padding:5px 14px;
    border-radius:var(--ce-btn-radius);
    font-size:12px;
    line-height:1.4;
    cursor:pointer;
    background:var(--ce-btn-bg);
    border:none;
    color:var(--ce-btn-color);
    transition:all .2s;
    user-select:none;
    display:inline-flex;
    align-items:center;
    gap:5px;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    letter-spacing:.5px;
}
.ce-collapse-btn:hover,.ce-expand-btn:hover,.ce-img-expand-btn:hover{background:var(--ce-btn-hover-bg)}

.ce-fold-wrap > .ce-expand-btn{
    position:sticky;
    bottom:10px;
    z-index:2;
    display:flex;
    margin:-36px auto 10px;
    pointer-events:auto;
}
.ce-collapse-btn{
    position:sticky;
    bottom:10px;
    z-index:2;
    display:flex;
    margin:8px auto;
    pointer-events:auto;
}

.ce-img-expand-btn{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}
.ce-img-expand-btn:hover{transform:translateX(-50%) scale(1.03)}

.ce-expand-icon{font-size:10px;transition:transform .2s;line-height:1}

.ce-img-wrap{position:relative;display:inline-block;max-width:100%}
.ce-img-wrap.ce-img-folded{
    max-height:var(--ce-img-fold-height,240px);
    overflow:hidden;
    display:block;
    transition:max-height .35s ease;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.ce-img-wrap.ce-img-folded::-webkit-scrollbar{display:none;width:0;height:0}
.ce-img-wrap.ce-img-unfolded{max-height:none!important;overflow:visible}

.ce-img-wrap.ce-img-folded::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:60px;
    background:linear-gradient(transparent,rgba(0,0,0,.25));
    pointer-events:none;
    z-index:1;
}
.ce-img-wrap.ce-img-unfolded::after{display:none}

@media (max-width:768px){
    .ce-collapse-btn,.ce-expand-btn,.ce-img-expand-btn{padding:4px 10px;font-size:11px}
    .ce-line-num{width:2.5em;min-width:2.5em;padding:0 4px 0 8px}
    .ce-header{padding:6px 10px}
    .ce-header-lang{font-size:10px}
    .ce-header-copy{padding:3px 8px;font-size:11px;min-height:26px}
    .ce-header-fold{width:28px;height:26px}
}

@media (max-width:480px){
    .ce-fold-wrap{margin:10px 0;border-radius:6px}
    .ce-header{padding:5px 8px}
    .ce-header-dots{gap:4px}
    .ce-header-dot{width:8px;height:8px}
    .ce-header-lang{display:none}
    .ce-line-num{width:2em;min-width:2em;padding:0 3px 0 6px;font-size:.8em}
    .ce-line-code{padding:0 8px 0 6px;font-size:12px}
    .ce-collapse-btn,.ce-expand-btn,.ce-img-expand-btn{padding:3px 8px;font-size:10px}
    .ce-img-expand-btn{bottom:6px}
}