/* ================================================================
   科幻深色主题
   通过覆盖 Bootstrap 5.3 的 CSS 变量实现全局暗色化，
   组件（表格 / 表单 / 分页 / 徽章等）自动跟随，无需逐个改。
   ================================================================ */

:root {
    --sf-bg-0: #060910;
    --sf-bg-1: #0b1120;
    --sf-cyan: #22d3ee;
    --sf-indigo: #818cf8;
    --sf-text: #dbe4f0;
    --sf-muted: #8fa3bf;
    --sf-line: rgba(56, 189, 248, .18);
    --sf-surface: rgba(13, 20, 36, .72);
}

html {
    scroll-behavior: smooth;
}

body {
    /* Bootstrap 变量覆盖：暗色化所有组件 */
    --bs-body-bg: transparent;
    --bs-body-color: var(--sf-text);
    --bs-body-color-rgb: 219, 228, 240;
    --bs-emphasis-color: #f1f5f9;
    --bs-secondary-color: var(--sf-muted);
    --bs-secondary-bg: rgba(148, 163, 184, .12);
    --bs-tertiary-color: var(--sf-muted);
    --bs-tertiary-bg: rgba(148, 163, 184, .10);
    --bs-border-color: var(--sf-line);
    --bs-border-color-translucent: var(--sf-line);
    --bs-link-color: var(--sf-cyan);
    --bs-link-hover-color: #67e8f9;

    min-height: 100vh;
    color: var(--sf-text);
    background-color: var(--sf-bg-0);
    background-image:
        radial-gradient(1100px 520px at 12% -8%, rgba(34, 211, 238, .13), transparent 60%),
        radial-gradient(900px 480px at 92% -4%, rgba(129, 140, 248, .15), transparent 58%),
        linear-gradient(180deg, var(--sf-bg-0) 0%, var(--sf-bg-1) 55%, #070b16 100%);
    background-attachment: fixed;
}

/* 网格底纹 + 顶部光晕 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* 必须沉到正文之下：正文靠下面这条 body>* 的 position:relative 参与绘制，
       若此处为 0 或更高，网格线会盖在文字上。设 -1 后它排在所有正文内容之前，
       但仍高于 body 自身的渐变背景（背景由 html 画布层绘制）。 */
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(125, 211, 252, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 80%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 15%, transparent 80%);
}

/* 只做定位上下文，不要给 z-index。
   一旦这里写了 z-index（哪怕是 1），每个 body 直接子元素都会成为独立的层叠上下文：
   导航栏的 backdrop-filter 本身也创建层叠上下文，于是 .dropdown-menu 的
   z-index:1000 被困在「wrapper → 导航」两层上下文之内，而正文容器与 wrapper 同为
   z-index:1 且在 DOM 中靠后 —— 下拉子菜单就会被正文盖住。
   导航栏的层级提升由 .navbar{z-index:1030} 单独完成。 */
body > * {
    position: relative;
}

/* 覆盖 Bootstrap 的浅色背景工具类，避免压掉主题背景 */
.bg-light {
    background-color: transparent !important;
}

h2, h3, h4, h5 {
    color: #f1f5f9;
    font-weight: 600;
    letter-spacing: .03em;
}

.text-muted {
    color: var(--sf-muted) !important;
}

/* ---------------------------- 导航 ---------------------------- */
/* 导航必须始终盖过正文：.navbar.bg-dark 的 backdrop-filter 会创建层叠上下文，
   把 .dropdown-menu 的 z-index:1000 困在导航内部；导航自身若与正文同为
   body>* 的 z-index:1 且在 DOM 中靠前，下拉子菜单就会被正文盖住
   （elementFromPoint 命中的是 div.container / td 等正文元素）。
   1030 > Bootstrap 正文与 sticky-top(1020)、dropdown(1000)，
   仍低于 modal(1055)/offcanvas(1045)，不影响弹层。 */
.navbar {
    position: relative;
    z-index: 1030;
}

.navbar.bg-dark {
    background: rgba(6, 10, 20, .78) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sf-line);
    box-shadow: 0 12px 32px -24px rgba(34, 211, 238, .9);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .08em;
    text-shadow: 0 0 20px rgba(34, 211, 238, .45);
}

/* ------------------------ 导航栏移动端适配 ------------------------
   小屏用折叠菜单而非换行堆叠：
   触摸目标不小于 40px，搜索框占满整行，分类改为两列网格。
   ---------------------------------------------------------------- */
.site-nav .navbar-toggler {
    border-color: rgba(207, 224, 245, .35);
    padding: .3rem .6rem;
}

.site-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .2);
}

.site-nav-search {
    width: 100%;
}

@media (max-width: 991.98px) {
    .site-nav .navbar-collapse {
        padding-top: .75rem;
        border-top: 1px solid var(--sf-line);
        margin-top: .5rem;
    }

    /* 分类两列排布，避免长列表把页面撑得过长 */
    .site-nav .navbar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem .5rem;
    }

    .site-nav .nav-link {
        padding: .5rem .6rem;
        border-radius: 8px;
        border: 1px solid transparent;
    }

    .site-nav .nav-link.active {
        background: rgba(34, 211, 238, .1);
        border-color: rgba(34, 211, 238, .3);
    }

    /* 触摸目标不小于 40px */
    .site-nav .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-nav .form-control {
        min-height: 40px;
    }
}

@media (min-width: 992px) {
    .site-nav-search {
        width: 250px;
    }
}

/* ------------------------ 后台顶部导航（分组下拉） ------------------------
   后台入口 17 个，横排会被容器裁掉，桌面端收成 4 组下拉 + 2 个按钮；
   移动端折叠后分组直接铺开（免得多点一层），触摸目标不小于 40px。
   -------------------------------------------------------------------------- */
.admin-nav .navbar-toggler,
.admin-subnav .navbar-toggler {
    border-color: rgba(207, 224, 245, .35);
    padding: .3rem .6rem;
}

.admin-nav .navbar-toggler:focus,
.admin-subnav .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .2);
}

.admin-nav .nav-link {
    color: rgba(219, 228, 240, .84);
    white-space: nowrap;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link:focus-visible,
.admin-nav .group-active > .nav-link {
    color: var(--sf-cyan);
}

/* 分组标题是 <button>，抹掉按钮默认外观，让它和 nav-link 一致 */
.admin-nav button.nav-link {
    background: none;
    border: 1px solid transparent;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.admin-nav .dropdown-toggle::after {
    margin-left: .4rem;
    vertical-align: .18em;
    opacity: .65;
}

/* 桌面端：暗色下拉面板 */
.admin-nav .dropdown-menu {
    --bs-dropdown-bg: rgba(8, 13, 26, .97);
    --bs-dropdown-border-color: var(--sf-line);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-color: var(--sf-text);
    --bs-dropdown-link-hover-bg: rgba(34, 211, 238, .12);
    --bs-dropdown-link-hover-color: #67e8f9;
    --bs-dropdown-link-active-bg: rgba(34, 211, 238, .2);
    --bs-dropdown-link-active-color: #a5f3fc;
    min-width: 10.5rem;
    padding: .4rem;
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
}

.admin-nav .dropdown-item {
    padding: .45rem .7rem;
    border-radius: 8px;
    white-space: nowrap;
}

.admin-nav .dropdown-item.active {
    font-weight: 600;
}

/* 模块二级导航：深色窄条，放本模块自己的页面 */
.admin-subnav {
    /* 压过正文(z=1)，但低于顶部主导航(.navbar 1030)，
       否则主导航的下拉子菜单会被这条二级导航盖住 */
    z-index: 1025;
    background: rgba(11, 17, 32, .78);
    border: 1px solid var(--sf-line);
    border-radius: 12px;
    margin-top: .75rem;
    padding: .3rem .55rem;
}

.admin-subnav .navbar-brand {
    font-size: .95rem;
    text-shadow: none;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.admin-subnav .nav-link {
    color: rgba(219, 228, 240, .8);
    border-radius: 8px;
    padding: .45rem .65rem;
    white-space: nowrap;
}

.admin-subnav .nav-link:hover,
.admin-subnav .nav-link:focus-visible,
.admin-subnav .nav-link.active {
    color: var(--sf-cyan);
    background: rgba(34, 211, 238, .1);
}

@media (max-width: 991.98px) {
    .admin-nav .navbar-collapse,
    .admin-subnav .navbar-collapse {
        padding-top: .6rem;
        border-top: 1px solid var(--sf-line);
        margin-top: .5rem;
    }

    .admin-nav .nav-link {
        display: block;
        padding: .55rem .6rem;
        border-radius: 8px;
        border: 1px solid transparent;
    }

    /* 分组内容已铺开，标题不再响应点击，只作小节标题。
       选择器带上 button.nav-link 才压得过上面的 font: inherit */
    .admin-nav button.nav-link.dropdown-toggle {
        pointer-events: none;
        color: var(--sf-muted);
        font-size: .8rem;
        letter-spacing: .1em;
        margin-top: .45rem;
        padding-top: .2rem;
        padding-bottom: .1rem;
    }

    .admin-nav button.nav-link.dropdown-toggle::after {
        display: none;
    }

    /* 移动端把下拉内容摊平，不用再多点一层 */
    .admin-nav .navbar-nav .dropdown-menu {
        display: block;
        position: static;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        --bs-dropdown-bg: transparent;
        --bs-dropdown-border-color: transparent;
    }

    .admin-nav .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: .5rem .6rem .5rem 1.35rem;
        white-space: normal;
    }

    .admin-subnav .nav-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    .admin-nav .btn,
    .admin-subnav .btn {
        min-height: 40px;
        width: 100%;
    }
}

/* 移动端内容区留白收窄，避免正文被压成窄条 */
@media (max-width: 575.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .article-card,
    .article-container,
    .comment-section {
        padding: 1.15rem;
    }

    .article-title {
        font-size: 1.2rem;
    }

    .article-container .article-title {
        font-size: 1.35rem;
    }

    .article-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    .category-filter .form-select {
        min-height: 40px;
    }
}

/* ---------------------------- 按钮 ---------------------------- */
.btn-primary {
    background-image: linear-gradient(135deg, var(--sf-cyan), #6366f1);
    border: 0;
    color: #04121b;
    font-weight: 600;
    box-shadow: 0 0 20px -6px rgba(34, 211, 238, .75);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-image: linear-gradient(135deg, var(--sf-cyan), #6366f1);
    color: #04121b;
    filter: brightness(1.12);
    box-shadow: 0 0 28px -4px rgba(34, 211, 238, .9);
}

.btn-secondary {
    --bs-btn-bg: rgba(148, 163, 184, .16);
    --bs-btn-border-color: var(--sf-line);
    --bs-btn-color: var(--sf-text);
    --bs-btn-hover-bg: rgba(148, 163, 184, .26);
    --bs-btn-hover-border-color: var(--sf-line);
    --bs-btn-hover-color: #f1f5f9;
}

.btn-outline-light {
    color: #cfe0f5;
    border-color: rgba(207, 224, 245, .35);
}

.btn-outline-light:hover,
.btn-outline-light.active {
    background: var(--sf-cyan);
    border-color: var(--sf-cyan);
    color: #04121b;
}

/* -------------------------- 卡片 / 容器 -------------------------- */
.page-card,
.card,
.article-card,
.article-container,
.comment-section {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.article-card {
    padding: 24px;
    margin-bottom: 16px;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.article-card:hover {
    border-color: rgba(34, 211, 238, .45);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .18), 0 22px 50px -24px rgba(34, 211, 238, .5);
    transform: translateY(-2px);
}

.article-container {
    padding: 40px;
}

/* 后台表单 / 列表页与错误页的容器卡片化。
   仅在容器内没有自带卡片时生效，避免卡片嵌套。 */
body > .container:has(> form),
body > .container:has(> table),
body > .container.text-center {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: 16px;
    padding: 28px 30px;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
}

body > .container.text-center .display-1 {
    font-weight: 800;
    letter-spacing: .04em;
    background: linear-gradient(135deg, var(--sf-cyan), var(--sf-indigo));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 46px rgba(34, 211, 238, .35);
}

.comment-section {
    padding: 32px;
    margin-top: 24px;
}

/* ------------------------- 列表页文字 ------------------------- */
.article-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.article-title a {
    color: #e8f0fb;
    text-decoration: none;
}

.article-title a:hover {
    color: var(--sf-cyan);
    text-shadow: 0 0 16px rgba(34, 211, 238, .5);
}

.article-meta {
    color: var(--sf-muted);
    font-size: .875rem;
    margin-bottom: 12px;
}

.article-summary {
    color: #c3d3e8;
}

.badge.bg-secondary {
    background: rgba(34, 211, 238, .12) !important;
    color: #67e8f9;
    border: 1px solid var(--sf-line);
}

/* --------------------------- 文章正文 --------------------------- */
.article-header {
    margin-bottom: 32px;
    border-bottom: 1px solid var(--sf-line);
    padding-bottom: 16px;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #d5e1f2;
}

.article-content img,
.article-content video,
.article-content iframe {
    border: 1px solid var(--sf-line);
    box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .9);
}

.article-content pre {
    background: rgba(2, 6, 16, .8);
    border: 1px solid var(--sf-line);
    padding: 16px;
    border-radius: 10px;
}

.article-content code {
    background: rgba(34, 211, 238, .1);
    color: #7dd3fc;
}

.article-content pre code {
    background: transparent;
    color: #bae6fd;
    padding: 0;
}

.article-content blockquote {
    border-left: 3px solid var(--sf-cyan);
    color: var(--sf-muted);
}

.article-content table th,
.article-content table td {
    border: 1px solid var(--sf-line);
}

.article-content table th {
    background: rgba(34, 211, 238, .08);
}

.article-content a {
    color: #7dd3fc;
    text-decoration: none;
    border-bottom: 1px solid rgba(125, 211, 252, .3);
    transition: color .2s, border-color .2s;
}

.article-content a:hover {
    color: var(--sf-cyan);
    border-bottom-color: var(--sf-cyan);
}

/* 附件下载链接：加下载箭头并轻微高亮，方便与普通外链区分 */
.article-content a[href*="/uploads/"]:after {
    content: " \2193";
    display: inline-block;
    font-size: .85em;
    opacity: .8;
    transform: translateY(1px);
}

.article-content a[href*="/uploads/"]:hover {
    text-shadow: 0 0 14px rgba(34, 211, 238, .55);
}

/* 文章详情排版（由模板内联样式迁移而来） */
.article-container .article-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.article-content img,
.article-content video,
.article-content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px 0;
    border-radius: 6px;
}

.article-content pre {
    padding: 16px;
    overflow-x: auto;
    font-size: .9rem;
}

.article-content code {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .9em;
}

.article-content pre code {
    padding: 0;
}

.article-content blockquote {
    padding-left: 16px;
    margin: 16px 0;
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.article-content table th,
.article-content table td {
    padding: 8px 12px;
    text-align: left;
}

.article-content table th {
    font-weight: 600;
}

@media (max-width: 576px) {
    .article-container {
        padding: 20px;
    }

    .article-container .article-title {
        font-size: 1.5rem;
    }
}

/* ---------------------------- 评论 ---------------------------- */
.comment-item {
    border-bottom: 1px solid var(--sf-line);
    padding: 16px 0;
}

.comment-item:last-child {
    border-bottom: none;
}

.comment-author {
    font-weight: 600;
    color: #e8f0fb;
}

.comment-time {
    color: var(--sf-muted);
    font-size: .8rem;
    margin-left: 8px;
}

.comment-content {
    margin-top: 6px;
    color: #c3d3e8;
    white-space: pre-wrap;
}

/* ---------------------------- 表格 ---------------------------- */
.table {
    --bs-table-color: var(--sf-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(148, 163, 184, .04);
    --bs-table-striped-color: var(--sf-text);
    --bs-table-border-color: var(--sf-line);
    --bs-table-hover-bg: rgba(34, 211, 238, .07);
    --bs-table-hover-color: #f1f5f9;
}

.table thead th {
    color: #67e8f9;
    font-weight: 600;
    letter-spacing: .04em;
}

/* ------------------------- 后台列表移动端 ------------------------- */
/* 文章列表 7 列（标题+状态+可见性+分类+标签+时间+操作），固定宽度合计约
   650px，手机上必然横向溢出。与其让用户左右拖动，不如在窄屏把每行
   重排成一张卡片：标签文字用 data-label 渲染在值左侧。

   桌面端保持原有表格形态，仅在 md 以下切换。 */
.admin-search-col {
    flex: 1;
    max-width: 400px;
}

@media (max-width: 767.98px) {
    /* 表格降级为卡片流 */
    .admin-list-table,
    .admin-list-table tbody,
    .admin-list-table tr,
    .admin-list-table td {
        display: block;
        width: auto;
    }

    /* 表头在卡片模式下无意义，隐藏但保留给读屏器 */
    .admin-list-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .admin-list-table tr {
        background: var(--sf-surface);
        border: 1px solid var(--sf-line);
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 14px 16px;
    }

    /* 单元格改为「标签 : 值」两列 */
    .admin-list-table td {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 6px 0;
        border: 0;
        min-height: 36px;
    }

    /* 标签列（data-label）为空时不留空隙 */
    .admin-list-table td:not([data-label]) {
        display: none;
    }

    .admin-list-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 66px;
        color: var(--sf-muted);
        font-size: .82rem;
        font-weight: 600;
    }

    /* 标题独占一行且不重复标签 */
    .admin-list-table td.admin-list-title {
        font-size: 1.08rem;
        font-weight: 700;
        color: #e8f0fb;
        margin-bottom: 8px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--sf-line);
    }

    .admin-list-table td.admin-list-title::before {
        content: none;
    }

    /* 操作按钮撑满整行便于点击 */
    .admin-list-table td[data-label="操作"] {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--sf-line);
    }

    .admin-list-table td[data-label="操作"] .btn {
        flex: 1;
        min-height: 40px;
    }

    /* 标签徽章换行，不再挤压 */
    .admin-list-table td[data-label="标签"] {
        flex-wrap: wrap;
    }

    /* 内嵌表单（下拉、输入框）在卡片模式下占满剩余宽度。
       移除 me-2 的右边距，避免叠加 flex 间距后溢出卡片。 */
    .admin-list-table td[data-label="角色"] .form-select,
    .admin-list-table td[data-label="角色"] form,
    .admin-list-table td[data-label="状态"] form {
        flex: 1;
        width: 100%;
    }

    .admin-list-table td[data-label="角色"] .form-select {
        min-height: 40px;
        margin-right: 0 !important;
    }

    /* 多个操作按钮（如评论的「通过」「删除」）平分宽度 */
    .admin-list-table td[data-label="操作"] form {
        flex: 1;
    }

    /* 卡片内的搜索框占满整行 */
    .admin-search-col {
        max-width: none;
    }

    /* 分页按钮加大触摸目标 */
    .pagination .page-link {
        min-width: 44px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* ---------------------------- 表单 ---------------------------- */
.form-control,
.form-select {
    background: rgba(4, 9, 20, .65);
    border: 1px solid rgba(148, 163, 184, .24);
    color: var(--sf-text);
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    background: rgba(4, 9, 20, .85);
    border-color: var(--sf-cyan);
    box-shadow: 0 0 0 .2rem rgba(34, 211, 238, .16);
    color: #f1f5f9;
}

.form-control::placeholder {
    color: #64748b;
}

.form-label {
    color: #cfe0f5;
}

.form-text {
    color: var(--sf-muted);
}

.form-check-input {
    background-color: rgba(4, 9, 20, .7);
    border-color: rgba(148, 163, 184, .3);
}

.form-check-input:checked {
    background-color: var(--sf-cyan);
    border-color: var(--sf-cyan);
}

.form-check-label {
    color: #cfe0f5;
}

/* ---------------------------- 分页 ---------------------------- */
.pagination {
    --bs-pagination-bg: rgba(4, 9, 20, .6);
    --bs-pagination-color: #cfe0f5;
    --bs-pagination-border-color: var(--sf-line);
    --bs-pagination-hover-bg: rgba(34, 211, 238, .12);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-active-bg: var(--sf-cyan);
    --bs-pagination-active-border-color: var(--sf-cyan);
    --bs-pagination-active-color: #04121b;
    --bs-pagination-disabled-bg: rgba(4, 9, 20, .4);
    --bs-pagination-disabled-color: #4b5b74;
    --bs-pagination-disabled-border-color: var(--sf-line);
}

/* ------------------------- 提示 / 警告 ------------------------- */
.alert {
    border-radius: 12px;
}

.alert-danger {
    background: rgba(127, 29, 29, .3);
    border-color: rgba(248, 113, 113, .4);
    color: #fecaca;
}

.alert-success {
    background: rgba(6, 78, 59, .3);
    border-color: rgba(52, 211, 153, .4);
    color: #a7f3d0;
}

.alert-warning {
    background: rgba(120, 53, 15, .3);
    border-color: rgba(251, 191, 36, .4);
    color: #fde68a;
}

.alert-info {
    background: rgba(12, 74, 110, .3);
    border-color: rgba(56, 189, 248, .4);
    color: #bae6fd;
}

/* -------------------------- 页脚 -------------------------- */
footer {
    color: var(--sf-muted);
    border-top: 1px solid var(--sf-line);
}

footer a {
    color: #7dd3fc;
    text-decoration: none;
}

footer a:hover {
    color: var(--sf-cyan);
}

/* ------------------------ Markdown 编辑器 ------------------------ */
.EasyMDEContainer .CodeMirror {
    background: rgba(3, 7, 18, .8);
    color: #d5e1f2;
    border: 1px solid var(--sf-line);
    border-radius: 10px;
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--sf-cyan);
}

.CodeMirror-selected {
    background: rgba(34, 211, 238, .18) !important;
}

.editor-toolbar {
    background: rgba(8, 14, 28, .92);
    border-color: var(--sf-line);
    border-radius: 10px 10px 0 0;
}

.editor-toolbar button {
    color: #a9bdd8;
}

.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: rgba(34, 211, 238, .16);
    color: #67e8f9;
    border-color: rgba(34, 211, 238, .4);
}

.editor-toolbar::before,
.editor-toolbar::after {
    border-color: var(--sf-line);
}

.editor-preview,
.editor-preview-side {
    background: rgba(3, 7, 18, .8);
    color: #d5e1f2;
}

/* 编辑器预览与文章详情保持一致的链接外观 */
.editor-preview a,
.editor-preview-side a {
    color: #7dd3fc;
    text-decoration: none;
    border-bottom: 1px solid rgba(125, 211, 252, .3);
}

.editor-preview a[href*="/uploads/"]:after,
.editor-preview-side a[href*="/uploads/"]:after {
    content: " \2193";
    display: inline-block;
    font-size: .85em;
    opacity: .8;
    transform: translateY(1px);
}