.x-github {
    border: 1px solid #ccc;
    border-radius: .25em;
    font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif
}

.x-github-title {
    padding: .5em;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    border-radius: .25em .25em 0 0
}

.x-github-title .icon {
    padding-top: 2px;
    padding-right: .5em
}

.x-github-title svg {
    width: 16px;
    height: 16px
}

.x-github-title > a, .x-github-title span {
    text-decoration: none
}

.x-github-title > a:hover {
    text-decoration: underline
}

.x-github-content {
    padding: .5em
}

.x-github-footer {
    display: flex;
    gap: .5em;
    padding: .75em
}

.x-github-statics {
    margin-left: auto;
    align-items: center;
    gap: .5em;
    display: none
}

.x-github-statics > span {
    display: flex;
    align-items: center;
    gap: .25em
}

.x-github-btn {
    display: inline-flex;
    align-items: center;
    transition: all .2s;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: .25em;
    text-decoration: none;
    height: 36px
}

.x-github-btn:not(.disabled):not(:disabled) {
    cursor: pointer
}

.x-github-btn-icon {
    background-color: rgba(0, 0, 0, .1);
    padding: .25em .75em;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.x-github-btn-content {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    line-height: 24px;
    padding: .25em .75em
}

.x-github-btn.secondary {
    background-color: #252c41;
    border-color: #252c41;
    color: #fff
}

.x-github-btn.secondary:hover, .x-github-btn.secondary:focus, .x-github-btn.secondary.focus {
    color: #fff;
    background-color: #222831;
    border-color: #222831;
    box-shadow: 0 5px 20px -3px rgba(37, 44, 65, .33) !important
}

.x-github-btn.secondary:not(:disabled):not(.disabled):active:focus, .x-github-btn.secondary:not(:disabled):not(.disabled).active:focus {
    color: #fff;
    background-color: #222831;
    border-color: #222831;
    box-shadow: 0 5px 20px -3px rgba(37, 44, 65, .33) !important
}

.x-github-btn.secondary.disabled, .x-github-btn.secondary:disabled {
    color: #f4f5f9;
    background-color: #222831;
    border-color: #222831
}

.x-github-btn.secondary:not(:disabled):not(.disabled):active, .x-github-btn.secondary:not(:disabled):not(.disabled).active {
    color: #f4f5f9;
    background-color: #222831;
    border-color: #222831
}

.x-github-btn.secondary .content {
    background-color: rgba(255, 255, 255, .1)
}

.x-github-btn.warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.x-github-btn.warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00
}

.x-github-btn.warning:active {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500
}

.x-github-btn.warning:focus {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
    box-shadow: 0 0 0 .2rem rgba(222, 170, 12, .5)
}

.x-github-user {
    border: 0
}

.x-github-user > a {
    display: flex;
    align-items: center;
    gap: .5em;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    padding: .5em .75em;
    transition: transform ease-in-out .3s;
    border-radius: 4px;
    text-decoration: none
}

.x-github-user > a:hover {
    border-bottom-color: #e5e7eb;
    transform: translateY(-5px)
}

.x-github-user > a .icon {
    flex: none;
    padding-top: 2px;
    padding-right: .5em
}

.x-github-user-compact > a .name {
    line-height: 1.4
}

.x-github-user-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125em
}

.x-github-user-account {
    font-weight: 600;
    line-height: 1.4
}

.x-github-user-title {
    color: #4b5563;
    line-height: 1.4
}

.x-github-user-desc {
    color: #6b7280;
    font-size: .875em;
    line-height: 1.5
}

@media (min-width: 640px) {
    .x-github-statics {
        display: flex
    }
}

@media (min-width: 768px) {
    .x-github-title, .x-github-content, .x-github-footer {
        padding: 12px
    }
}

.shortcode-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #222;
}

.shortcode-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.shortcode-bilibili {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #222;
}

.shortcode-bilibili iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.shortcode-audio {
    margin: 1.25em 0;
    padding: .9rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: linear-gradient(180deg, #fff, #f8fafc);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .04)
}

.shortcode-audio-player {
    min-height: 4.5rem
}

.shortcode-audio .aplayer {
    margin: 0;
    border-radius: .85rem;
    box-shadow: none
}

.shortcode-audio .aplayer.aplayer-withlist .aplayer-list {
    border-top-color: #e5e7eb
}

.shortcode-audio .aplayer .aplayer-list ol {
    margin: 0;
    padding: 0;
    list-style: none
}

#wmd-preview-wrapper-aaeditor #wmd-preview-aaeditor .shortcode-audio .aplayer-list ol {
    margin-bottom: 0;
    padding-left: 0
}

.shortcode-audio .aplayer.aplayer-withlist .aplayer-list li {
    margin: 0;
    list-style: none;
    border-top-color: #f1f5f9
}

.shortcode-audio .aplayer .aplayer-info {
    border-bottom-color: #e5e7eb
}

.shortcode-audio .aplayer .aplayer-author {
    color: #64748b
}

.shortcode-audio .aplayer .aplayer-list-author {
    color: #94a3b8
}

.shortcode-audio .aplayer .aplayer-list-light {
    background: rgba(59, 130, 246, .08)
}

.shortcode-center-title {
    margin: 1.5em 0 1em;
    text-align: center
}

.shortcode-center-title-text {
    display: inline-block;
    max-width: 100%;
    font-size: 1.375em;
    font-weight: 600;
    line-height: 1.6;
    color: #111827;
    letter-spacing: .04em
}

.shortcode-span {
    --color: #1f2937;
    --background: #f3f4f6;
    --padding: .18em .55em;
    --radius: 999px;
    --border-color: transparent;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: var(--padding);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--color);
    background: var(--background);
    font-size: .92em;
    line-height: 1.5;
    vertical-align: middle;
    word-break: break-word
}

.shortcode-span-primary {
    --color: #2563eb;
    --background: #eff6ff
}

.shortcode-span-secondary {
    --color: #6b7280;
    --background: #f9fafb;
    --border-color: #e5e7eb
}

.shortcode-span-light {
    --color: #1f2937;
    --background: #f3f4f6;
    --border-color: #d1d5db
}

.shortcode-span-dark {
    --color: #f9fafb;
    --background: #111827
}

.shortcode-span-info {
    --color: #0ea5e9;
    --background: #f0f9ff
}

.shortcode-span-success {
    --color: #16a34a;
    --background: #f0fdf4
}

.shortcode-span-warning {
    --color: #111827;
    --background: #f59e0b
}

.shortcode-span-danger {
    --color: #dc2626;
    --background: #fef2f2
}

.shortcode-btn {
    --color: var(--aaeditor-btn-color, #24292f);
    --background: var(--aaeditor-btn-bg, #f6f8fa);
    --background-hover: var(--aaeditor-btn-bg-hover, #f3f4f6);
    --background-active: var(--aaeditor-btn-bg-active, #eaedf0);
    --border-color: var(--aaeditor-btn-border, #d0d7de);
    --border-color-hover: var(--aaeditor-btn-border-hover, #afb8c1);
    --border-color-active: var(--aaeditor-btn-border-active, #afb8c1);
    --focus-ring: 0 0 0 .25rem rgba(13, 110, 253, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    max-width: 100%;
    margin: .25em .35em .25em 0;
    padding: .52em .9em;
    border: 1px solid var(--border-color);
    border-radius: .5rem;
    color: var(--color);
    background: var(--background);
    box-shadow: none;
    font-size: .95em;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none !important;
    vertical-align: middle;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    overflow-wrap: anywhere
}

.shortcode-btn:hover,
.shortcode-btn:focus {
    color: var(--color);
    text-decoration: none;
    background: var(--background-hover);
    border-color: var(--border-color-hover);
    border-bottom-color: var(--border-color-active);
    box-shadow: none
}

.shortcode-btn:focus {
    outline: 0
}

.shortcode-btn:focus-visible {
    box-shadow: var(--focus-ring)
}

.shortcode-btn:active {
    background: var(--background-active);
    border-color: var(--border-color-active);
    border-bottom-color: var(--border-color-active);
    box-shadow: none
}

.shortcode-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.1em;
    min-width: 1.1em;
    height: 1.1em;
    line-height: 1
}

.shortcode-btn-icon i,
.shortcode-btn-icon svg,
.shortcode-btn-icon img {
    display: block
}

.shortcode-btn-icon svg,
.shortcode-btn-icon img {
    width: 1em;
    height: 1em
}

.shortcode-btn-icon svg {
    fill: currentColor;
    stroke: currentColor
}

.shortcode-btn-content {
    min-width: 0;
    white-space: normal;
    word-break: break-word
}

.shortcode-btn-primary {
    --color: #fff;
    --background: #1f6feb;
    --background-hover: #1a65d6;
    --background-active: #175cc2;
    --border-color: #1f6feb;
    --border-color-hover: #1a65d6;
    --border-color-active: #175cc2;
    --focus-ring: 0 0 0 .25rem rgba(31, 111, 235, .24)
}

.shortcode-btn-secondary {
    --color: #57606a;
    --background: #f6f8fa;
    --background-hover: #eef2f6;
    --background-active: #e7ecf2;
    --border-color: #d0d7de;
    --border-color-hover: #98a2ad;
    --border-color-active: #98a2ad;
    --focus-ring: 0 0 0 .25rem rgba(87, 96, 106, .16)
}

.shortcode-btn-light {
    --color: #57606a;
    --background: #fff;
    --background-hover: #f6f8fa;
    --background-active: #eef2f6;
    --border-color: #d8dee4;
    --border-color-hover: #afb8c1;
    --border-color-active: #98a2ad;
    --focus-ring: 0 0 0 .25rem rgba(148, 163, 184, .18)
}

.shortcode-btn-dark {
    --color: #f9fafb;
    --background: #24292f;
    --background-hover: #1f2328;
    --background-active: #1a1f24;
    --border-color: #24292f;
    --border-color-hover: #1f2328;
    --border-color-active: #1a1f24;
    --focus-ring: 0 0 0 .25rem rgba(148, 163, 184, .2)
}

.shortcode-btn-info {
    --color: #fff;
    --background: #0ea5e9;
    --background-hover: #0284c7;
    --background-active: #0369a1;
    --border-color: #0ea5e9;
    --border-color-hover: #0284c7;
    --border-color-active: #0369a1;
    --focus-ring: 0 0 0 .25rem rgba(14, 165, 233, .22)
}

.shortcode-btn-success {
    --color: #fff;
    --background: #1a7f37;
    --background-hover: #187332;
    --background-active: #166534;
    --border-color: #1a7f37;
    --border-color-hover: #187332;
    --border-color-active: #166534;
    --focus-ring: 0 0 0 .25rem rgba(26, 127, 55, .22)
}

.shortcode-btn-warning {
    --color: #111827;
    --background: #fbbf24;
    --background-hover: #f59e0b;
    --background-active: #d97706;
    --border-color: #fbbf24;
    --border-color-hover: #f59e0b;
    --border-color-active: #d97706;
    --focus-ring: 0 0 0 .25rem rgba(251, 191, 36, .24)
}

.shortcode-btn-danger {
    --color: #fff;
    --background: #cf222e;
    --background-hover: #b91c1c;
    --background-active: #991b1b;
    --border-color: #cf222e;
    --border-color-hover: #b91c1c;
    --border-color-active: #991b1b;
    --focus-ring: 0 0 0 .25rem rgba(207, 34, 46, .24)
}

.shortcode-link {
    --color: #0f172a;
    --muted-color: #64748b;
    --border-color: #d8dee4;
    --border-color-hover: #afb8c1;
    --background: linear-gradient(180deg, #fff, #f8fafc);
    --background-hover: linear-gradient(180deg, #fff, #f1f5f9);
    --focus-ring: 0 0 0 .25rem rgba(59, 130, 246, .16);
    display: block;
    margin: 1em 0;
    padding: .95rem 1rem;
    border: 1px solid var(--border-color) !important;
    border-radius: .85rem;
    color: var(--color);
    background: var(--background);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    overflow: hidden
}

.shortcode-link:hover,
.shortcode-link:focus {
    color: var(--color);
    text-decoration: none;
    border-color: var(--border-color-hover);
    background: var(--background-hover);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06)
}

.shortcode-link:focus {
    outline: 0
}

.shortcode-link:focus-visible {
    box-shadow: var(--focus-ring), 0 1px 0 rgba(15, 23, 42, .06)
}

.shortcode-link:active {
    transform: translateY(0)
}

.shortcode-link-main {
    display: flex;
    flex-direction: column;
    gap: .32rem;
    min-width: 0
}

.shortcode-link-title {
    color: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.shortcode-link-url {
    color: var(--muted-color);
    font-size: .88rem;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.shortcode-link-desc {
    color: #334155;
    font-size: .94rem;
    line-height: 1.6;
    overflow-wrap: anywhere
}

/* ===== Legacy tabs shortcode ===== */
.fence-tabs {
    --fence-tabs-border-rgb: var(--theme-muted, 209 213 219);
    --fence-tabs-panel-bg-rgb: var(--theme-block, 255 255 255);
    --fence-tabs-tab-active-color-rgb: var(--theme-color, 28 100 242);
    --fence-tabs-tab-inactive-color-rgb: var(--theme-secondary, 107 114 128);
    --fence-tabs-border-color: rgb(var(--fence-tabs-border-rgb) / 1);
    --fence-tabs-panel-bg: rgb(var(--fence-tabs-panel-bg-rgb) / 1);
    --fence-tabs-tab-active-bg: rgb(var(--fence-tabs-panel-bg-rgb) / 1);
    --fence-tabs-tab-active-color: rgb(var(--fence-tabs-tab-active-color-rgb) / 1);
    --fence-tabs-tab-inactive-bg: transparent;
    --fence-tabs-tab-inactive-color: rgb(var(--fence-tabs-tab-inactive-color-rgb) / 1);
    --fence-tabs-nav-gap: 0;
    margin: 1em 0;
    padding: 0;
    background: transparent;
    border: 0
}

.fence-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fence-tabs-nav-gap, 0);
    margin: 0;
    padding: 0;
    align-items: flex-end;
    border-bottom: 0;
    color: var(--fence-tabs-tab-inactive-color, #4b5563);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem
}

.fence-tabs-nav.tab-flat {
    gap: 0
}

.fence-tabs-tab {
    appearance: none;
    position: relative;
    top: 0;
    margin: 0;
    border: 1px solid transparent;
    border-bottom-width: 0;
    border-radius: .625rem .625rem 0 0;
    padding: .625rem 1.25rem;
    background: var(--fence-tabs-tab-inactive-bg, transparent);
    color: var(--fence-tabs-tab-inactive-color, #4b5563);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    font: inherit;
    font-weight: 500;
    line-height: 1.5rem;
    text-decoration: none
}

.fence-tabs-tab[aria-selected="true"] {
    background: var(--fence-tabs-tab-active-bg, #fff);
    color: var(--fence-tabs-tab-active-color, #111827);
    border-color: var(--fence-tabs-border-color, #d1d5db);
    z-index: 1
}

.fence-tabs-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--fence-tabs-panel-bg, #fff)
}

.fence-tabs-tab[aria-selected="false"]:hover {
    border-color: rgb(var(--fence-tabs-border-rgb, 209 213 219) / .5);
    color: var(--fence-tabs-tab-active-color, #111827)
}

.fence-tabs-panels {
    position: relative;
    overflow: hidden;
    min-width: 0
}

.fence-tabs-panel {
    padding: 1rem 1.25rem;
    border-radius: 0 .625rem .625rem .625rem;
    border: 1px solid var(--fence-tabs-border-color, #d1d5db);
    background: var(--fence-tabs-panel-bg, #fff);
    box-shadow: none
}

.fence-tabs-panel:last-child {
    margin-bottom: 0
}

.fence-tabs-panel.fence-tabs-panel-active,
.fence-tabs-panel.tab-panel-active {
    animation: fenceTabsSlideDown .2s ease
}

.fence-tabs-panel.fence-tabs-panel-no-animation {
    animation: none
}

.fence-tabs-panel[hidden] {
    display: none
}

.fence-tabs-nav.tab-flat .fence-tabs-tab,
.fence-tabs-nav.tab-flat .fence-tabs-tab.tab {
    background: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.fence-tabs-nav.tab-flat .fence-tabs-tab[aria-selected="true"],
.fence-tabs-nav.tab-flat .fence-tabs-tab.tab-active {
    background: var(--fence-tabs-panel-bg, #fff);
    border-color: var(--fence-tabs-border-color, #d1d5db);
    color: var(--fence-tabs-tab-active-color, #2563eb)
}

.fence-tabs-nav.tab-flat .fence-tabs-tab[aria-selected="false"],
.fence-tabs-nav.tab-flat .fence-tabs-tab.tab-inactive {
    color: var(--fence-tabs-tab-inactive-color, #4b5563)
}

.fence-tabs-nav.tab-flat .fence-tabs-tab[aria-selected="false"]:hover,
.fence-tabs-nav.tab-flat .fence-tabs-tab.tab-inactive:hover {
    background: var(--fence-tabs-panel-bg, #fff)
}

.fence-tabs-panels.tab-panel-flat .fence-tabs-panel,
.fence-tabs-panels.tab-panel-flat .fence-tabs-panel.tab-panel {
    padding: .9375rem 1.25rem;
    border-radius: 0 .625rem .625rem .625rem
}

/* ===== Deprecated legacy photos shortcode ===== */
.shortcode-photos {
    --gallery-gap: .375rem;
    --gallery-radius: .75rem;
    --gallery-card-radius: .5rem;
    --gallery-row-height: 10rem;
    --gallery-border: rgb(226 232 240 / .95);
    --gallery-shadow: 0 .25rem .75rem rgb(15 23 42 / .04);
    --gallery-card-shadow: 0 .125rem .35rem rgb(15 23 42 / .04);
    --gallery-card-shadow-hover: 0 .5rem 1rem rgb(15 23 42 / .08);
    --gallery-surface: #fff;
    position: relative;
    margin: 1em 0;
    padding: .625rem;
    border: 1px solid var(--gallery-border);
    border-radius: var(--gallery-radius);
    background: linear-gradient(180deg, rgb(255 255 255 / .98), rgb(248 250 252 / .94));
    box-shadow: var(--gallery-shadow)
}

.shortcode-photos-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gallery-gap);
    padding: 0
}

.shortcode-photos-content::after {
    content: "";
    flex-grow: 999;
    flex-basis: 0;
    min-width: 0
}

.shortcode-photos-item {
    display: flex;
    flex: calc(var(--tex-photo-ratio, 1) * 100) 1 calc(var(--gallery-row-height) * var(--tex-photo-ratio, 1));
    flex-direction: column;
    align-self: flex-start;
    min-width: min(100%, 7rem);
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgb(226 232 240 / .9);
    border-radius: var(--gallery-card-radius);
    background: var(--gallery-surface);
    box-shadow: var(--gallery-card-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.shortcode-photos-item:hover {
    border-color: rgb(203 213 225 / .95);
    box-shadow: var(--gallery-card-shadow-hover);
    transform: translateY(-.125rem)
}

.shortcode-photos-item-media {
    background: #fff
}

.shortcode-photos-item:not(.shortcode-photos-item-media) {
    flex-basis: min(100%, 14rem);
    flex-grow: 1;
    min-height: calc(var(--gallery-row-height) * .7);
    padding: .85rem .95rem;
    justify-content: center
}

.shortcode-photos-item>a,
.shortcode-photos-item>figure,
.shortcode-photos-item>img,
.shortcode-photos-item>picture {
    display: block
}

.shortcode-photos-item>a,
.shortcode-photos-item>figure,
.shortcode-photos-item>picture,
.shortcode-photos-item>img {
    width: 100%
}

.shortcode-photos-item>a>img,
.shortcode-photos-item>figure img,
.shortcode-photos-item>img,
.shortcode-photos-item>picture img {
    display: block;
    width: 100%;
    height: var(--gallery-row-height);
    margin: 0;
    background: #fff;
    object-fit: cover
}

.shortcode-photos-item figure {
    display: flex;
    flex-direction: column;
    margin: 0
}

.shortcode-photos-item figcaption {
    padding: .5rem .625rem .625rem;
    color: #4b5563;
    font-size: .8125em;
    line-height: 1.55;
    background: rgb(255 255 255 / .98)
}

@keyframes fenceTabsSlideDown {
    from {
        opacity: 0;
        transform: translateY(-.5rem)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ===== Deprecated legacy card shortcode ===== */
.shortcode-cards,
.shortcode-card {
    position: relative;
    margin: 1em 0;
    border: 1px solid #d0d7de;
    border-radius: .25em;
    background: #fff;
    overflow: hidden
}

.shortcode-cards {
    padding: .75em;
    background: #f6f8fa
}

.shortcode-cards .shortcode-card {
    margin: 0 0 .75em
}

.shortcode-cards .shortcode-card:last-child {
    margin-bottom: 0
}

.shortcode-card-title {
    padding: .75em 6.5em .75em .9em;
    font-weight: 600;
    border-bottom: 1px solid #d0d7de;
    background: #f6f8fa
}

.shortcode-card-content {
    padding: .9em
}

.shortcode-card-collapse .shortcode-card-title {
    position: relative;
    cursor: pointer;
    user-select: none
}

.shortcode-card-collapse .shortcode-card-title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.1em;
    width: .55em;
    height: .55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .2s ease;
    opacity: .72
}

.shortcode-card-collapse.is-folded .shortcode-card-title::after {
    transform: translateY(-50%) rotate(-45deg)
}

.shortcode-card-collapse.is-folded .shortcode-card-content {
    display: none
}

/* ===== Kbd 键盘按键样式 ===== */
kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    line-height: 1;
    color: #24292f;
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .05);
    white-space: nowrap
}

kbd kbd {
    margin: 0 0.1em;
    padding: 0 0.4em;
    font-size: 0.9em;
    background-color: #fff;
    border: 1px solid #babbbd;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .15)
}

/* 响应式调整 */
@media (prefers-color-scheme: dark) {
    .shortcode-audio {
        border-color: #334155;
        background: linear-gradient(180deg, #111827, #0f172a);
        box-shadow: 0 .35rem 1rem rgba(2, 6, 23, .2)
    }

    .shortcode-audio .aplayer {
        background: #111827;
        color: #e5e7eb
    }

    .shortcode-audio .aplayer .aplayer-info,
    .shortcode-audio .aplayer.aplayer-withlist .aplayer-list {
        border-color: #334155
    }

    .shortcode-audio .aplayer.aplayer-withlist .aplayer-list li {
        border-top-color: #1e293b
    }

    .shortcode-audio .aplayer .aplayer-author,
    .shortcode-audio .aplayer .aplayer-list-author {
        color: #94a3b8
    }

    .shortcode-audio .aplayer .aplayer-list-light {
        background: rgba(96, 165, 250, .16)
    }

    .shortcode-center-title-text {
        color: #f3f4f6
    }

    .shortcode-span {
        --color: #e5e7eb;
        --background: #1f2937;
        --border-color: transparent
    }

    .shortcode-span-primary {
        --color: #bfdbfe;
        --background: #1d4ed8
    }

    .shortcode-span-secondary {
        --color: #e5e7eb;
        --background: #374151;
        --border-color: #4b5563
    }

    .shortcode-span-light {
        --color: #f9fafb;
        --background: #374151;
        --border-color: #6b7280
    }

    .shortcode-span-dark {
        --color: #f9fafb;
        --background: #030712
    }

    .shortcode-span-info {
        --color: #e0f2fe;
        --background: #0369a1
    }

    .shortcode-span-success {
        --color: #dcfce7;
        --background: #166534
    }

    .shortcode-span-warning {
        --color: #111827;
        --background: #fbbf24
    }

    .shortcode-span-danger {
        --color: #fee2e2;
        --background: #b91c1c
    }

    .shortcode-btn {
        --color: var(--aaeditor-btn-color, #e6edf3);
        --background: var(--aaeditor-btn-bg, #212830);
        --background-hover: var(--aaeditor-btn-bg-hover, #262c36);
        --background-active: var(--aaeditor-btn-bg-active, #2d333b);
        --border-color: var(--aaeditor-btn-border, #3d444d);
        --border-color-hover: var(--aaeditor-btn-border-hover, #57606a);
        --border-color-active: var(--aaeditor-btn-border-active, #6e7681);
        --focus-ring: 0 0 0 .25rem rgba(110, 168, 254, .18)
    }

    .shortcode-btn:hover,
    .shortcode-btn:focus {
        box-shadow: none
    }

    .shortcode-btn-primary {
        --color: #fff;
        --background: #1f6feb;
        --background-hover: #388bfd;
        --background-active: #1a62d1;
        --border-color: #1f6feb;
        --border-color-hover: #388bfd;
        --border-color-active: #1a62d1;
        --focus-ring: 0 0 0 .25rem rgba(31, 111, 235, .28)
    }

    .shortcode-btn-secondary {
        --color: #e6edf3;
        --background: #2d333b;
        --background-hover: #343b43;
        --background-active: #3d444d;
        --border-color: #444c56;
        --border-color-hover: #6e7681;
        --border-color-active: #6e7681;
        --focus-ring: 0 0 0 .25rem rgba(110, 118, 129, .2)
    }

    .shortcode-btn-light {
        --color: #f9fafb;
        --background: #374151;
        --background-hover: #414b59;
        --background-active: #4b5563;
        --border-color: #6b7280;
        --border-color-hover: #8b96a5;
        --border-color-active: #9ca3af;
        --focus-ring: 0 0 0 .25rem rgba(148, 163, 184, .22)
    }

    .shortcode-btn-dark {
        --color: #f9fafb;
        --background: #111827;
        --background-hover: #0f172a;
        --background-active: #020617;
        --border-color: #1f2937;
        --border-color-hover: #334155;
        --border-color-active: #475569
    }

    .shortcode-btn-info {
        --color: #e0f2fe;
        --background: #0369a1;
        --background-hover: #075985;
        --background-active: #0c4a6e;
        --border-color: #0369a1;
        --border-color-hover: #075985;
        --border-color-active: #0c4a6e
    }

    .shortcode-btn-success {
        --color: #dcfce7;
        --background: #166534;
        --background-hover: #15803d;
        --background-active: #14532d;
        --border-color: #166534;
        --border-color-hover: #15803d;
        --border-color-active: #14532d
    }

    .shortcode-btn-warning {
        --color: #111827;
        --background: #fbbf24;
        --background-hover: #f59e0b;
        --background-active: #d97706;
        --border-color: #fbbf24;
        --border-color-hover: #f59e0b;
        --border-color-active: #d97706
    }

    .shortcode-btn-danger {
        --color: #fee2e2;
        --background: #b91c1c;
        --background-hover: #991b1b;
        --background-active: #7f1d1d;
        --border-color: #b91c1c;
        --border-color-hover: #991b1b;
        --border-color-active: #7f1d1d
    }

    .shortcode-link {
        --color: #f8fafc;
        --muted-color: #94a3b8;
        --border-color: #374151;
        --border-color-hover: #4b5563;
        --background: linear-gradient(180deg, #111827, #0f172a);
        --background-hover: linear-gradient(180deg, #172033, #111827);
        --focus-ring: 0 0 0 .25rem rgba(96, 165, 250, .22);
        box-shadow: 0 1px 0 rgba(248, 250, 252, .04)
    }

    .shortcode-link:hover,
    .shortcode-link:focus {
        box-shadow: 0 1px 0 rgba(248, 250, 252, .06)
    }

    .shortcode-link:focus-visible {
        box-shadow: var(--focus-ring), 0 1px 0 rgba(248, 250, 252, .06)
    }

    .shortcode-link-desc {
        color: #cbd5e1
    }

    .fence-tabs {
        --fence-tabs-border-rgb: var(--theme-muted, 75 85 99);
        --fence-tabs-panel-bg-rgb: var(--theme-block, 31 41 55);
        --fence-tabs-tab-active-color-rgb: var(--theme-color, 96 165 250);
        --fence-tabs-tab-inactive-color-rgb: var(--theme-secondary, 209 213 219)
    }

    kbd {
        color: #c9d1d9;
        background-color: #282e33;
        border-color: #484f58;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2), inset 0 -1px 0 rgba(0, 0, 0, .2)
    }

    kbd kbd {
        background-color: #32383f;
        border-color: #636e7b;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .3)
    }

    .shortcode-cards,
    .shortcode-card {
        border-color: #484f58;
        background: #161b22
    }

    .shortcode-cards,
    .shortcode-card-title {
        background: #21262d
    }

    .shortcode-photos {
        --gallery-border: rgb(72 79 88 / .85);
        --gallery-shadow: 0 .5rem 1.125rem rgb(2 6 23 / .12);
        --gallery-card-shadow: 0 .125rem .5rem rgb(2 6 23 / .16);
        --gallery-card-shadow-hover: 0 .5rem 1.125rem rgb(2 6 23 / .22);
        --gallery-surface: #111827;
        background: linear-gradient(180deg, rgb(17 24 39 / .98), rgb(15 23 42 / .94))
    }

    .shortcode-photos-item {
        border-color: rgb(75 85 99 / .92)
    }

    .shortcode-photos-item-media {
        background: #0f172a
    }

    .shortcode-photos-item figcaption {
        color: #d1d5db;
        background: rgb(15 23 42 / .96)
    }

    .shortcode-card-title {
        border-color: #484f58
    }

}

@media (max-width: 640px) {
    .shortcode-photos {
        --gallery-gap: .3125rem;
        --gallery-row-height: 7.25rem;
        padding: .5rem
    }

    .shortcode-photos-item {
        min-width: min(100%, 5rem)
    }

    .shortcode-photos-item:not(.shortcode-photos-item-media) {
        flex-basis: 100%
    }
}

@media (prefers-reduced-motion: reduce) {
    .fence-tabs-tab,
    .fence-tabs-panel.fence-tabs-panel-active,
    .fence-tabs-panel.tab-panel-active,
    .shortcode-photos-item {
        animation: none;
        transition: none
    }
}

/* ===== 文章末尾统计 ===== */
.tex-post-stats {
    display: flex;
    gap: 1em;
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb
}

.tex-stat-item {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.9em
}

.tex-stat-icon {
    font-size: 1.25em
}

.tex-stat-label {
    color: #6b7280
}

.tex-stat-value {
    font-weight: 500
}

.tex-stat-icon svg {
    display: block
}

/* 浏览统计项（不可点击） */
.tex-stat-views {
    cursor: default
}

.tex-stat-views:hover {
    background-color: transparent
}

/* 点赞按钮交互样式 */
.tex-stat-like {
    transition: all 0.2s;
    border-radius: 4px;
    padding: 0.25em 0.5em;
    cursor: pointer
}

.tex-stat-like:hover {
    background-color: rgba(239, 68, 68, .1);
    transform: scale(1.05)
}

.tex-stat-like:hover .tex-like-icon {
    stroke: #ef4444;
    transform: scale(1.1)
}

/* 已点赞状态 */
.tex-stat-like.tex-liked {
    color: #ef4444;
    cursor: default
}

.tex-stat-like.tex-liked:hover {
    background-color: transparent;
    transform: none
}

.tex-stat-like.tex-liked .tex-like-icon {
    fill: #ef4444;
    stroke: #ef4444
}

/* 点赞跳动动画 */
.tex-stat-like.tex-animate {
    animation: likeBounce 0.5s ease
}

@keyframes likeBounce {
    0%, 100% { transform: scale(1) }
    25% { transform: scale(1.3) }
    50% { transform: scale(0.95) }
    75% { transform: scale(1.1) }
}

/* 加载状态 */
.tex-stat-like.tex-loading {
    opacity: 0.6;
    cursor: wait
}

.tex-stat-like.tex-loading .tex-like-icon {
    animation: likePulse 1s ease-in-out infinite
}

@keyframes likePulse {
    0%, 100% { transform: scale(1); opacity: 1 }
    50% { transform: scale(1.1); opacity: 0.8 }
}

form.params .form-item > input[id^="aa-modal-field-"][type="checkbox"] {
    align-self: center;
    margin: 0
}

@media (prefers-color-scheme: dark) {
    .tex-post-stats {
        border-color: #374151
    }

    .tex-stat-label {
        color: #9ca3af
    }

    .tex-stat-like:hover {
        background-color: rgba(239, 68, 68, .2)
    }

    .tex-stat-like.tex-liked {
        color: #f87171
    }

    .tex-stat-like.tex-liked .tex-like-icon {
        fill: #f87171;
        stroke: #f87171
    }
}