@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.0/sweetalert2.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

/* ==========================================================================
   NataCode Panel — 纯白主题
   · 底色默认纯白，背景图由后台「界面外观」上传后覆盖
   · 主色 #2f6bff / 正文 #1f2329 / 次要 #6b7280 / 描边 #e8ebf0
   ========================================================================== */

:root {
    --nc-bg: #ffffff;
    --nc-surface: #ffffff;
    --nc-surface-soft: #f7f9fc;
    --nc-border: #e8ebf0;
    --nc-text: #1f2329;
    --nc-muted: #6b7280;
    --nc-primary: #2f6bff;
    --nc-primary-dark: #1d54e0;
    --nc-primary-soft: #eaf0ff;
    --nc-success: #16a34a;
    --nc-danger: #e5484d;
    --nc-warning: #b7791f;
    --nc-radius: 14px;
    --nc-radius-sm: 10px;
    --nc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --nc-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .10);
    --nc-overlay: .008;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    min-height: 100%;
}

body {
    background-color: var(--nc-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, var(--nc-overlay)), rgba(255, 255, 255, var(--nc-overlay))),
        var(--nc-bg-image, none);
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    color: var(--nc-text);
    font-family: 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    font-size: .95rem;
    padding-bottom: 76px;
    /* 给固定页脚留位置 */
}

main {
    padding-bottom: 1rem;
}

.container {
    max-width: 1140px;
}

/* ---------------------------------------------------------------- 导航条 */
header .navbar {
    background-color: rgba(255, 255, 255, .92) !important;
    background-image: none !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--nc-border);
    padding-top: .6rem;
    padding-bottom: .6rem;
}

header .navbar-brand {
    color: var(--nc-primary) !important;
    font-weight: 600;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

header .navbar-brand svg {
    width: 18px;
    height: 18px;
}

header .nav-link {
    color: var(--nc-text) !important;
    border-radius: 999px;
    padding: .35rem .85rem !important;
    transition: background-color .18s ease, color .18s ease;
}

header .nav-link:hover,
header .nav-link:focus {
    background-color: var(--nc-primary-soft);
    color: var(--nc-primary) !important;
}

header .dropdown-toggle::after {
    margin-left: .35rem;
    vertical-align: .12em;
}

header .navbar-toggler {
    border-color: var(--nc-border);
}

header .dropdown-menu {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
    padding: .4rem;
    background: #fff;
}

header .dropdown-divider {
    border-color: var(--nc-border);
    margin: .35rem .25rem;
}

/* 导航条下拉项：统一中性色，别再黄绿红乱刷 */
header .dropdown-item {
    color: var(--nc-text) !important;
    border-radius: var(--nc-radius-sm);
    padding: .5rem .75rem;
    font-size: .92rem;
    transition: background-color .15s ease, color .15s ease;
}

header .dropdown-item:hover,
header .dropdown-item:focus {
    background-color: var(--nc-surface-soft);
    color: var(--nc-primary) !important;
}

header .dropdown-item.nc-item-danger:hover,
header .dropdown-item.nc-item-danger:focus {
    background-color: #fdecec;
    color: var(--nc-danger) !important;
}

header .dropdown-header,
header .dropdown-item-text {
    color: var(--nc-muted) !important;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .35rem .75rem;
}

/* ------------------------------------------------------------------ 卡片 */
.card {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    box-shadow: var(--nc-shadow);
    background-color: var(--nc-surface);
    overflow: hidden;
}

.card-header {
    background-color: var(--nc-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--nc-border);
    padding: .85rem 1.1rem;
    font-size: .95rem;
    color: var(--nc-text) !important;
}

.card-body {
    padding: 1.1rem;
}

.card-header strong,
.card-header h1,
.card-header h2,
.card-header h3 {
    font-weight: 600;
    letter-spacing: .2px;
}

/* ------------------------------------------------------------------ 表格 */
.table {
    --bs-table-bg: transparent;
    color: var(--nc-text);
    margin-bottom: 0;
    vertical-align: middle;
}

.table> :not(caption)>*>* {
    padding: .7rem .75rem;
    border-color: var(--nc-border);
}

.table thead th {
    background-color: var(--nc-surface-soft);
    border-bottom: 1px solid var(--nc-border) !important;
    color: var(--nc-muted);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-hover>tbody>tr:hover>* {
    background-color: var(--nc-primary-soft);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    padding: .3rem .75rem;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--nc-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}

.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
    margin-bottom: .5rem;
}

.page-link {
    color: var(--nc-primary);
    border-color: var(--nc-border);
}

.page-item.active .page-link {
    background-color: var(--nc-primary);
    border-color: var(--nc-primary);
}

/* ------------------------------------------------------------------ 表单 */
.form-control,
.form-select {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    padding: .55rem .85rem;
    color: var(--nc-text);
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nc-primary);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}

.form-control.rounded-pill,
.form-select.rounded-pill {
    padding-left: 1rem;
    padding-right: 1rem;
}

.form-label,
label {
    color: var(--nc-text);
    font-weight: 500;
}

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

.input-group-text {
    background-color: var(--nc-surface-soft);
    border-color: var(--nc-border);
    color: var(--nc-muted);
}

/* 让页面上残留的 cyan / 蓝色小字回归可读 */
[style*="color:cyan"],
[style*="color: cyan"] {
    color: var(--nc-text) !important;
}

.text-dark {
    color: var(--nc-text) !important;
}

.text-warning {
    color: var(--nc-warning) !important;
}

/* ------------------------------------------------------------------ 按钮 */
.btn {
    border-radius: 999px;
    font-weight: 500;
    padding: .45rem 1.05rem;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-sm {
    padding: .28rem .7rem;
    font-size: .82rem;
}

.btn-primary,
.btn-default {
    background-color: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-default:hover,
.btn-default:focus {
    background-color: var(--nc-primary-dark);
    border-color: var(--nc-primary-dark);
    color: #fff;
    box-shadow: 0 6px 18px rgba(47, 107, 255, .25);
}

.btn-outline-primary {
    color: var(--nc-primary);
    border-color: #cbd8ff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
}

.btn-outline-dark {
    color: var(--nc-text);
    border-color: var(--nc-border);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
    background-color: var(--nc-text);
    border-color: var(--nc-text);
    color: #fff;
}

.btn-outline-danger {
    color: var(--nc-danger);
    border-color: #f6cdcf;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--nc-danger);
    border-color: var(--nc-danger);
    color: #fff;
}

.btn-light {
    background-color: #fff;
    border-color: var(--nc-border);
    color: var(--nc-text);
}

.btn-light:hover {
    background-color: var(--nc-surface-soft);
    border-color: var(--nc-border);
    color: var(--nc-text);
}

/* ------------------------------------------------------------------ 提示条 */
.alert {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    padding: .8rem 1rem;
    font-size: .92rem;
    background-color: var(--nc-surface-soft);
    color: var(--nc-text);
}

.alert-secondary {
    background-color: var(--nc-surface-soft);
    border-color: var(--nc-border);
    color: var(--nc-muted);
}

.alert-success {
    background-color: #eefaf1;
    border-color: #cdeed8;
    color: #14683a;
}

.alert-danger {
    background-color: #fdecec;
    border-color: #f7cccd;
    color: #a3252a;
}

.alert-warning {
    background-color: #fff8e8;
    border-color: #f6e3ba;
    color: #8a5c12;
}

/* ------------------------------------------------------------------ 徽章 */
.badge {
    border-radius: 999px;
    font-weight: 500;
    padding: .35em .7em;
}

.badge.text-dark,
.badge.badge-soft {
    background-color: var(--nc-surface-soft);
    color: var(--nc-muted) !important;
    border: 1px solid var(--nc-border);
}

/* ------------------------------------------------------------------ 页脚 */
footer.fixed-bottom {
    background-color: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--nc-border) !important;
    padding: .85rem 0;
}

footer small,
footer .text-muted {
    color: var(--nc-muted) !important;
}

/* ------------------------------------------------------------------ 工具类 */
.nc-muted {
    color: var(--nc-muted);
}

.text-success {
    color: var(--nc-success) !important;
}

.text-danger {
    color: var(--nc-danger) !important;
}

/* ---------------------------------------------------------- 仪表盘统计卡片 */
.nc-stat-label {
    color: var(--nc-muted);
    font-size: .82rem;
    letter-spacing: .02em;
    margin-bottom: .25rem;
}

.nc-stat-value {
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--nc-text);
}

.nc-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nc-primary-soft);
    color: var(--nc-primary);
    flex: 0 0 42px;
}

.nc-stat-icon-danger {
    background-color: #fdecec;
    color: var(--nc-danger);
}

/* 仪表盘账户信息列表 */
.nc-meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nc-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--nc-border);
    font-size: .92rem;
}

.nc-meta li:last-child {
    border-bottom: 0;
}

.nc-meta-key {
    color: var(--nc-muted);
}

/* ---------------------------------------------------------------- 顶部两行头部 */
/* 第一行：品牌 + 当前账号 */
.nc-topbar {
    background-color: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--nc-border);
    padding: .7rem 0;
}

/* 面板标题：纯展示，不做跳转 */
.nc-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--nc-primary);
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: .2px;
    user-select: none;
}

.nc-userchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--nc-muted);
    font-size: .88rem;
    background-color: var(--nc-surface-soft);
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    padding: .28rem .75rem;
}

/* 第二行：导航栏 */
.nc-mainnav {
    background-color: var(--nc-surface);
    border-bottom: 1px solid var(--nc-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

/* 导航项容器：按钮式列表，窄屏自动换行 */
.nc-navscroll {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
}

/* 每个导航项 = 一颗按钮 */
.nc-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    color: var(--nc-text);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .45rem .95rem;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    background-color: var(--nc-surface-soft);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .02);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.nc-nav-btn svg {
    flex: 0 0 auto;
    opacity: .8;
}

.nc-nav-btn:hover,
.nc-nav-btn:focus {
    background-color: #fff;
    border-color: var(--nc-primary);
    color: var(--nc-primary);
    box-shadow: 0 4px 12px rgba(47, 107, 255, .14);
}

.nc-nav-btn:active {
    transform: translateY(1px);
}

.nc-nav-btn.active {
    background-color: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(47, 107, 255, .28);
}

.nc-nav-btn.active svg {
    opacity: 1;
}

@media (max-width: 575.98px) {
    .nc-userchip {
        font-size: .8rem;
        padding: .22rem .6rem;
    }

    .nc-navscroll {
        gap: .4rem;
    }

    .nc-nav-btn {
        font-size: .84rem;
        padding: .4rem .7rem;
    }
}

/* ---------------------------------------------------- 设置页：列表式入口 */
.nc-actionlist {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.nc-action {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
    color: var(--nc-text);
    background-color: var(--nc-surface-soft);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    padding: .85rem 1rem;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
}

.nc-action:hover,
.nc-action:focus {
    background-color: #fff;
    border-color: var(--nc-primary);
    color: var(--nc-primary);
    box-shadow: 0 4px 14px rgba(47, 107, 255, .12);
}

.nc-action:active {
    transform: translateY(1px);
}

.nc-action-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nc-primary-soft);
    color: var(--nc-primary);
}

.nc-action-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}

.nc-action-text strong {
    font-weight: 600;
    font-size: .94rem;
}

.nc-action-text small {
    color: var(--nc-muted);
    font-size: .8rem;
}

.nc-action-arrow {
    flex: 0 0 auto;
    color: var(--nc-muted);
    opacity: .7;
}

.nc-action-danger .nc-action-icon {
    background-color: #fdecec;
    color: var(--nc-danger);
}

.nc-action-danger:hover,
.nc-action-danger:focus {
    border-color: var(--nc-danger);
    color: var(--nc-danger);
    box-shadow: 0 4px 14px rgba(229, 72, 77, .14);
}

/* 背景图上传页 */
.nc-bg-thumb {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    background-color: var(--nc-surface-soft);
}

.nc-swatch {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--nc-border);
    display: inline-block;
    margin-right: .35rem;
    vertical-align: middle;
}

/* ------------------------------------------------------------------ 深色跟随（可选） */
@media (prefers-color-scheme: dark) {
    :root {
        --nc-bg: #0f1216;
        --nc-surface: #151a20;
        --nc-surface-soft: #1b2129;
        --nc-border: #262d36;
        --nc-text: #e7ebf0;
        --nc-muted: #9aa4b2;
        --nc-primary-soft: #1b2942;
    }

    body {
        background-image:
            linear-gradient(rgba(15, 18, 22, var(--nc-overlay)), rgba(15, 18, 22, var(--nc-overlay))),
            var(--nc-bg-image, none);
    }

    header .navbar,
    footer.fixed-bottom {
        background-color: rgba(15, 18, 22, .92) !important;
    }

    .form-control,
    .form-select,
    header .dropdown-menu {
        background-color: var(--nc-surface);
        color: var(--nc-text);
    }
}

/* ------------------------------------------------------------ 代码块（对接示例） */
.nc-code {
    background-color: var(--nc-surface-soft);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    padding: .85rem 1rem;
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--nc-text);
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

/* 手机窄屏下再缩小一点字号，避免横向滚动太多 */
@media (max-width: 575.98px) {
    .nc-code {
        font-size: .72rem;
        padding: .7rem .8rem;
    }
}

/* 让长表格在手机上也能优雅滚动 */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* 卡片里的输入框组在窄屏不要挤成一团 */
@media (max-width: 575.98px) {
    .input-group > .form-control {
        min-width: 0;
    }
}

/* ==========================================================================
   防止中文被挤成「一个字一行」（竖排）
   --------------------------------------------------------------------------
   原因：中文可以在任意两个字之间断行，所以在 flex 布局里，
        一个文字块的最小宽度 = 1 个汉字。空间不够时它就会被压成竖排。
   解法：给文字块一个合理的最小宽度（min-width），再让父容器允许换行
        （flex-wrap: wrap），空间不够就整块折到下一行，而不是竖着挤。
   ========================================================================== */

/* ---- 信息列表（账户ID / 应用卡片统计等）---- */
.nc-meta li {
    flex-wrap: wrap;
    row-gap: .15rem;
}

.nc-meta-key {
    flex: 0 0 auto;
    white-space: nowrap;
}

.nc-meta li > span:last-child,
.nc-meta li > span:not(.nc-meta-key) {
    flex: 1 1 auto;
    min-width: 8rem;
    text-align: right;
}

/* ---- 卡片头部的「标题 + 右侧说明」---- */
.card-header .d-flex {
    flex-wrap: wrap;
    row-gap: .3rem;
}

.card-header .d-flex > strong {
    flex: 0 0 auto;
}

.card-header .d-flex > span {
    flex: 1 1 auto;
    min-width: 9rem;
}

/* ---- 列表式入口的文字块 ---- */
.nc-action-text {
    min-width: 7rem;
}

/* ---- 顶部账号胶囊 ---- */
.nc-userchip {
    white-space: nowrap;
}

/* ==========================================================================
   手机窄屏：整体字号再收一点，进一步避免挤字
   ========================================================================== */
@media (max-width: 575.98px) {
    body {
        font-size: .9rem;
    }

    .card-body {
        padding: .9rem;
    }

    .card-header {
        padding: .7rem .85rem;
        font-size: .9rem;
    }

    h6 {
        font-size: .95rem;
    }

    /* 信息列表：字号更小、换行阈值更低 */
    .nc-meta li {
        font-size: .84rem;
    }

    .nc-meta li > span:last-child,
    .nc-meta li > span:not(.nc-meta-key) {
        min-width: 6rem;
    }

    /* 卡片头部说明文字 */
    .card-header .d-flex > span {
        min-width: 6rem;
        font-size: .8rem;
    }

    /* 表单说明 */
    .form-text {
        font-size: .78rem;
    }

    /* 列表式入口 */
    .nc-action {
        padding: .75rem .85rem;
        gap: .7rem;
    }

    .nc-action-text strong {
        font-size: .9rem;
    }

    .nc-action-text small {
        font-size: .76rem;
    }

    /* 代码块 */
    .nc-code {
        font-size: .72rem;
    }

    /* 按钮别太占地方 */
    .btn {
        padding: .4rem .9rem;
        font-size: .88rem;
    }

    .btn-sm {
        padding: .25rem .6rem;
        font-size: .78rem;
    }
}

/* ==========================================================================
   主页统计卡片：一行两个（半宽）
   窄屏时卡片只有屏幕一半，图标和数字都要收小才不会挤
   ========================================================================== */
@media (max-width: 575.98px) {
    .nc-stat-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 9px;
    }

    .nc-stat-icon svg {
        width: 15px;
        height: 15px;
    }

    .nc-stat-value {
        font-size: 1.3rem;
    }

    .nc-stat-label {
        font-size: .74rem;
        margin-bottom: .15rem;
    }

    /* 半宽卡片的内边距也收一点 */
    .row > .col-6 > .card > .card-body {
        padding: .8rem .75rem;
    }
}

/* ==========================================================================
   卡密列表（#datatable）：让行更矮、表格更宽
   --------------------------------------------------------------------------
   原来单元格内边距 11px×12px、还允许换行，8 列挤在一起 →
   行被撑得很高、列又很窄。这里：
     · 内边距收到 7px 左右
     · 单元格禁止换行（white-space: nowrap）→ 一行到底，行高统一且更矮
     · 表格配 .table-responsive，宽度不够时横向滑动，而不是把列压扁
   ========================================================================== */

#datatable {
    font-size: .86rem;
    margin-bottom: 0;
    /* ★ 这里原来写的是 width:100% !important，会跟 DataTables 自己算的列宽打架，
         导致 15 列时列宽错乱、字压字。去掉 !important，交给 DataTables 管。 */
}

#datatable > :not(caption) > * > * {
    padding: .42rem .5rem;
    white-space: nowrap;
}

#datatable thead th {
    padding: .5rem .5rem;
    font-size: .74rem;
    letter-spacing: .02em;
}

#datatable .badge {
    font-size: .72rem;
    padding: .25em .55em;
    font-weight: 500;
}

#datatable .btn-sm {
    padding: .18rem .45rem;
    font-size: .72rem;
    line-height: 1.25;
}

#datatable code {
    font-size: .82rem;
}

#datatable td .table-responsive {
    overflow: visible;
}

/* DataTables 自带的 长度选择 / 搜索 / 分页 也收一收，别占太多高度 */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: .55rem;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: .25rem .65rem !important;
    font-size: .84rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin-top: .65rem;
    font-size: .82rem;
    color: var(--nc-muted);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .22rem .5rem !important;
    margin-left: .15rem !important;
}

/* 窄屏：控件竖排、表格保证可横向滑动 */
@media (max-width: 575.98px) {
    #datatable {
        font-size: .8rem;
    }

    #datatable > :not(caption) > * > * {
        padding: .38rem .42rem;
    }

    #datatable thead th {
        font-size: .7rem;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
    }
}


/* ==========================================================================
   DataTables 横向滚动（scrollX）微调
   --------------------------------------------------------------------------
   15 列的卡密表太宽，靠 DataTables 自己的 scrollX 横向滚动。
   表头和内容是两个独立的滚动容器，这里保证它们不互相错位。
   ========================================================================== */

.dataTables_wrapper .dataTables_scroll {
    clear: both;
}

.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
    overflow: hidden;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* 表头那层只显示，不接收滚动 */
.dataTables_wrapper .dataTables_scrollHead {
    border-bottom: 1px solid var(--nc-border);
}

/* 表格本体：不再强制 100%，让它按内容自然撑开 */
#datatable {
    width: 100%;
}

#datatable th,
#datatable td {
    vertical-align: middle;
}

/* ==========================================================================
   DataTables 底部（信息 + 分页）
   --------------------------------------------------------------------------
   DataTables 自带的「每页 N 条」和搜索框已经关掉了（lengthChange/searching=false），
   每页条数和搜索都由页面顶部的筛选表单控制，位置固定、不会和别的东西重叠。
   ========================================================================== */

.nc-dt-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
}

.nc-dt-pager .dataTables_paginate {
    margin: 0;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0 !important;
}

/* 主页「接口正常」那个一闪一闪的绿点 */
.nc-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    margin-right: .5rem;
    animation: nc-pulse 1.8s ease-in-out infinite;
}

@keyframes nc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}

/* 主页「最近请求」表格收一收 */
#datatable-sm > :not(caption) > * > *,
.nc-home-table > :not(caption) > * > * {
    padding: .5rem .6rem;
}

/* ==========================================================================
   对接文档页
   ========================================================================== */

.nc-doc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0;
}

.nc-doc-tab {
    padding: .4rem .9rem;
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--nc-muted);
    background: #fff;
    text-decoration: none;
    transition: all .15s;
}

.nc-doc-tab:hover { border-color: var(--nc-primary); color: var(--nc-primary); }

.nc-doc-tab.on {
    background: var(--nc-primary);
    border-color: var(--nc-primary);
    color: #fff;
}

.nc-url {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--nc-soft, #f7f8fa);
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    padding: .5rem .75rem;
}

.nc-url code {
    flex: 1;
    word-break: break-all;
    font-size: .85rem;
}

.nc-code {
    position: relative;
    background: #1e293b;
    border-radius: 10px;
    overflow: hidden;
}

.nc-code pre {
    margin: 0;
    padding: 1rem;
    color: #e2e8f0;
    font-size: .8rem;
    line-height: 1.6;
    overflow-x: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.nc-copy {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #e2e8f0;
    border-radius: 6px;
    font-size: .72rem;
    padding: .18rem .5rem;
    cursor: pointer;
    z-index: 2;
}

.nc-copy:hover { background: rgba(255, 255, 255, .22); }

.nc-url .nc-copy {
    position: static;
    background: #fff;
    border: 1px solid var(--nc-border);
    color: var(--nc-muted);
}

.nc-break { word-break: break-all; }

.nc-notes { padding-left: 1.1rem; }
.nc-notes li { margin-bottom: .4rem; font-size: .9rem; color: var(--nc-muted); }

.nc-step {
    display: flex;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--nc-border);
}

.nc-step:last-child { border-bottom: none; }

.nc-step-no {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--nc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
}

/* ==========================================================================
   左侧导航（照「米验 MIYAN AUTH」的分组列表式）
   --------------------------------------------------------------------------
   顶部那一排按钮太多了，全搬到左边：
     · 分组标题可以点着折叠（状态记在 localStorage）
     · 当前页高亮 + 左边一条小竖线
     · 手机上变成抽屉，点汉堡菜单滑出来
   ========================================================================== */

:root {
    --nc-sb-w: 246px;
}

/* ----------------------------------------------------------------------------
 *  补充 token（把视图里散落的写死数值收过来，方便统一调）
 * -------------------------------------------------------------------------- */
:root {
    --nc-muted-3: #9aa1ac;         /* 三级文字：小注、说明、序号 */
    --nc-primary-line: #bfdbfe;    /* 主色浅描边（提示卡） */

    --nc-radius-xs: 8px;           /* 小控件：badge、小按钮 */
    --nc-radius-sm: 10px;          /* 常规块：列表项、输入框 */
    --nc-radius-md: 12px;          /* 中卡 */
    --nc-radius-pill: 999px;       /* 胶囊 */

    --nc-dur: .18s;                /* 统一过渡时长 */
    --nc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------- 侧边栏本体 ---------------- */

.nc-sb {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--nc-sb-w);
    background: #fff;
    border-right: 1px solid var(--nc-border);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform .28s ease;
}

/* ---------------- 品牌 ---------------- */

.nc-sb-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--nc-border);
    text-decoration: none;
}

/* 品牌图标：视图里的图标已删（主人要求），这里留着定义，
   将来想放回图标直接加回去就行；文字那边不用动，flex 会自动贴左 */
.nc-sb-logo {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--nc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc-sb-brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.nc-sb-name { font-weight: 700; font-size: .95rem; color: #1f2937; }
.nc-sb-sub  { font-size: .68rem; color: var(--nc-muted); }

/* ---------------- 导航区 ---------------- */

.nc-sb-nav {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .6rem 1rem;
}

.nc-sb-nav::-webkit-scrollbar { width: 4px; }
.nc-sb-nav::-webkit-scrollbar-thumb { background: var(--nc-border); border-radius: 4px; }

.nc-sb-sec {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--nc-muted);
    padding: .85rem .7rem .35rem;
    cursor: pointer;
    user-select: none;
}

.nc-sb-sec:hover { color: var(--nc-primary); }

.nc-sb-arrow {
    margin-left: auto;
    opacity: .45;
    transition: transform .2s;
}

.nc-sb-sec.collapsed .nc-sb-arrow { transform: rotate(-90deg); }
.nc-sb-sec.collapsed + .nc-sb-group { display: none; }

.nc-sb-group { margin-bottom: .15rem; }

.nc-sb-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    margin-bottom: .12rem;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.nc-sb-item i { font-size: 1rem; opacity: .65; width: 18px; text-align: center; }

.nc-sb-item:hover { background: var(--nc-soft, #f5f7fa); color: #111827; }

.nc-sb-item.on {
    /* 先给一个通用值兜底，再用 color-mix 让主色自动淡化 */
    background: rgba(47, 107, 255, .10);
    background: color-mix(in srgb, var(--nc-primary) 10%, #fff);
    color: var(--nc-primary);
    font-weight: 600;
}

.nc-sb-item.on i { opacity: 1; }

.nc-sb-item.on::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--nc-primary);
}

/* ---------------- 底部：当前账号 ---------------- */

.nc-sb-foot {
    border-top: 1px solid var(--nc-border);
    padding: .55rem;
}

.nc-sb-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    background: var(--nc-soft, #f7f8fa);
}

.nc-sb-avatar {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--nc-primary);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc-sb-usertext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.nc-sb-uname { font-size: .8rem; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-sb-urole { font-size: .66rem; color: var(--nc-muted); }

.nc-sb-out {
    flex: none;
    color: var(--nc-muted);
    padding: .25rem;
    border-radius: 6px;
    text-decoration: none;
}

.nc-sb-out:hover { color: #dc2626; background: #fef2f2; }

/* ---------------- 主区域 ---------------- */

.nc-main {
    margin-left: var(--nc-sb-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.nc-content { flex: 1; }

.nc-footer {
    border-top: 1px solid var(--nc-border);
    background: #fff;
    padding: .9rem 0;
    color: var(--nc-muted);
}

/* ---------------- 顶部条（很薄） ---------------- */

.nc-topbar2 {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 56px;
    padding: 0 1rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--nc-border);
}

.nc-hamburger {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nc-topbar2-text { min-width: 0; flex: 1; }
.nc-topbar2-title { font-size: .98rem; font-weight: 700; color: #1f2937; line-height: 1.2; }
.nc-topbar2-sub { font-size: .72rem; color: var(--nc-muted); }

.nc-topbar2-right { display: flex; align-items: center; gap: .5rem; }

/* ---------------- 遮罩（手机上用） ---------------- */

.nc-sb-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1035;
}

.nc-sb-mask.on { display: block; }

/* ---------------- 手机 / 平板 ---------------- */

@media (max-width: 991.98px) {
    .nc-sb { transform: translateX(-100%); box-shadow: 0 0 30px rgba(15, 23, 42, .12); }
    .nc-sb.open { transform: none; }

    .nc-main { margin-left: 0; }

    .nc-hamburger { display: flex; }

    .nc-topbar2 { padding: 0 .75rem; }
}

/* 桌面上把右上角那个账号小标签藏掉（左边已经显示了） */
@media (min-width: 992px) {
    .nc-topbar2-right .nc-userchip { display: none; }
}

/* 未登录（登录页 / 注册页）：不要侧边栏，主区域占满 */
body.nc-guest .nc-main { margin-left: 0; }
body.nc-guest .nc-hamburger { display: none !important; }
body.nc-guest .nc-topbar2 { justify-content: center; }
body.nc-guest .nc-topbar2-text { text-align: center; }
body.nc-guest .nc-topbar2-right { position: absolute; right: 1rem; }
body.nc-guest .nc-sb,
body.nc-guest .nc-sb-mask { display: none !important; }

/* ==========================================================================
   云更新 · 组件列表（卡片式）
   ========================================================================== */

.nc-so {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border: 1px solid var(--nc-border);
    border-radius: 12px;
    margin-bottom: .6rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.nc-so:hover {
    border-color: color-mix(in srgb, var(--nc-primary) 30%, var(--nc-border));
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

.nc-so-main { flex: 1; min-width: 0; }

.nc-so-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .25rem;
}

.nc-so-name { font-weight: 700; font-size: .95rem; color: #1f2937; }

.nc-so-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.1rem;
    font-size: .78rem;
    color: var(--nc-muted);
    margin-top: .4rem;
}

.nc-so-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.nc-so-meta i { opacity: .65; }

/* 下载链接块 */
.nc-so-link {
    margin-top: .6rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    background: var(--nc-soft, #f7f8fa);
}

.nc-so-linkrow,
.nc-so-signed {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.nc-so-signed {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px dashed var(--nc-border);
}

.nc-so-url {
    flex: 1;
    min-width: 180px;
    font-size: .78rem;
    word-break: break-all;
    color: #0f172a;
}

.nc-so-link .flex-none { flex: none; }

/* 右侧操作 */
.nc-so-act {
    flex: none;
    width: 104px;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/* 行内编辑面板 */
.nc-so-edit {
    border: 1px solid var(--nc-border);
    border-radius: 12px;
    background: var(--nc-soft, #f7f8fa);
    padding: 1rem;
    margin: -.3rem 0 .8rem;
}

@media (max-width: 575.98px) {
    .nc-so { flex-direction: column; }
    .nc-so-act { width: 100%; flex-direction: row; }
    .nc-so-act .btn { flex: 1; }
}

/* ==========================================================================
 *  网站公告（顶栏铃铛 + 登录弹窗）
 * ========================================================================== */

/* ---- 铃铛 ---- */
.nc-bell {
    position: relative;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--nc-border, #e9ecef);
    border-radius: 10px;
    background: #fff;
    color: #4b5563;
    font-size: 15px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.nc-bell:hover { background: #f5f7fb; color: var(--nc-primary); }
.nc-bell::after { display: none; }        /* 去掉 bootstrap 默认小箭头 */

.nc-bell-num {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px;
    background: #ff4d4f; color: #fff;
    font-size: 10px; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ---- 下拉面板 ---- */
.nc-nb-menu {
    width: min(92vw, 340px);
    padding: 0;
    border: 1px solid var(--nc-border, #e9ecef);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
    overflow: hidden;
}

.nc-nb-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .8rem;
    border-bottom: 1px solid #f1f3f5;
    font-size: .8125rem; font-weight: 600;
}
.nc-nb-all {
    border: 0; background: none; padding: 0;
    color: var(--nc-primary); font-size: .75rem;
}
.nc-nb-done { color: #9aa1ac; font-weight: 400; font-size: .75rem; }

.nc-nb-list { max-height: 320px; overflow-y: auto; }

.nc-nb-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    width: 100%;
    padding: .6rem .8rem;
    border: 0; border-bottom: 1px solid #f6f7f9;
    background: none; text-align: left;
}
.nc-nb-item:last-child { border-bottom: 0; }
.nc-nb-item:hover { background: #f8fafc; }
.nc-nb-item.unread { background: #f4f8ff; }

.nc-nb-title {
    font-size: .8125rem; color: #1f2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nc-nb-item.unread .nc-nb-title { font-weight: 600; }

.nc-nb-time { grid-column: 2; font-size: .6875rem; color: #9aa1ac; }

.nc-nb-tag {
    align-self: center;
    padding: 1px 6px; border-radius: 6px;
    font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.nc-nb-tag.lv-info    { background: #eef4ff; color: #2f6bff; }
.nc-nb-tag.lv-success { background: #eafaf1; color: #0f9d58; }
.nc-nb-tag.lv-warning { background: #fff6e6; color: #c47f00; }
.nc-nb-tag.lv-danger  { background: #fdecec; color: #e03131; }

.nc-nb-foot {
    padding: .5rem .8rem;
    border-top: 1px solid #f1f3f5;
    background: #fcfcfd;
    font-size: .75rem; color: #8b93a1;
}
.nc-nb-foot a { color: var(--nc-primary); text-decoration: none; }

/* ---- 弹窗 ---- */
.nc-nm .modal-header { border-bottom: 1px solid #f1f3f5; }
.nc-nm .modal-title { font-size: .9375rem; }
.nc-nm .modal-body { padding: .8rem; background: #fbfcfd; }
.nc-nm-foot { justify-content: flex-end; gap: .5rem; }

.nc-nm-card {
    padding: .75rem .85rem;
    border: 1px solid #eceef2;
    border-left: 3px solid #dfe3ea;
    border-radius: 10px;
    background: #fff;
    margin-bottom: .6rem;
}
.nc-nm-card:last-child { margin-bottom: 0; }
.nc-nm-card.unread { border-left-color: var(--nc-primary); }

.nc-nm-head { display: flex; align-items: center; gap: .5rem; }
.nc-nm-title { font-size: .875rem; font-weight: 600; }
.nc-nm-meta { margin: .25rem 0 .45rem; font-size: .6875rem; color: #9aa1ac; }

.nc-nm-text {
    font-size: .8125rem; color: #374151;
    white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}

/* 管理页用的小东西 */
.nc-nl-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.nc-nf-checks { display: flex; flex-wrap: wrap; gap: .25rem .9rem; padding-top: .25rem; }
.nc-nf-checks .form-check { margin: 0; }

@media (max-width: 575.98px) {
    .nc-nb-menu { width: min(94vw, 320px); }
}

/* ==========================================================================
   区块间距（Bootstrap 的 .card 自己没有 margin，堆起来会贴在一起）
   --------------------------------------------------------------------------
   两种漏网情况：
     ① 页面忘了把 .col-* 套进 .row → 列本身没有上下 margin
     ② 多个 .card 直接做兄弟         → card 也没有上下 margin
   这里统一给「相邻区块」补 1rem 纵向间距。
   只在相邻兄弟上生效，不会影响列内部 / 卡片内部的布局；
   Bootstrap 的 mt-* 工具类带 !important，页面上已有的手写间距优先级更高。
   ========================================================================== */

#content > [class*="col-"] + [class*="col-"],
#content > .row + [class*="col-"],
#content > [class*="col-"] + .row {
    margin-top: 1rem;
}

#content .card + .card,
#content .card + .row,
#content .row + .card,
#content .card + .alert,
#content .alert + .card,
#content .card + form,
#content form + .card,
#content .card + .nc-doc-tabs,
#content .nc-doc-tabs + .card {
    margin-top: 1rem;
}

/* ==========================================================================
   别让中文被挤成「一个字一行」
   --------------------------------------------------------------------------
   弹性盒子里，中文的「最小宽度」就是一个字 —— 一旦被挤，就会变成竖排
   （顶栏标题、表头、按钮、标签这些最容易中招）。
   这里只给「短文本类」元素统一 nowrap；说明文字 / 地址 / JSON 这些长内容
   照旧换行，不会因为这条规则把页面撑宽。
   ========================================================================== */

/* 顶栏标题 & 副标题：单行 + 省略号（手机上直接藏掉副标题，别把顶栏顶高） */
.nc-topbar2-title,
.nc-topbar2-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .nc-topbar2-sub { display: none; }
}

/* 表头、按钮、徽章、统计标题、文档标签、快捷入口标题、侧边栏条目…… */
#content th,
#content .badge,
#content .btn,
#content .nc-stat-label,
#content .nc-doc-tab,
#content .nc-action-text strong,
#content .nc-pack-tile > span,
#content .card-header > strong,
.nc-sb-item > span,
.nc-nb-tag {
    white-space: nowrap;
}

/* 卡片头里的「标题 + 右侧提示」也让它俩各占一边，别互相挤 */
#content .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
}

/* 卡片头里如果塞了 .row（例如卡密编辑页），让它独占一行，别被 flex 挤扁 */
#content .card-header > * { min-width: 0; }
#content .card-header > .row { flex: 1 1 100%; }

/* ==========================================================================
   表格在手机上会被「压扁」→ 中文表头一个字一行
   --------------------------------------------------------------------------
   Bootstrap 的 .table 是 width:100%，列一多，浏览器就把每列压窄；
   中文哪儿都能断行，于是「发给谁 / 上线中」这种表头就变成竖排了。
   表头强制单行 → 表格最小宽度自然撑开 → 外面那层 .table-responsive 横向滑动，
   比一个字一行好看得多（长内容照旧在单元格里换行）。
   ========================================================================== */

#content .table-responsive > .table > thead > tr > th,
#content .table > thead > tr > th {
    white-space: nowrap;
}

/* ==========================================================================
   接口 / 代码区：手机上最容易变成「一个字一行」的地方
   --------------------------------------------------------------------------
   代码块的正确姿势是「横向滑动」，不是把字符竖着往下堆。
   面板里有两套 .nc-code 写法（包一层 div 的、pre 直接带类的），
   还有 .nc-url（接口地址）用了 word-break: break-all ——
   手机上宽度一窄，它就把 http://... 拆成一行一个字符，看着就像竖排。
   ========================================================================== */

/* 1) 代码块：单行 + 可横向滚动（pre 直接带 .nc-code 的也要能滑） */
.nc-code pre,
pre.nc-code {
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* 2) 「接口地址」那一行：窄屏让代码独占一行拿满宽度，再必要时断行 */
.nc-url {
    flex-wrap: wrap;
}

.nc-url code {
    flex: 1 1 16rem;
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* 3) 表格里的接口地址 / 代码（.nc-break）：锁单行，靠表格自己横向滚 */
#content .table code,
#content .table .nc-break {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* 4) 参数表里那种「字段名 / 类型 / 说明」的表，手机上也别把字段名压断 */
#content .table td > code:first-child {
    white-space: nowrap;
}

/* ==========================================================================
   代码块统一配色：深底 + 浅字
   --------------------------------------------------------------------------
   之前有两套 .nc-code：
     ① 早期那套给了「浅色主题的文字色」（color: var(--nc-text)，深灰）
     ② 后来那套给了「深色背景」（background: #1e293b）
   同时吃到两条规则的 <pre class="nc-code">（应用详情页的返回示例 / 各语言示例）
   就成了「黑字 + 黑底」，肉眼根本看不清。
   这里统一钉死：深底、亮字、行高舒展、能横向滑动。
   ========================================================================== */

.nc-code,
pre.nc-code {
    background: #1e293b;
    color: #eaf2fb;
    border: 1px solid #16202e;
    border-radius: 10px;
}

pre.nc-code {
    margin: 0;
    padding: 1rem;
    font-size: .82rem;
    line-height: 1.65;
    font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* 包一层 div 的那种写法：内层 pre 别再把颜色/背景改回去 */
.nc-code pre {
    background: transparent;
    color: #eaf2fb;
    font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 深底上的链接 / 强调色（顺便把注释感拉出来一点） */
.nc-code a,
pre.nc-code a {
    color: #7dd3fc;
    text-decoration: none;
}

/* 代码块里的浅色小标题（如果有） */
.nc-code strong,
pre.nc-code strong { color: #ffffff; }

/* ==========================================================================
   应用详情页 · 标签导航（概览 / 对接信息 / 客户端版本 / 接口清单 / 签名 / 示例）
   --------------------------------------------------------------------------
   手机上一行放不下就横向滑动，而不是换行堆成好几排。
   ========================================================================== */

.nc-tabs {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .3rem;
    margin-bottom: .9rem;
    background: #fff;
    border: 1px solid var(--nc-border);
    border-radius: 12px;
}

.nc-tabs::-webkit-scrollbar { display: none; }

.nc-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    padding: .45rem .8rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #64748b;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.nc-tab i { font-size: .95rem; opacity: .9; }
.nc-tab:hover { background: #f4f7fb; color: var(--nc-primary); }
.nc-tab.on { background: var(--nc-primary); color: #fff; }

.nc-pane { display: none; }
.nc-pane.on { display: block; animation: ncPaneIn .18s ease; }

@keyframes ncPaneIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

/* 头部那 4 个小指标 */
.nc-mini {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .7rem;
    border: 1px solid var(--nc-border);
    border-radius: 10px;
    background: var(--nc-soft, #f8fafc);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, background .15s;
}

.nc-mini:hover { border-color: var(--nc-primary); background: #fff; }
.nc-mini i { font-size: .95rem; color: var(--nc-primary); }
.nc-mini-val { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.nc-mini-label { font-size: .72rem; color: var(--nc-muted); }

@media (max-width: 575.98px) {
    .nc-mini-val { font-size: .95rem; }
}

/* ==========================================================================
   详情页标签导航 · 换成「花验那种」视觉
   --------------------------------------------------------------------------
   参考 hualuo.site 控制台的视觉语言（从它页面里的 CSS 扒的）：
     背景 #f5f7fb · 文字 #111827 / 次要 #475467 · 分隔线 #e5e7eb
     导航项：圆角 10px、14px、字重 700，选中态是「近黑底 + 白字」（不是蓝色）
     悬停底色 #f2f6fb · 弹窗/切页都是「淡入 + 轻微上移」
   ========================================================================== */

.nc-tabs {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.nc-tab {
    border-radius: 10px;
    padding: .5rem .9rem;
    font-size: .875rem;
    font-weight: 700;
    color: #475467;
}

.nc-tab:hover {
    background: #f2f6fb;
    color: #0f172a;
}

.nc-tab.on {
    background: #0f172a;
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .18);
}

.nc-tab.on:hover { background: #0f172a; color: #fff; }

/* 切标签时的淡入（照它的 modalIn 感觉压一点） */
@keyframes ncPaneIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* 头部的指标格子也换成更「软」的观感 */
.nc-mini {
    border-color: #e5e7eb;
    background: #f8fafc;
    border-radius: 12px;
}

.nc-mini:hover {
    border-color: #0f172a;
    background: #fff;
}

.nc-mini i { color: #475467; }
.nc-mini-val { color: #111827; }

/* ==========================================================================
   详情页标签 = 花验那种「苹果分段控件」
   --------------------------------------------------------------------------
   直接照它页子里 .apple-tab-bar / .apple-tab-item 的值抄的：
     灰槽 #f1f5f9 + 4px 内边距 + 3px 间距 + 1px #e2e8f0 边框 + 圆角 10px
     未选中：透明底、#344054、13px、字重 800
     选中  ：白底、#0f172a、轻微投影（像 iOS 的 segmented control）
   ========================================================================== */

.nc-tabs {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: .9rem;
}

.nc-tabs::-webkit-scrollbar { display: none; }

.nc-tab {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 800;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #344054;
    white-space: nowrap;
    cursor: pointer;
}

.nc-tab:hover { background: rgba(255, 255, 255, .7); color: #0f172a; }

.nc-tab.on,
.nc-tab.on:hover {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

@media (max-width: 575.98px) {
    .nc-tab { min-height: 44px; padding: 8px 13px; }
}

/* ==========================================================================
   表格 = 花验的 .apple-table 观感（全站生效）
   ========================================================================== */

#content .table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

#content .table > thead > tr > th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: #475467;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
}

#content .table > tbody > tr > td {
    padding: 10px 12px;
    color: #111827;
    font-weight: 600;
    border-bottom: 1px solid #edf1f6;
}

#content .table > tbody > tr:hover > td { background: #f8fbff; }

/* 卡片观感也对齐（圆角 12 / 边框 #e5e7eb / 极浅投影） */
#content .card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

#content .card-header {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb;
}

/* ============================================================================
 *  应用头像
 *  ----------------------------------------------------------------------------
 *  两种形态共用一个 .nc-ava 外壳：
 *    · 上传过图片 → 里面放 <img>，圆角裁切
 *    · 没上传过   → .nc-ava-txt，看应用名的第一个字，底色按应用ID 生成
 *  尺寸统一用 CSS 变量 --s 控制（helper 里传进去），改一个数就整体缩放。
 * ========================================================================== */
.nc-ava {
    --s: 44px;
    --h: 210;
    width: var(--s);
    height: var(--s);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: calc(var(--s) * .28);
    background: #f4f5f7;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    user-select: none;
}

.nc-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 首字母头像：两个同色相的颜色做渐变，看着不那么单调 */
.nc-ava-txt {
    background: linear-gradient(135deg,
                hsl(var(--h) 68% 52%),
                hsl(calc(var(--h) + 32) 70% 44%));
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--s) * .42);
    line-height: 1;
    padding-bottom: 1px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

/* 列表里那种圆角方块（编辑页预览大一点） */
.nc-ava-lg { border-radius: calc(var(--s) * .24); }

/* 头像上传区 */
.nc-ava-box {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.nc-ava-drop {
    border: 1px dashed #d7dbe2;
    border-radius: 12px;
    padding: 14px;
    background: #fafbfc;
    flex: 1 1 260px;
    min-width: 0;
}

/* ============================================================================
 *  UI 统一细节层（整体微改，2026-09-24）
 *  ----------------------------------------------------------------------------
 *  原则：**不改结构、不改观感大方向**，只把散落的手写样式收敛、把交互细节补全。
 *  内容全是「叠加式」规则，出问题把这一整段删掉就回到原样。
 *
 *    1) 基础与文字        2) 焦点环（可访问性）   3) 滚动条
 *    4) 表格              5) 表单                  6) 按钮与徽章
 *    7) 卡片与列表        8) 数字 / 标题排版       9) 弹层（SweetAlert/Swal）
 *   10) 手机端            11) 减少动态效果
 * ========================================================================== */

/* ---------------------------------------------------------- 1) 基础与文字 */

html {
    -webkit-tap-highlight-color: transparent;      /* 手机上点链接不再闪灰块 */
}

body {
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(47, 107, 255, .18);
    color: var(--nc-text);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -.01em;
}

/* 小字统一用色阶，不要在视图里各写各的灰 */
.nc-muted,
.form-text,
.text-muted {
    color: var(--nc-muted) !important;
}

/* 三级文字（序号、小注）：比 muted 再浅一点，但有名字可调 */
.nc-muted-3 { color: var(--nc-muted-3) !important; }

/* --------------------------------------------------- 2) 焦点环（键盘可达性）*/

:where(a, button, [role="button"], summary, .btn):focus-visible {
    outline: 2px solid var(--nc-primary);
    outline-offset: 2px;
    border-radius: var(--nc-radius-xs);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--nc-primary);
    box-shadow: 0 0 0 .18rem rgba(47, 107, 255, .15);
}

/* ------------------------------------------------------------ 3) 滚动条 */

* {
    scrollbar-width: thin;
    scrollbar-color: #d8dde6 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #dde2ea;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--nc-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: #c8cfda;
    background-clip: content-box;
}

/* -------------------------------------------------------------- 4) 表格 */

.table {
    font-variant-numeric: tabular-nums;            /* 数字等宽，列不再左右跳 */
}

.table > :not(caption) > * > * {
    border-color: var(--nc-border);
}

.table thead th {
    font-weight: 600;
    font-size: .8125rem;
    letter-spacing: .02em;
    text-transform: none;
}

.table tbody tr {
    transition: background-color var(--nc-dur) var(--nc-ease);
}

/* 行悬停：极淡的一层主色，比灰底更有「可点」感 */
.table tbody tr:hover > * {
    background-color: rgba(47, 107, 255, .045);
}

.table code {
    font-size: .8125rem;
}

.table-responsive {
    border-radius: var(--nc-radius-sm);
}

/* -------------------------------------------------------------- 5) 表单 */

.form-label {
    font-weight: 500;
    font-size: .875rem;
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    border-color: var(--nc-border);
    border-radius: var(--nc-radius-sm);
    transition: border-color var(--nc-dur) var(--nc-ease),
                box-shadow var(--nc-dur) var(--nc-ease),
                background-color var(--nc-dur) var(--nc-ease);
}

.form-control::placeholder {
    color: #a9aeb8;
}

.input-group-text {
    border-color: var(--nc-border);
    background: var(--nc-surface-soft);
    color: var(--nc-muted);
    font-size: .875rem;
}

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

.form-check-label {
    font-size: .9375rem;
}

/* -------------------------------------------------------- 6) 按钮与徽章 */

/* 主按钮：加一层很轻的竖向渐变 + 一点点立体感（跟主页那个黑按钮一个路子） */
.btn-primary,
.btn-default {
    background-image: linear-gradient(180deg, #4179ff 0%, #2f6bff 58%, #2a60ea 100%);
    border-color: #2a60ea;
    box-shadow: 0 1px 2px rgba(47, 107, 255, .22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-default:hover,
.btn-default:focus {
    background-image: linear-gradient(180deg, #4b82ff 0%, #3a74ff 58%, #2f6bff 100%);
    border-color: #2f6bff;
    box-shadow: 0 6px 18px rgba(47, 107, 255, .28);
}

.btn-outline-secondary,
.btn-outline-dark,
.btn-light {
    transition: background-color var(--nc-dur) var(--nc-ease),
                border-color var(--nc-dur) var(--nc-ease),
                color var(--nc-dur) var(--nc-ease),
                transform var(--nc-dur) var(--nc-ease);
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
    transform: translateY(-1px);
}

.btn i {
    line-height: 1;
}

/* 徽章统一：字重、内边距、圆角一处定 */
.badge {
    font-weight: 500;
    padding: .35em .62em;
    border-radius: var(--nc-radius-xs);
    letter-spacing: 0;
}

.badge.text-bg-light {
    background-color: var(--nc-surface-soft) !important;
    border: 1px solid var(--nc-border);
    color: var(--nc-muted) !important;
}

/* -------------------------------------------------------- 7) 卡片与列表 */

.card {
    transition: box-shadow var(--nc-dur) var(--nc-ease),
                border-color var(--nc-dur) var(--nc-ease);
}

.card-header {
    font-weight: 600;
}

/* 列表里那种「会点的卡片」：悬停轻轻抬一下（默认不动，避免整页都在动） */
.nc-hoverable,
.nc-card-list .card {
    transition: box-shadow var(--nc-dur) var(--nc-ease),
                border-color var(--nc-dur) var(--nc-ease),
                transform var(--nc-dur) var(--nc-ease);
}

.nc-hoverable:hover,
.nc-card-list .card:hover {
    box-shadow: var(--nc-shadow-hover);
    border-color: #dde3ec;
    transform: translateY(-1px);
}

/* 列表式入口（.nc-action，设置页/详情页那种一行一个的）：悬停轻轻抬一下 */
.nc-action:hover,
.nc-action:focus {
    transform: translateY(-1px);
}

/* ------------------------------------------------ 8) 数字 / 标题排版 */

/* 所有「统计数字」用等宽数字，从 9 滚到 10 时不会把旁边挤歪 */
.nc-stat-value,
.nc-num,
.stat b,
[data-count] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* 卡片头部的说明文字统一次级色 */
.card-header .nc-muted,
.card-header small {
    font-weight: 400;
}

/* ------------------------------------------------------ 9) 弹层统一 */

/* SweetAlert2：圆角跟上、按钮圆角跟上（默认是方的，跟面板不搭） */
.swal2-popup {
    border-radius: var(--nc-radius) !important;
    font-size: .9375rem !important;
}

.swal2-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    border-radius: var(--nc-radius-sm) !important;
    padding: .5rem 1.1rem !important;
    font-size: .875rem !important;
    box-shadow: none !important;
}

/* 日期 / 输入类弹窗里的小控件 */
.swal2-input,
.swal2-select,
.swal2-textarea {
    border-radius: var(--nc-radius-sm) !important;
    font-size: .9375rem !important;
}

/* ------------------------------------------------------------ 10) 手机端 */

@media (max-width: 576px) {

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: .7rem .9rem;
    }

    .table > :not(caption) > * > * {
        padding: .55rem .5rem;
        font-size: .875rem;
    }

    .btn {
        padding: .4rem .9rem;
    }

    .badge {
        font-size: .72rem;
    }

    /* 手机上表格一律可横滑，不要撑破卡片 */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

/* ------------------------------------------------ 11) 减少动态效果偏好 */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .nc-hoverable:hover,
    .nc-card-list .card:hover,
    .nc-entry:hover,
    .btn-outline-secondary:hover,
    .btn-outline-dark:hover {
        transform: none !important;
    }
}

/* 深色模式下，本层里那几个写死的浅色也要跟着换 */
@media (prefers-color-scheme: dark) {

    * {
        scrollbar-color: #39424e transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: #333c47;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #414c59;
        background-clip: content-box;
    }

    .form-control::placeholder {
        color: #6f7a88;
    }

    .nc-hoverable:hover,
    .nc-card-list .card:hover {
        border-color: var(--nc-border);
    }

    ::selection {
        background: rgba(47, 107, 255, .3);
    }
}

/* ----------------------------------------------------------------------------
 *  应用列表（左选应用那套：对接案例页 / SO 组件页 / 以后别的页共用）
 *  --------------------------------------------------------------------------
 *  ⚠️ 这套样式以前只写在「对接案例」页的内联 <style> 里，
 *     SO 组件页没有 → <a> 就退回成默认的蓝色链接，看着很突兀。
 *     现在统一放全局，凡是 .nc-app-item 都长一个样、都走面板的文字色。
 * -------------------------------------------------------------------------- */
.nc-app-list {
    max-height: 460px;
    overflow: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.nc-app-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    margin-bottom: 6px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    background: var(--nc-surface);
    /* ★ 关键：别让它继承链接色（蓝色），统一用面板文字色 */
    color: var(--nc-text) !important;
    text-decoration: none;
    transition: border-color var(--nc-dur, .18s) var(--nc-ease, ease),
                box-shadow var(--nc-dur, .18s) var(--nc-ease, ease),
                background-color var(--nc-dur, .18s) var(--nc-ease, ease),
                transform var(--nc-dur, .18s) var(--nc-ease, ease);
}

.nc-app-item:hover {
    color: var(--nc-text) !important;
    background: var(--nc-surface);
    border-color: var(--nc-primary);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}

.nc-app-item.on {
    color: var(--nc-text) !important;
    border-color: var(--nc-primary);
    background: rgba(47, 107, 255, .06);
    box-shadow: 0 0 0 2px rgba(47, 107, 255, .12) inset;
}

.nc-ai-name {
    font-weight: 600;
    font-size: .875rem;
    color: var(--nc-text);
}

.nc-app-item.on .nc-ai-name { color: var(--nc-primary); }

.nc-ai-id {
    font-size: .75rem;
    color: var(--nc-muted-3);
    flex: none;
}

.nc-ai-sub {
    font-size: .75rem;
    color: var(--nc-muted-3);
    margin-top: 2px;
}

/* ----------------------------------------------------------------------------
 *  退出登录弹窗 + 顶栏账号菜单
 * -------------------------------------------------------------------------- */

/* 弹窗里的「退出登录」按钮：红底白字（默认是主色蓝，退出这种事还是用红的好认） */
.nc-logout-ok {
    background: var(--nc-danger) !important;
    border-color: var(--nc-danger) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.nc-logout-ok:hover {
    filter: brightness(.94);
}

/* ---- 顶栏右侧的账号胶囊：可点，弹菜单 ---- */
.nc-userwrap {
    position: relative;
}

button.nc-userchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface);
    color: var(--nc-text);
    border-radius: var(--nc-radius-pill);
    padding: 5px 12px;
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color var(--nc-dur, .18s) var(--nc-ease, ease),
                background-color var(--nc-dur, .18s) var(--nc-ease, ease);
}

button.nc-userchip:hover {
    border-color: var(--nc-primary);
    background: var(--nc-surface-soft);
}

button.nc-userchip::after { display: none; }   /* 去掉 bootstrap 的小三角，我们用自己的箭头 */

/* ---- 账号菜单 ---- */
.nc-usermenu {
    min-width: 216px;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-sm);
    box-shadow: 0 12px 32px -12px rgba(16, 24, 40, .28);
    padding: 6px;
    margin-top: 8px;
}

.nc-usermenu-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--nc-border);
    margin-bottom: 6px;
}

.nc-usermenu-head strong {
    display: block;
    font-size: .875rem;
    color: var(--nc-text);
}

.nc-usermenu-head small {
    color: var(--nc-muted);
    font-size: .75rem;
}

.nc-usermenu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--nc-radius-xs);
    padding: 7px 10px;
    font-size: .8125rem;
    color: var(--nc-text);
}

.nc-usermenu .dropdown-item:hover {
    background: var(--nc-surface-soft);
    color: var(--nc-primary);
}

.nc-usermenu .dropdown-item i { font-size: .9375rem; color: var(--nc-muted); }
.nc-usermenu .dropdown-item:hover i { color: var(--nc-primary); }

.nc-usermenu .dropdown-item.danger { color: var(--nc-danger); }
.nc-usermenu .dropdown-item.danger i { color: var(--nc-danger); }
.nc-usermenu .dropdown-item.danger:hover { background: rgba(229, 72, 77, .08); color: var(--nc-danger); }

/* ============================================================================
 *  弹窗 / 提示 / 警告 —— 新一套（2026-09-24）
 *  ----------------------------------------------------------------------------
 *  换掉原来那套「白底 + 大圆图标 + 居中」的复古观感，改成：
 *    · 顶部提示条：白底卡片 + 左侧 3px 彩色条 + 小图标圆点 + 深色正文
 *    · SweetAlert 弹窗：16px 圆角、细边、柔和投影、按钮右对齐、更快的进场动画
 *    · Toast：白卡片 + 左侧彩条，从右上角滑入
 *    · 遮罩：轻微模糊（backdrop-filter），看着更「有层次」
 *
 *  ⚠️ 公告弹窗（Notice/popup.php）用的是 Bootstrap 的 .modal + .nc-nm，
 *     这里**完全没碰** .modal* 的样式，公告逻辑与外观保持原样。
 * ========================================================================== */

/* ---------------------------------------------------- 1) 顶部提示条 .alert */

.alert {
    position: relative;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius-md);
    background: var(--nc-surface);
    color: var(--nc-text);
    padding: .8rem 1rem .8rem 2.85rem;
    font-size: .875rem;
    line-height: 1.65;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -20px rgba(16, 24, 40, .5);
    overflow: hidden;
    animation: ncNoteIn .34s cubic-bezier(.22, .61, .36, 1);
}

/* 左侧那根彩色细条：靠绝对定位，不动内部结构（里面可能是任意 HTML） */
.alert::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: currentColor;
    opacity: .85;
}

/* 小图标圆点 */
.alert::before {
    position: absolute;
    left: .95rem;
    top: .78rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: var(--nc-surface-soft);
    color: var(--nc-muted);
    content: 'i';
}

.alert strong { color: inherit; font-weight: 600; }

/* 每种类型：只给「图标 + 竖条」上色，正文保持深色（更好读） */
.alert-success { color: #16a34a; border-color: #d6ecdd; background: #fbfefc; }
.alert-success::before { background: rgba(22, 163, 74, .12); color: #15803d; content: '✓'; }
.alert-danger  { color: #e5484d; border-color: #f6d3d4; background: #fffcfc; }
.alert-danger::before  { background: rgba(229, 72, 77, .12); color: #c62a2f; content: '✕'; }
.alert-warning { color: #c2820b; border-color: #f2e2bd; background: #fffefb; }
.alert-warning::before { background: rgba(194, 130, 11, .14); color: #96650a; content: '!'; }
.alert-secondary { color: var(--nc-muted); border-color: var(--nc-border); background: var(--nc-surface); }
.alert-secondary::before { background: var(--nc-surface-soft); color: var(--nc-muted); content: 'i'; }

/* 正文统一深色（上面的 color 只影响竖条和图标） */
.alert { --nc-note-text: var(--nc-text); }

.alert,
.alert-success,
.alert-danger,
.alert-warning,
.alert-secondary {
    color: var(--nc-text);
}

.alert-success::after { background: #16a34a; }
.alert-danger::after  { background: #e5484d; }
.alert-warning::after { background: #e0a52a; }
.alert-secondary::after { background: #c3cad6; }

.alert-success::before { color: #15803d; }
.alert-danger::before  { color: #c62a2f; }
.alert-warning::before { color: #96650a; }

@keyframes ncNoteIn {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- 2) SweetAlert2 弹窗本体 */

.swal2-container.swal2-backdrop-show {
    background: rgba(15, 18, 22, .42) !important;
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}

.swal2-popup {
    width: min(430px, 92vw) !important;
    padding: 22px 22px 18px !important;
    border: 1px solid var(--nc-border) !important;
    border-radius: 16px !important;
    background: var(--nc-surface) !important;
    box-shadow: 0 24px 60px -24px rgba(16, 24, 40, .38), 0 2px 6px rgba(16, 24, 40, .06) !important;
    font-size: .9375rem !important;
    font-family: inherit !important;
}

/* 图标：不再是「白底大圆圈 + 粗边」，改成 36px 的彩色小徽章 */
.swal2-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 12px !important;
    border-width: 0 !important;
    font-size: 20px !important;
    border-radius: 12px !important;
}

.swal2-icon.swal2-success { background: rgba(22, 163, 74, .12) !important; color: #16a34a !important; }
.swal2-icon.swal2-error   { background: rgba(229, 72, 77, .12) !important; color: #e5484d !important; }
.swal2-icon.swal2-warning { background: rgba(224, 165, 42, .16) !important; color: #b57f0e !important; }
.swal2-icon.swal2-info    { background: rgba(47, 107, 255, .12) !important; color: var(--nc-primary) !important; }
.swal2-icon.swal2-question{ background: rgba(107, 114, 128, .14) !important; color: var(--nc-muted) !important; }

.swal2-icon .swal2-icon-content {
    font-size: 20px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.swal2-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--nc-text) !important;
    letter-spacing: -.01em;
    padding: 0 !important;
    margin: 0 0 6px !important;
}

.swal2-html-container {
    margin: 0 !important;
    color: var(--nc-muted) !important;
    font-size: .875rem !important;
    line-height: 1.7 !important;
}

.swal2-actions {
    width: 100% !important;
    margin: 18px 0 0 !important;
    gap: 8px !important;
    justify-content: flex-end !important;
}

/* 按钮：统一的「确定 / 取消」观感 */
.swal2-styled {
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: var(--nc-radius-sm) !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transition: filter .16s ease, background-color .16s ease, border-color .16s ease !important;
    margin: 0 !important;
}

.swal2-styled.swal2-confirm {
    background: var(--nc-primary) !important;
    border: 1px solid var(--nc-primary) !important;
    color: #fff !important;
}

.swal2-styled.swal2-cancel {
    background: var(--nc-surface) !important;
    border: 1px solid var(--nc-border) !important;
    color: var(--nc-text) !important;
}

.swal2-styled.swal2-cancel:hover { background: var(--nc-surface-soft) !important; }
.swal2-styled:hover { filter: brightness(.96); }

/* 输入类弹窗里的小控件 */
.swal2-input,
.swal2-select,
.swal2-textarea {
    border-radius: var(--nc-radius-sm) !important;
    border: 1px solid var(--nc-border) !important;
    font-size: .875rem !important;
    box-shadow: none !important;
    margin: 6px 0 0 !important;
}

.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
    border-color: var(--nc-primary) !important;
    box-shadow: 0 0 0 .18rem rgba(47, 107, 255, .15) !important;
}

.swal2-validation-message {
    background: #fff5f5 !important;
    border-radius: var(--nc-radius-sm) !important;
    font-size: .8125rem !important;
    color: #c62a2f !important;
}

/* 进场/退场：快一点（原来的有点拖） */
.swal2-show { animation: ncSwalIn .2s cubic-bezier(.22, .61, .36, 1) !important; }
.swal2-hide { animation: ncSwalOut .14s ease forwards !important; }

@keyframes ncSwalIn {
    from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes ncSwalOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate3d(0, 6px, 0) scale(.99); }
}

/* --------------------------------------------------------- 3) 右上角 Toast */

.swal2-container.swal2-top-end > .swal2-popup.swal2-toast,
.swal2-popup.swal2-toast {
    width: auto !important;
    max-width: min(360px, 92vw) !important;
    padding: 12px 16px 12px 14px !important;
    border: 1px solid var(--nc-border) !important;
    border-left: 3px solid var(--nc-primary) !important;
    border-radius: var(--nc-radius-md) !important;
    background: var(--nc-surface) !important;
    box-shadow: 0 14px 40px -18px rgba(16, 24, 40, .4) !important;
    align-items: center;
}

.swal2-toast .swal2-title {
    font-size: .875rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: var(--nc-text) !important;
}

.swal2-toast .swal2-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 8px 0 0 !important;
    border-radius: 50% !important;
    font-size: 12px !important;
}

.swal2-toast .swal2-icon .swal2-icon-content { font-size: 12px !important; }
.swal2-toast .swal2-timer-progress-bar { background: rgba(47, 107, 255, .35) !important; height: 2px !important; }

.swal2-toast.swal2-icon-success { border-left-color: #16a34a !important; }
.swal2-toast.swal2-icon-error   { border-left-color: #e5484d !important; }
.swal2-toast.swal2-icon-warning { border-left-color: #e0a52a !important; }
.swal2-toast.swal2-icon-info    { border-left-color: var(--nc-primary) !important; }

/* ------------------------------------------------------- 4) 深色 / 少动 */

@media (prefers-color-scheme: dark) {
    .swal2-popup,
    .alert,
    .swal2-popup.swal2-toast {
        background: var(--nc-surface) !important;
        border-color: var(--nc-border) !important;
    }

    .alert-success { background: var(--nc-surface); border-color: #1f3a2a; }
    .alert-danger  { background: var(--nc-surface); border-color: #40252a; }
    .alert-warning { background: var(--nc-surface); border-color: #3d3420; }

    .swal2-styled.swal2-cancel { background: var(--nc-surface-soft) !important; }
}

@media (max-width: 576px) {
    .swal2-popup {
        width: 94vw !important;
        padding: 18px 16px 14px !important;
    }

    .swal2-actions { flex-direction: column-reverse; }

    .swal2-styled { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .alert { animation: none; }
    .swal2-show, .swal2-hide { animation: none !important; }
}

/* 提示条里本来就有图标（例如 <i class="bi bi-wallet"> 那种）时，
   就别再叠一个本喵加的圆点图标了 —— 只保留文字缩进。
   用了 :has()，老浏览器不支持就退化成两个图标（不影响功能）。 */
.alert:has(i.bi),
.alert:has(svg) {
    padding-left: 1rem;
}

.alert:has(i.bi)::before,
.alert:has(svg)::before {
    display: none;
}

/* ----------------------------------------------------------------------------
 *  圆形头像（QQ 头像 / 首字母兜底）
 *  --------------------------------------------------------------------------
 *  结构：<span class="nc-avatar"><span class="nc-avatar-txt">字</span><img …></span>
 *  · 角标是 <img>，盖在首字母上面；图挂了 onerror 会把 img 删掉 → 露出首字母
 *  · 尺寸靠 --s 控制，颜色靠 --h（色相）
 * -------------------------------------------------------------------------- */
.nc-avatar {
    --s: 32px;
    --h: 210;
    position: relative;
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(var(--h) 68% 52%), hsl(calc(var(--h) + 32) 70% 44%));
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--s) * .42);
    line-height: 1;
    user-select: none;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .08);
}

.nc-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

/* 顶栏 / 侧边栏里那种小头像，外面加一圈白边更好看 */
.nc-avatar-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(15, 23, 42, .08); }

/* 账号菜单头部：头像 + 名字竖排 */
.nc-usermenu-head strong { line-height: 1.3; }
.nc-usermenu-head small  { display: block; margin-top: 2px; }
.nc-userchip .nc-avatar  { margin-right: 2px; }

/* ============================================================================
 *  防「竖排文字」（2026-09-24）
 *  ----------------------------------------------------------------------------
 *  两种常见成因，这里都堵上：
 *   ① 卡片头用了 d-flex 但没 flex-wrap → 长说明把标题挤成「一个字一行」
 *   ② DataTables 的「每页 N 条」下拉被 .form-select 的 100% 宽度撑满 → 文字被拆行
 *      （有的页面忘了引 dataTables.bootstrap5.min.css，就更容易出这个）
 * ========================================================================== */

/* ① 卡片头里的 flex 行：小屏允许换行，别把文字挤成一列 */
.card-header .d-flex {
    flex-wrap: wrap;
}

/* 标题、按钮这种短内容不许被压缩成一列 */
.card-header .d-flex > strong,
.card-header .d-flex > .btn,
.card-header .d-flex > a.btn,
.nc-shrink-0 {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ② DataTables 的「每页 N 条」和搜索框：label 不拆行、下拉自动宽度 */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
    font-size: .875rem;
    color: var(--nc-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    width: auto !important;
    display: inline-block;
    min-width: 4.5rem;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 10rem;
}

.dataTables_wrapper .dataTables_info {
    white-space: nowrap;
}

/* 手机上这两个块各自占一行，别挤在一起 */
@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 100%;
    }
}

/* ==========================================================================
 *  每日签到 · 月历（黑白/主题色都自适应，用的是面板自己的 CSS 变量）
 * ========================================================================== */

.nc-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.nc-cal-head {
    text-align: center;
    font-size: .75rem;
    color: var(--nc-muted, #6b7280);
    padding: 2px 0 6px;
}

.nc-cal-day {
    position: relative;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--nc-line, #e5e7eb);
    background: var(--nc-card, #fff);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: .78rem;
    color: var(--nc-text, #111);
    line-height: 1.15;
    overflow: hidden;
}

.nc-cal-empty {
    border: 1px dashed transparent;
    background: transparent;
}

.nc-cal-num {
    font-variant-numeric: tabular-nums;
}

.nc-cal-pt {
    font-size: .62rem;
    color: #16a34a;
    font-weight: 600;
}

/* 已签到：绿色描边 + 浅底 */
.nc-cal-on {
    border-color: #16a34a;
    background: rgba(22, 163, 74, .10);
}

/* 今天：加粗描边 */
.nc-cal-today {
    border-color: var(--nc-primary, #111);
    border-width: 2px;
}

/* 手机竖屏时格子小一点，避免文字被挤成竖排 */
@media (max-width: 420px) {
    .nc-cal { gap: 4px; }
    .nc-cal-day { min-height: 38px; border-radius: 8px; font-size: .72rem; }
    .nc-cal-pt { font-size: .58rem; }
}

/* --------------------------------------------------------------------------
 *  登录页顶部小列表：让两个标签各占一半（其它页面的 .nc-tabs 不受影响）
 *  用的是面板已有的 .nc-tab / .nc-pane 组件（激活态是 .on）
 * -------------------------------------------------------------------------- */
#nc-login-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

#nc-login-tabs .nc-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}