/* =========================================================
 *  admin 后台主题 v4 — 现代简洁风
 *  视觉：清爽白底 + 蓝色主调 + 柔和层次 + 精致圆角
 * ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
    --accent:         #5b6cff;
    --accent-2:       #7685ff;
    --accent-3:       #9aa5ff;
    --accent-soft:    #eef0ff;
    --accent-contrast:#ffffff;

    --text:           #182034;
    --text-secondary: #68728a;
    --text-muted:     #9aa3b7;

    --bg-body:        #f4f6fb;
    --bg-card:        #ffffff;
    --bg-sidebar:     #ffffff;
    --bg-sidebar-2:   #f8fafc;
    --bg-topbar:      #ffffff;
    --bg-hover:       #eef2f7;

    --border:         #e7eaf2;
    --border-strong:  #d7dce8;
    --border-sidebar: #eff2f7;

    --shadow-sm:      0 2px 8px rgba(24,32,52,.04);
    --shadow:         0 8px 24px rgba(24,32,52,.07);
    --shadow-lg:      0 24px 64px rgba(24,32,52,.14);

    --radius:         10px;
    --radius-sm:      8px;
    --radius-xs:      6px;

    --sidebar-width:  248px;
}

/* ---------- 深色模式 ---------- */
:root[data-theme="dark"] {
    --accent:         #7c8aff;
    --accent-2:       #98a3ff;
    --accent-3:       #b4bcff;
    --accent-soft:    rgba(124,138,255,.13);

    --text:           #e8eaed;
    --text-secondary: #aeb3b9;
    --text-muted:     #6b7280;

    --bg-body:        #0f1420;
    --bg-card:        #171d2b;
    --bg-sidebar:     #0c1220;
    --bg-sidebar-2:   #121a2a;
    --bg-topbar:      #151b29;
    --bg-hover:       #20283a;

    --border:         #2a2e38;
    --border-strong:  #363c48;
    --border-sidebar: #23272f;

    --shadow-sm:      0 1px 3px rgba(0,0,0,.25);
    --shadow:         0 2px 6px rgba(0,0,0,.35);
    --shadow-lg:      0 8px 24px rgba(0,0,0,.45);
}

/* ---------- 2. 基础页面 ---------- */
html, body { transition: background-color .3s ease, color .3s ease; }
body, body.gray-bg, body.white-bg { background-color: var(--bg-body) !important; color: var(--text) !important; }
#wrapper { background: var(--bg-body); position: relative; overflow: hidden; }
* { box-sizing: border-box; }

/* ---------- 3. 左侧导航栏 ---------- */
.navbar-default.navbar-static-side,
.navbar-static-side {
    background: var(--bg-sidebar) !important;
    width: var(--sidebar-width) !important;
    z-index: 100;
    border: none !important;
}
.navbar-static-side {
    box-shadow: 2px 0 16px rgba(15,23,42,.06);
}
.navbar-static-side .sidebar-collapse {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 侧边栏 LOGO 区域 */
.navbar-static-side .profile-element {
    flex-shrink: 0;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-sidebar);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.navbar-static-side .profile-element .img-preview {
    max-height: 30px;
    max-width: 140px;
    filter: brightness(0) invert(1);
    opacity: 1 !important;
}

/* 菜单区域 */
#side-menu {
    flex: 1;
    padding: 10px 10px 20px;
    list-style: none;
    margin: 0;
}
#side-menu > li { position: relative; margin-bottom: 3px; }

/* 一级菜单 */
#side-menu > li > a {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: all .22s cubic-bezier(.4,0,.2,1);
    line-height: 1.4;
}
#side-menu > li > a .fa,
#side-menu > li > a .icon {
    width: 24px;
    text-align: center;
    margin-right: 11px;
    font-size: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: all .22s ease;
}
#side-menu > li > a .nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#side-menu > li > a .arrow {
    font-size: 11px;
    color: var(--text-muted);
    opacity: .5;
    transition: transform .28s ease, opacity .22s ease;
    flex-shrink: 0;
}

#side-menu > li > a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
#side-menu > li > a:hover .fa,
#side-menu > li > a:hover .icon { color: var(--accent); }

#side-menu > li.active > a {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    padding-left: 17px;
}
#side-menu > li.active > a .fa,
#side-menu > li.active > a .icon { color: var(--accent); }
#side-menu > li.active > a .arrow { color: var(--accent); opacity: 1; transform: rotate(90deg); }

/* 二级 / 三级菜单容器 */
#side-menu .nav-second-level,
#side-menu .nav-third-level {
    background: var(--bg-sidebar-2);
    padding: 6px 0;
    list-style: none;
    margin: 3px 0 4px 10px;
    border-radius: var(--radius-xs);
    border-left: 2px solid var(--border-sidebar);
}

#side-menu .nav-second-level li a,
#side-menu .nav-third-level li a {
    display: block;
    padding: 8px 14px 8px 26px;
    color: var(--text-secondary);
    font-size: 12.8px;
    text-decoration: none;
    border-radius: 5px;
    transition: all .18s ease;
    line-height: 1.4;
    position: relative;
}
#side-menu .nav-third-level li a { padding-left: 38px; }

#side-menu .nav-second-level li a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: all .18s ease;
}
#side-menu .nav-third-level li a::before { left: 27px; }

#side-menu .nav-second-level li a:hover,
#side-menu .nav-third-level li a:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
#side-menu .nav-second-level li a:hover::before,
#side-menu .nav-third-level li a:hover::before {
    background: var(--accent);
    transform: translateY(-50%) scale(1.4);
}

#side-menu .nav-second-level li a.J_menuItem.active,
#side-menu .nav-third-level li a.J_menuItem.active,
#side-menu .nav-second-level li a.J_menuItem-active,
#side-menu .nav-third-level li a.J_menuItem-active {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
    font-weight: 600;
}
#side-menu .nav-second-level li a.J_menuItem.active::before,
#side-menu .nav-third-level li a.J_menuItem.active::before,
#side-menu .nav-second-level li a.J_menuItem-active::before,
#side-menu .nav-third-level li a.J_menuItem-active::before {
    background: var(--accent);
    transform: translateY(-50%) scale(1.4);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#side-menu .nav-second-level li a .arrow,
#side-menu .nav-third-level li a .arrow { margin-left: auto; }

/* 侧边栏滚动条 */
.sidebar-collapse::-webkit-scrollbar { width: 5px; }
.sidebar-collapse::-webkit-scrollbar-track { background: transparent; }
.sidebar-collapse::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.sidebar-collapse::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
:root[data-theme="dark"] .sidebar-collapse::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ---------- 4. 顶部栏 ---------- */
.row.border-bottom.row-top {
    background: var(--bg-topbar) !important;
    border-bottom: 1px solid var(--border) !important;
    height: 54px;
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    box-shadow: 0 1px 4px rgba(15,23,42,.03);
    z-index: 99;
    flex-shrink: 0;
}
.row.border-bottom.row-top .navbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    margin-bottom: 0;
}
.row.border-bottom.row-top .navbar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

.navbar-top-links {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}
.navbar-top-links > li {
    display: flex;
    align-items: center;
    height: 36px;
    border-radius: var(--radius-xs);
    margin-left: 4px;
}
.navbar-top-links > li.logout-item {
    margin-left: 12px;
}
.navbar-top-links > li > a,
#themeToggle {
    color: var(--text-secondary) !important;
    padding: 0 14px;
    font-size: 13px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .18s ease;
    text-decoration: none;
    line-height: 1;
    border-radius: var(--radius-xs);
    border: none;
}
.navbar-top-links > li > a:hover,
#themeToggle:hover {
    color: var(--accent) !important;
    background: var(--bg-hover) !important;
}
#themeToggle {
    cursor: pointer;
}
#themeToggle .fa { font-size: 14px; }
.navbar-top-links > li.logout-item > a {
    color: var(--text-secondary) !important;
    border: 1px solid var(--border);
}
.navbar-top-links > li.logout-item > a:hover { color: #ff4d4f !important; border-color: #ffcdd2; background: #fff2f0 !important; }

/* 顶栏 LOGO + 标题 */
.topbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    gap: 10px;
}
.topbar-logo img {
    height: 30px;
    width: auto;
    object-fit: contain;
}
.topbar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}
.topbar-logo:hover .topbar-title { color: var(--accent); transition: color .2s; }

/* ---------- 5. 标签页栏 ---------- */
.content-tabs {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: flex-end;
    padding: 0 20px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(15,23,42,.02);
}
.page-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.page-tabs::-webkit-scrollbar { height: 4px; }
.page-tabs::-webkit-scrollbar-track { background: transparent; }
.page-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.page-tabs-content {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
    min-width: 100%;
    padding: 6px 0 0;
}
.J_menuTab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    user-select: none;
    letter-spacing: .01em;
}
.J_menuTab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2.5px;
    border-radius: 2px;
    background: var(--accent);
    transition: width .25s cubic-bezier(.4,0,.2,1);
}
.J_menuTab:hover {
    color: var(--accent);
    background: var(--bg-hover);
}
.J_menuTab.active {
    color: var(--accent);
    background: var(--bg-body);
    border-color: var(--border);
    border-bottom: 2px solid var(--bg-body);
    margin-bottom: -1px;
    font-weight: 600;
}
.J_menuTab.active::after {
    width: calc(100% - 32px);
}
.J_menuTab .fa-times-circle {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0;
    width: 0;
    transition: all .2s ease;
    margin-left: 0;
}
.J_menuTab:hover .fa-times-circle,
.J_menuTab.active .fa-times-circle {
    opacity: 1;
    width: auto;
    margin-left: 2px;
}
.J_menuTab .fa-times-circle:hover { color: #ff4d4f; transform: rotate(90deg); }

/* ---------- 6. 布局骨架 ---------- */
.navbar-static-side { position: fixed; left: 0; top: 0; bottom: 0; }
#wrapper { position: relative; display: flex; height: 100vh; }
#page-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-body);
    margin-left: var(--sidebar-width);
    transition: margin-left .25s ease;
}
#page-wrapper > .J_mainContent {
    flex: 1;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    background: var(--bg-body);
    padding: 20px 24px;
}
.J_mainContent .J_iframe {
    display: none;
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-body);
    border-radius: var(--radius-sm);
}
.J_mainContent .J_iframe.active { display: block; }

/* iframe 内页适配 */
.wrapper.wrapper-content { padding: 0; background: transparent; }

/* ---------- 7. 卡片 / ibox ---------- */
.ibox {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 18px;
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.ibox:hover { box-shadow: var(--shadow); }
.ibox-title {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ibox-title h5 { color: var(--text); font-weight: 600; font-size: 14px; margin: 0; }
.ibox-content { background: transparent; color: var(--text); padding: 20px; }
.ibox-content h1,
.ibox-content h2,
.ibox-content h3 { color: var(--text); }

/* ---------- 8. 表格 ---------- */
.table {
    color: var(--text);
    margin-bottom: 0;
}
.table > thead > tr > th {
    background: var(--bg-sidebar-2);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 12px 16px;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--border) !important;
    padding: 13px 16px;
    vertical-align: middle;
    font-size: 13px;
    color: var(--text);
}
.table > tbody > tr:hover > td { background: var(--accent-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > td { background: var(--bg-sidebar-2); }
.table-striped > tbody > tr:nth-of-type(odd):hover > td { background: var(--accent-soft); }
:root[data-theme="dark"] .table > thead > tr > th { background: #22262f; }
:root[data-theme="dark"] .table > tbody > tr:hover > td { background: rgba(74,144,255,.08); }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background: #1c1f26; }

.table > tbody > tr > td:last-child,
.table > thead > tr > th:last-child { text-align: right; }

/* ---------- 9. 按钮 ---------- */
.btn {
    border-radius: var(--radius-xs);
    font-weight: 500;
    font-size: 13px;
    padding: 6px 18px;
    transition: all .2s cubic-bezier(.4,0,.2,1);
    border: 1px solid transparent;
    line-height: 1.5;
    letter-spacing: .01em;
}
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 0 rgba(22,119,255,.2);
}
.btn-primary:hover {
    background: var(--accent-2) !important;
    border-color: var(--accent-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(22,119,255,.25);
}
.btn-default {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.btn-default:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.btn-danger { border-radius: var(--radius-xs); }
.btn-info { background: var(--accent); border-color: var(--accent); }
.btn-success { border-radius: var(--radius-xs); }
.btn-xs { border-radius: 4px; padding: 2px 10px; }
.btn-sm { border-radius: 5px; padding: 5px 14px; }
.btn-block { display: block; width: 100%; }

/* ---------- 10. 表单 ---------- */
.form-control {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-xs);
    box-shadow: none;
    padding: 8px 13px;
    height: 38px;
    font-size: 13px;
    transition: all .2s ease;
}
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22,119,255,.1);
    outline: none;
}
.form-control::-webkit-input-placeholder { color: var(--text-muted); }
.form-group { margin-bottom: 18px; }
textarea.form-control { height: auto; min-height: 88px; resize: vertical; }
select.form-control { height: 38px; }
.form-horizontal .control-label { color: var(--text-secondary); font-weight: 500; }

/* ---------- 11. 分页 ---------- */
.pagination > li > a,
.pagination > li > span {
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    margin: 0 3px;
    padding: 7px 13px;
    font-size: 13px;
    transition: all .18s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pagination > .active > a,
.pagination > .active > span {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(22,119,255,.2);
}
.pagination > .disabled > a,
.pagination > .disabled > span { color: var(--text-muted); opacity: .5; }

/* ---------- 12. 标签 / 徽章 ---------- */
.label { border-radius: 4px; font-weight: 500; padding: .3em .65em; font-size: 12px; }
.label-primary { background: var(--accent); }
.badge { background: var(--accent-soft); color: var(--accent); border-radius: 4px; font-weight: 600; font-size: 11px; padding: 2px 7px; }

/* ---------- 13. 弹窗 / layer ---------- */
.layui-layer { border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; }
.layui-layer-title { background: var(--bg-card) !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; border-radius: var(--radius) var(--radius) 0 0 !important; font-weight: 600; }

/* ---------- 14. 控制台统计卡 ---------- */
.widget.style1 {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.widget.style1:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,.12);
}
.widget.style1::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -35px;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,.07);
    border-radius: 50%;
}
.widget.style1.navy-bg  { background: linear-gradient(135deg, #1677ff, #2b7fff) !important; }
.widget.style1.lazur-bg { background: linear-gradient(135deg, #1677ff, #53a0fd) !important; }
.widget.style1.yellow-bg{ background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; }
.widget.style1 h3 { color: rgba(255,255,255,.88); font-weight: 500; font-size: 13px; letter-spacing: .02em; }
.widget.style1 h2 { color: #fff; font-size: 32px; font-weight: 700; margin: 6px 0 0; letter-spacing: -.02em; }
.widget.style1 .fa { color: rgba(255,255,255,.55); font-size: 34px; }

/* ---------- 15. 搜索栏 / 工具栏 ---------- */
.search-form .form-control,
.form-inline .form-control { margin-right: 8px; min-width: 200px; }

/* ---------- 16. 登录页 ---------- */
.main-wrap {
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    overflow: hidden;
}
.main-wrap-left {
    background: linear-gradient(160deg, #1677ff, #4096ff, #69b1ff) !important;
    color: #fff;
}
.main-wrap-left-text,
.main-wrap-left-title,
.main-wrap-left-subtitle { color: #fff !important; }
.main-wrap-right { background: var(--bg-card) !important; }
.main-wrap-right-title { color: var(--text) !important; }
.main-wrap-right-subtitle { color: var(--text-muted) !important; }
.main-wrap-right-bottom { color: var(--text-muted) !important; }
.main-wrap-right-submit {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 4px;
    box-shadow: 0 4px 12px rgba(22,119,255,.3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.main-wrap-right-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22,119,255,.4);
}
.main-wrap .form-control {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
    border-radius: var(--radius-xs) !important;
}
.main-wrap .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(22,119,255,.1) !important;
}
.roundBox { background: var(--accent-soft) !important; }
.verify { border-radius: var(--radius-xs); border: 1px solid var(--border-strong); cursor: pointer; }

/* ---------- 17. 内页页面标题栏 ---------- */
.page-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-header .page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-header .page-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
}
.page-header .page-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}
.page-header .page-actions { display: flex; gap: 8px; }

/* ---------- 18. 状态标签 ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}
.status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    flex-shrink: 0;
}
.status-published { background: rgba(22,119,255,.08); color: #1677ff; }
.status-published::before { background: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,.15); }
.status-draft { background: rgba(107,114,128,.08); color: #6b7280; }
.status-draft::before { background: #9ca3af; }
.status-disabled { background: rgba(255,77,79,.08); color: #ff4d4f; }
.status-disabled::before { background: #ff4d4f; box-shadow: 0 0 0 2px rgba(255,77,79,.15); }
.status-info { background: rgba(22,119,255,.08); color: #1677ff; }
.status-info::before { background: #1677ff; box-shadow: 0 0 0 2px rgba(22,119,255,.15); }

/* ---------- 19. 操作按钮 ---------- */
.table-actions { display: inline-flex; gap: 4px; align-items: center; }
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid transparent;
    transition: all .18s ease;
    white-space: nowrap;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}
.btn-action-edit { color: #1677ff; border-color: #d6e4ff; background: #f0f5ff; }
.btn-action-edit:hover { color: #0958d9; border-color: #91caff; background: #e6f4ff; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,119,255,.15); }
.btn-action-delete { color: #ff4d4f; border-color: #ffccc7; background: #fff2f0; }
.btn-action-delete:hover { color: #cf1322; border-color: #ffa39e; background: #fff1f0; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(255,77,79,.15); }
.btn-action-view { color: #1677ff; border-color: #d6e4ff; background: #f0f5ff; }
.btn-action-view:hover { color: #0958d9; border-color: #91caff; background: #e6f4ff; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(22,119,255,.15); }

/* ---------- 20. 工具栏 ---------- */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.toolbar .search-bar { display: flex; gap: 8px; align-items: center; }
.toolbar .search-bar .form-control { min-width: 220px; }

/* ---------- 21. 表单增强 ---------- */
.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 7px;
}
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.form-section-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin: 24px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-title:first-child { margin-top: 0; }
.form-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--accent);
    border-radius: 2px;
}

/* ---------- 22. 上传区域 ---------- */
.file-upload-zone {
    width: 100%;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 28px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-sidebar-2);
    transition: all .25s ease;
    cursor: pointer;
}
.file-upload-zone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.file-upload-zone i { font-size: 28px; display: block; margin-bottom: 10px; opacity: .4; }

/* ---------- 23. 提示信息 ---------- */
.alert {
    border-radius: var(--radius-xs);
    border: none;
    padding: 14px 18px;
    font-size: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-info { background: #e8f1fe; color: #155ad5; border-left: 4px solid #1677ff; }
.alert-success { background: #ecfdf3; color: #15803d; border-left: 4px solid #52c41a; }
.alert-warning { background: #fefce8; color: #a16207; border-left: 4px solid #faad14; }
.alert-danger { background: #fef2f2; color: #dc2626; border-left: 4px solid #ff4d4f; }

/* ---------- 24. 空状态 ---------- */
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty-state i { font-size: 48px; margin-bottom: 14px; opacity: .15; }
.empty-state p { font-size: 13.5px; margin: 0; }

/* ---------- 25. 动效 ---------- */
.ibox { animation: slideUp .35s cubic-bezier(.4,0,.2,1) both; }
.table tbody tr { animation: fadeIn .3s ease both; }
.table tbody tr:nth-child(1)  { animation-delay: 0ms; }
.table tbody tr:nth-child(2)  { animation-delay: 35ms; }
.table tbody tr:nth-child(3)  { animation-delay: 70ms; }
.table tbody tr:nth-child(4)  { animation-delay: 105ms; }
.table tbody tr:nth-child(5)  { animation-delay: 140ms; }
.table tbody tr:nth-child(6)  { animation-delay: 175ms; }
.table tbody tr:nth-child(7)  { animation-delay: 210ms; }
.table tbody tr:nth-child(8)  { animation-delay: 245ms; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 26. 深色模式细节 ---------- */
:root[data-theme="dark"] .alert-info { background: #0c192e; color: #4a90ff; border-left-color: #4a90ff; }
:root[data-theme="dark"] .alert-success { background: #0c1f10; color: #4ade80; border-left-color: #4ade80; }
:root[data-theme="dark"] .alert-warning { background: #1f1808; color: #facc15; border-left-color: #facc15; }
:root[data-theme="dark"] .alert-danger { background: #1f0c0e; color: #fb7185; border-left-color: #fb7185; }
:root[data-theme="dark"] .status-published { background: rgba(74,144,255,.12); color: #4a90ff; }
:root[data-theme="dark"] .status-draft { background: rgba(255,255,255,.04); color: #6b7280; }
:root[data-theme="dark"] .status-disabled { background: rgba(255,77,79,.12); color: #fb7185; }
:root[data-theme="dark"] .btn-action-edit { background: rgba(74,144,255,.1); border-color: rgba(74,144,255,.2); color: #4a90ff; }
:root[data-theme="dark"] .btn-action-delete { background: rgba(255,77,79,.1); border-color: rgba(255,77,79,.2); color: #fb7185; }
:root[data-theme="dark"] .btn-action-view { background: rgba(74,144,255,.1); border-color: rgba(74,144,255,.2); color: #4a90ff; }
:root[data-theme="dark"] .file-upload-zone { background: var(--bg-card); }
:root[data-theme="dark"] .dropdown-menu { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .dropdown-menu > li > a { color: var(--text-secondary); }
:root[data-theme="dark"] .dropdown-menu > li > a:hover { background: var(--bg-hover); color: var(--accent); }
:root[data-theme="dark"] hr { border-color: var(--border); }
:root[data-theme="dark"] .main-wrap-right-submit { box-shadow: 0 4px 12px rgba(74,144,255,.3); }
:root[data-theme="dark"] .widget.style1::after { background: rgba(255,255,255,.04); }

/* =========================================================
 *  admin 后台主题 v5 — 游戏运营控制台
 *  登录页、主框架、控制台的统一视觉层
 * ========================================================= */

html,
body {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
input,
select,
textarea { font-family: inherit; }

/* ---------- 主框架 ---------- */
body.admin-shell {
    margin: 0;
    overflow: hidden;
    background: var(--bg-body) !important;
}

.admin-shell #wrapper {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.admin-shell .navbar-static-side {
    width: var(--sidebar-width) !important;
    background:
        radial-gradient(circle at 20% 0, rgba(91,108,255,.18), transparent 30%),
        linear-gradient(180deg, #10182a 0%, #0b1220 100%) !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    box-shadow: 12px 0 36px rgba(8,14,26,.12);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
}

.admin-shell .navbar-static-side .sidebar-collapse {
    height: 100%;
    overflow: hidden;
}

.shell-brand {
    height: 78px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}

.shell-brand-mark,
.login-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 17px;
    background: linear-gradient(145deg, #7c8aff, #5b6cff);
    box-shadow: 0 10px 24px rgba(91,108,255,.34), inset 0 1px 0 rgba(255,255,255,.2);
}

.shell-brand-copy,
.login-brand-lockup > span:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.shell-brand-copy strong {
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: .08em;
}

.shell-brand-copy small {
    margin-top: 4px;
    color: rgba(218,225,255,.54);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .15em;
}

.sidebar-section-label {
    padding: 20px 24px 8px;
    color: rgba(181,193,220,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.admin-shell #side-menu {
    padding: 4px 12px 20px;
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-shell #side-menu::-webkit-scrollbar { width: 4px; }
.admin-shell #side-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.admin-shell #side-menu > li { margin-bottom: 5px; }

.admin-shell #side-menu > li > a {
    min-height: 46px;
    padding: 12px 13px;
    color: #9ca9c4;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 550;
}

.admin-shell #side-menu > li > a .fa,
.admin-shell #side-menu > li > a .icon {
    color: #71809f;
    margin-right: 10px;
}

.admin-shell #side-menu > li > a:hover {
    color: #eef1ff;
    background: rgba(255,255,255,.055);
}

.admin-shell #side-menu > li > a:hover .fa,
.admin-shell #side-menu > li > a:hover .icon { color: #aab4ff; }

.admin-shell #side-menu > li.active > a {
    padding-left: 13px;
    color: #fff;
    background: linear-gradient(135deg, rgba(91,108,255,.28), rgba(91,108,255,.12));
    box-shadow: inset 0 0 0 1px rgba(134,147,255,.15), 0 8px 20px rgba(0,0,0,.08);
    border-radius: 11px;
}

.admin-shell #side-menu > li.active > a::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 13px;
    width: 3px;
    height: 20px;
    border-radius: 0 4px 4px 0;
    background: #7c8aff;
    box-shadow: 0 0 12px rgba(124,138,255,.65);
}

.admin-shell #side-menu > li.active > a .fa,
.admin-shell #side-menu > li.active > a .icon { color: #b4bcff; }

.admin-shell #side-menu .nav-second-level,
.admin-shell #side-menu .nav-third-level {
    margin: 6px 0 8px 20px;
    padding: 5px 0 5px 9px;
    background: transparent;
    border-left: 1px solid rgba(151,164,195,.16);
    border-radius: 0;
}

.admin-shell #side-menu .nav-second-level li a,
.admin-shell #side-menu .nav-third-level li a {
    padding: 9px 12px 9px 20px;
    color: #8290ad;
    border-radius: 8px;
    font-size: 12.5px;
}

.admin-shell #side-menu .nav-second-level li a::before {
    left: 8px;
    width: 4px;
    height: 4px;
    background: #53617d;
}

.admin-shell #side-menu .nav-second-level li a:hover,
.admin-shell #side-menu .nav-third-level li a:hover,
.admin-shell #side-menu .nav-second-level li a.J_menuItem.active,
.admin-shell #side-menu .nav-third-level li a.J_menuItem.active {
    color: #e7eaff !important;
    background: rgba(255,255,255,.05) !important;
}

.admin-shell #side-menu .nav-second-level li a.J_menuItem.active::before,
.admin-shell #side-menu .nav-third-level li a.J_menuItem.active::before {
    background: #8d9aff;
    box-shadow: 0 0 0 3px rgba(124,138,255,.13);
}

.sidebar-footer {
    margin: 0 14px 14px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9ca9c4;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 11px;
    flex-shrink: 0;
}

.sidebar-footer > span:last-child { display: flex; flex-direction: column; }
.sidebar-footer strong { color: #c8d0e3; font-size: 11.5px; font-weight: 600; }
.sidebar-footer small { margin-top: 2px; color: #65728f; font-size: 10px; }

.system-status-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    background: #31d0aa;
    box-shadow: 0 0 0 4px rgba(49,208,170,.11), 0 0 12px rgba(49,208,170,.35);
}

.admin-shell #page-wrapper {
    margin-left: var(--sidebar-width);
    height: 100vh;
    transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}

.admin-shell .row.border-bottom.row-top {
    height: 64px;
    min-height: 64px;
    margin: 0;
    padding: 0 22px;
    background: var(--bg-topbar) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(24,32,52,.02);
}

.admin-shell .row.border-bottom.row-top > .navbar.navbar-static-top {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-shell .shell-topbar-left {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    float: none !important;
    gap: 14px !important;
}

.shell-icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: .2s ease;
}

.shell-icon-button:hover {
    color: var(--accent);
    border-color: rgba(91,108,255,.3);
    background: var(--accent-soft);
}

.shell-page-heading { display: flex; align-items: center; }
.shell-page-heading strong { color: var(--text); font-size: 14px; line-height: 1.3; }
.shell-page-heading span { margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }

.admin-shell .navbar-top-links > li {
    margin-left: 7px;
    color: var(--text-secondary);
}

.admin-shell .navbar-top-links.navbar-right {
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    float: none !important;
}

.admin-shell .navbar-top-links > li > a,
.admin-shell #themeToggle {
    height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.admin-shell .navbar-top-links > li > a:hover,
.admin-shell #themeToggle:hover {
    border-color: var(--border);
    background: var(--bg-hover) !important;
}

.admin-shell .navbar-top-links > li.logout-item { margin-left: 8px; }
.admin-shell .navbar-top-links > li.logout-item > a { border-color: var(--border); }

.topbar-status {
    gap: 8px;
    padding: 0 10px;
    font-size: 11.5px;
}

:root[data-theme="dark"] .admin-shell .row.border-bottom.row-top,
:root[data-theme="dark"] .admin-shell .row.border-bottom.row-top > .navbar.navbar-static-top {
    background: #151b29 !important;
}

:root[data-theme="dark"] .admin-shell .shell-icon-button,
:root[data-theme="dark"] .admin-shell .navbar-top-links > li > a,
:root[data-theme="dark"] .admin-shell #themeToggle {
    color: #aeb7ca !important;
    background: #1a2232 !important;
    border-color: #2a3448 !important;
}

:root[data-theme="dark"] .admin-shell .shell-icon-button:hover,
:root[data-theme="dark"] .admin-shell .navbar-top-links > li > a:hover,
:root[data-theme="dark"] .admin-shell #themeToggle:hover {
    color: #ffffff !important;
    background: #232d41 !important;
    border-color: #3a4760 !important;
}

:root[data-theme="dark"] .admin-shell .shell-page-heading strong { color: #f0f3fa !important; }
:root[data-theme="dark"] .admin-shell .shell-page-heading span,
:root[data-theme="dark"] .admin-shell .topbar-status { color: #8995ac !important; }
:root[data-theme="dark"] .admin-shell .navbar-top-links > li.logout-item > a {
    color: #c6ccda !important;
    border-color: #39445a !important;
}

.admin-shell .content-tabs {
    height: 52px;
    min-height: 52px;
    margin: 0;
    padding: 0 20px;
    align-items: center;
    background: var(--bg-sidebar-2);
    border-bottom: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.admin-shell .page-tabs {
    height: 100%;
    display: flex;
    align-items: center;
}

.admin-shell .page-tabs-content {
    min-height: 100%;
    align-items: center;
    gap: 8px;
    padding: 0;
}

.admin-shell .J_menuTab {
    height: 34px;
    padding: 0 13px;
    gap: 8px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    box-shadow: 0 1px 2px rgba(24,32,52,.035);
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
}

.admin-shell .J_menuTab::after { display: none; }
.admin-shell .J_menuTab:hover {
    color: var(--accent);
    background: var(--bg-card);
    border-color: rgba(91,108,255,.38);
    box-shadow: 0 4px 12px rgba(24,32,52,.07);
    transform: translateY(-1px);
}

.admin-shell .J_menuTab.active {
    margin: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #5365f5, #6d5ee8);
    border-color: transparent;
    box-shadow: 0 5px 14px rgba(83,101,245,.24);
}

.admin-shell .J_menuTab > i:first-child { font-size: 11px; }

.admin-shell .J_menuTab .fa-times-circle {
    width: auto;
    margin-left: 3px;
    color: currentColor;
    opacity: .48;
}

.admin-shell .J_menuTab:hover .fa-times-circle,
.admin-shell .J_menuTab.active .fa-times-circle {
    width: auto;
    margin-left: 3px;
    opacity: .72;
}

.admin-shell .J_menuTab .fa-times-circle:hover {
    color: #ffffff;
    opacity: 1;
    transform: rotate(90deg);
}

:root[data-theme="dark"] .admin-shell .content-tabs {
    background: #111827;
    border-bottom-color: #273146;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

:root[data-theme="dark"] .admin-shell .J_menuTab {
    color: #aeb7ca;
    background: #1a2232;
    border-color: #303b50;
    box-shadow: none;
}

:root[data-theme="dark"] .admin-shell .J_menuTab:hover {
    color: #dfe3ff;
    background: #202a3d;
    border-color: #5665a0;
}

:root[data-theme="dark"] .admin-shell .J_menuTab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #6273ff, #7968ee);
    border-color: transparent;
    box-shadow: 0 5px 16px rgba(68,82,210,.3);
}

.admin-shell #page-wrapper > .J_mainContent {
    position: relative;
    margin: 0;
    padding: 18px 20px 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(91,108,255,.035), transparent 26%),
        var(--bg-body);
}

.admin-shell .J_mainContent .J_iframe {
    border-radius: 0;
    background: transparent;
}

.iframe-loading {
    position: absolute;
    inset: 18px 20px 20px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-body);
    border-radius: 12px;
}

.iframe-loading.is-visible { display: flex; }
.iframe-loading span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: shellLoading .8s ease-in-out infinite alternate;
}
.iframe-loading span:nth-child(2) { animation-delay: .15s; }
.iframe-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes shellLoading { to { opacity: .25; transform: translateY(-5px); } }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: none;
    padding: 0;
    background: rgba(5,10,20,.52);
    border: 0;
    backdrop-filter: blur(2px);
}

.admin-shell.sidebar-hidden .navbar-static-side { transform: translateX(-100%); }
.admin-shell.sidebar-hidden #page-wrapper { margin-left: 0; }

/* ---------- 控制台 ---------- */
body.dashboard-page {
    min-height: 100%;
    background: transparent !important;
}

.dashboard-page .wrapper.wrapper-content {
    padding: 0 2px 24px;
    max-width: 1540px;
    margin: 0 auto;
}

.dashboard-hero {
    position: relative;
    min-height: 238px;
    padding: 36px 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    color: #fff;
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 22%, rgba(103,225,255,.2), transparent 24%),
        radial-gradient(circle at 40% 120%, rgba(132,107,255,.45), transparent 36%),
        linear-gradient(125deg, #283b9c 0%, #4c5ee9 48%, #6c5ce7 100%);
    box-shadow: 0 18px 45px rgba(53,67,173,.2);
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000);
}

.dashboard-hero-copy { position: relative; z-index: 2; max-width: 660px; }
.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
}
.dashboard-eyebrow i { color: #73f2ce; font-size: 7px; text-shadow: 0 0 10px #73f2ce; }
.dashboard-hero h1 { margin: 14px 0 10px; color: #fff; font-size: 28px; font-weight: 750; letter-spacing: -.02em; }
.dashboard-hero p { margin: 0; color: rgba(240,243,255,.74); font-size: 13.5px; line-height: 1.7; }
.dashboard-hero-actions { margin-top: 25px; display: flex; align-items: center; gap: 11px; }
.dashboard-primary-action,
.dashboard-secondary-action {
    min-height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: .2s ease;
}
.dashboard-primary-action { color: #3445c4 !important; background: #fff; box-shadow: 0 8px 22px rgba(24,32,91,.2); }
.dashboard-secondary-action { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.dashboard-primary-action:hover,
.dashboard-secondary-action:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(24,32,91,.22); }

.dashboard-date-card {
    position: relative;
    z-index: 2;
    width: 148px;
    height: 160px;
    margin-right: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 20px 40px rgba(30,37,112,.18);
    backdrop-filter: blur(12px);
}
.dashboard-date-card > span:first-child { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.dashboard-date-card strong { margin: 5px 0 2px; font-size: 54px; line-height: 1; font-weight: 750; }
.dashboard-date-card small { color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .09em; }
.dashboard-date-orbit { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit-one { width: 210px; height: 210px; }
.orbit-two { width: 250px; height: 250px; border-style: dashed; animation: dashboardOrbit 28s linear infinite; }
@keyframes dashboardOrbit { to { transform: rotate(360deg); } }

.dashboard-metrics {
    margin: 18px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.metric-card {
    position: relative;
    min-height: 112px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.metric-card:hover { transform: translateY(-2px); border-color: rgba(91,108,255,.22); box-shadow: var(--shadow); }
.metric-card::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 0 0 4px 4px; }
.metric-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 15px;
    font-size: 20px;
}
.metric-primary .metric-icon { color: #5163ef; background: #eef0ff; }
.metric-violet .metric-icon { color: #8b5cf6; background: #f3efff; }
.metric-amber .metric-icon { color: #e59b16; background: #fff6df; }
.metric-primary::before { background: #5b6cff; }
.metric-violet::before { background: #8b5cf6; }
.metric-amber::before { background: #f0aa2c; }
.metric-content { display: flex; flex-direction: column; min-width: 0; }
.metric-content > span { color: var(--text-secondary); font-size: 11.5px; }
.metric-content strong { margin: 5px 0 0; color: var(--text); font-size: 27px; line-height: 1.15; font-weight: 750; }
.metric-content strong.metric-status-text { font-size: 21px; }
.metric-content small { color: var(--text-muted); font-size: 10.5px; }
.metric-content small i { margin-right: 3px; color: #42bda0; }
.metric-index { position: absolute; right: 15px; top: 13px; color: var(--border); font-size: 25px; font-weight: 800; letter-spacing: -.08em; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(310px, .8fr); gap: 16px; }
.dashboard-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
}
.dashboard-panel-header {
    min-height: 60px;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.dashboard-panel-header > div { display: flex; flex-direction: column; }
.panel-kicker { color: var(--accent); font-size: 8.5px; font-weight: 750; letter-spacing: .15em; }
.dashboard-panel-header h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }
.panel-hint { color: var(--text-muted); font-size: 10.5px; }
.status-chip {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #168c70;
    background: rgba(49,208,170,.1);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 650;
}
.status-chip i { width: 6px; height: 6px; background: #31c8a2; border-radius: 50%; box-shadow: 0 0 0 3px rgba(49,200,162,.12); }

.quick-access-grid { padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-access-item {
    min-height: 66px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text) !important;
    background: var(--bg-sidebar-2);
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none !important;
    transition: .2s ease;
}
.quick-access-item:hover { background: var(--bg-card); border-color: rgba(91,108,255,.22); box-shadow: 0 8px 20px rgba(24,32,52,.06); transform: translateY(-1px); }
.quick-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 11px; }
.quick-icon-indigo { color: #6c5ce7; background: rgba(108,92,231,.11); }
.quick-icon-blue { color: #3184e8; background: rgba(49,132,232,.11); }
.quick-icon-amber { color: #dc981d; background: rgba(220,152,29,.12); }
.quick-icon-teal { color: #20a98a; background: rgba(32,169,138,.11); }
.quick-access-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.quick-access-item strong { font-size: 12px; font-weight: 650; }
.quick-access-item small { margin-top: 4px; color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-arrow { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.quick-access-item:hover .quick-arrow { color: var(--accent); transform: translateX(2px); }

.status-list { padding: 8px 18px 12px; }
.status-list-item { min-height: 56px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--border); }
.status-list-item:last-child { border-bottom: 0; }
.status-list-icon { width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); background: var(--accent-soft); border-radius: 9px; font-size: 12px; }
.status-list-item > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.status-list-item strong { color: var(--text); font-size: 11.5px; font-weight: 650; }
.status-list-item small { margin-top: 2px; color: var(--text-muted); font-size: 9.5px; }
.status-list-item em { margin-left: auto; color: #20a98a; font-size: 10px; font-style: normal; font-weight: 650; }

.workflow-panel { margin-top: 16px; }
.workflow-track { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
.workflow-step { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workflow-step > span { width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-secondary); background: var(--bg-sidebar-2); border: 1px solid var(--border); border-radius: 10px; font-size: 11px; font-weight: 700; }
.workflow-step.is-current > span { color: #fff; background: linear-gradient(135deg, #5b6cff, #7b6cf6); border-color: transparent; box-shadow: 0 6px 14px rgba(91,108,255,.22); }
.workflow-step > div { display: flex; flex-direction: column; }
.workflow-step strong { color: var(--text); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.workflow-step small { margin-top: 3px; color: var(--text-muted); font-size: 9.5px; white-space: nowrap; }
.workflow-arrow { color: var(--border-strong); font-size: 17px; }

:root[data-theme="dark"] .metric-primary .metric-icon { background: rgba(91,108,255,.14); }
:root[data-theme="dark"] .metric-violet .metric-icon { background: rgba(139,92,246,.14); }
:root[data-theme="dark"] .metric-amber .metric-icon { background: rgba(240,170,44,.14); }

/* ---------- 登录页 ---------- */
body.login-page,
body.login-page.gray-bg {
    min-height: 100vh;
    margin: 0;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text);
    background: #eef1f8 !important;
}

.login-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.login-glow { position: absolute; border-radius: 50%; filter: blur(4px); }
.login-glow-one { width: 620px; height: 620px; top: -300px; right: -120px; background: radial-gradient(circle, rgba(91,108,255,.18), transparent 68%); }
.login-glow-two { width: 520px; height: 520px; bottom: -280px; left: -100px; background: radial-gradient(circle, rgba(74,194,210,.13), transparent 68%); }
.login-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(91,108,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(91,108,255,.045) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }

.login-theme-toggle {
    position: fixed;
    top: 24px;
    right: 26px;
    z-index: 5;
    height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.86);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(24,32,52,.07);
    backdrop-filter: blur(12px);
    font-size: 11.5px;
}

.login-shell {
    position: relative;
    z-index: 2;
    width: 1040px;
    max-width: 100%;
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 24px;
    box-shadow: 0 32px 90px rgba(28,39,75,.17), 0 4px 18px rgba(28,39,75,.06);
    animation: loginShellIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginShellIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }

.login-showcase {
    position: relative;
    min-width: 0;
    padding: 42px 46px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 84% 24%, rgba(111,229,238,.19), transparent 25%),
        radial-gradient(circle at 20% 88%, rgba(150,121,255,.32), transparent 35%),
        linear-gradient(145deg, #202f79 0%, #3548b8 46%, #6355d8 100%);
}
.login-showcase::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(140deg, #000, transparent 70%); }

.login-brand-lockup { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.login-brand-lockup .login-brand-mark { width: 41px; height: 41px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.login-brand-lockup strong { font-size: 20px; line-height: 1.15; letter-spacing: .1em; }
.login-brand-lockup small { margin-top: 4px; color: rgba(232,235,255,.55); font-size: 8.5px; letter-spacing: .18em; }

.login-showcase-copy { position: relative; z-index: 2; margin-top: 62px; }
.login-showcase-kicker { display: inline-flex; align-items: center; gap: 8px; color: rgba(239,242,255,.65); font-size: 10.5px; font-weight: 650; letter-spacing: .08em; }
.login-showcase-kicker i { width: 7px; height: 7px; background: #68ecc9; border-radius: 50%; box-shadow: 0 0 0 4px rgba(104,236,201,.1), 0 0 12px rgba(104,236,201,.45); }
.login-showcase-copy h1 { margin: 17px 0 14px; color: #fff; font-size: 32px; line-height: 1.38; font-weight: 750; letter-spacing: -.02em; }
.login-showcase-copy p { max-width: 370px; margin: 0; color: rgba(236,239,255,.67); font-size: 12.5px; line-height: 1.75; }

.login-puzzle-art { position: relative; z-index: 2; width: 260px; height: 145px; margin: 22px auto 0; }
.puzzle-tile { position: absolute; width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.78); background: rgba(255,255,255,.105); border: 1px solid rgba(255,255,255,.15); border-radius: 19px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 30px rgba(18,26,90,.16); backdrop-filter: blur(8px); font-size: 20px; animation: puzzleFloat 5s ease-in-out infinite; }
.tile-one { left: 20px; top: 5px; transform: rotate(-8deg); }
.tile-two { left: 94px; top: 22px; transform: rotate(5deg); animation-delay: -.9s; }
.tile-three { left: 166px; top: 0; transform: rotate(9deg); animation-delay: -1.8s; }
.tile-four { left: 105px; top: 84px; width: 66px; height: 66px; transform: rotate(-4deg); animation-delay: -2.7s; }
@keyframes puzzleFloat { 50% { margin-top: -7px; } }
.puzzle-orbit { position: absolute; left: 10px; top: -40px; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.puzzle-orbit-two { left: -10px; top: -60px; width: 280px; height: 280px; border-style: dashed; animation: dashboardOrbit 32s linear infinite; }

.login-showcase-footer { position: relative; z-index: 2; margin-top: auto; display: flex; gap: 20px; color: rgba(233,237,255,.64); font-size: 10.5px; }
.login-showcase-footer i { margin-right: 5px; color: #69e2c3; }

.login-form-panel { padding: 42px 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); }
.login-form-content { width: 100%; max-width: 350px; }
.login-form-heading { margin-bottom: 32px; }
.login-mobile-brand { display: none; }
.login-form-heading h2 { margin: 0; color: var(--text); font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.login-form-heading p { margin: 8px 0 0; color: var(--text-muted); font-size: 12px; }
.login-field { margin-bottom: 19px; }
.login-field > label { display: block; margin: 0 0 8px; color: var(--text-secondary); font-size: 11.5px; font-weight: 650; }
.login-input-wrap { position: relative; flex: 1; min-width: 0; }
.login-field-icon { position: absolute; z-index: 2; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; transition: .2s ease; }
.login-input-wrap .form-control {
    width: 100%;
    height: 46px;
    padding: 10px 42px;
    color: var(--text);
    background: var(--bg-sidebar-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: none;
    font-size: 12.5px;
    transition: .2s ease;
}
.login-input-wrap .form-control:focus { background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(91,108,255,.09); }
.login-input-wrap:focus-within .login-field-icon { color: var(--accent); }
.password-toggle { position: absolute; z-index: 3; right: 7px; top: 7px; width: 32px; height: 32px; padding: 0; color: var(--text-muted); background: transparent; border: 0; border-radius: 8px; }
.password-toggle:hover { color: var(--accent); background: var(--accent-soft); }
.login-captcha-row { display: flex; gap: 10px; align-items: flex-start; }
.captcha-button { position: relative; width: 116px; height: 46px; padding: 0; flex-shrink: 0; overflow: hidden; background: var(--bg-sidebar-2); border: 1px solid var(--border); border-radius: 11px; }
.captcha-button img { width: 100%; height: 100%; object-fit: cover; }
.captcha-button > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(21,29,50,.55); opacity: 0; transition: .2s ease; }
.captcha-button:hover > span { opacity: 1; }
.login-submit { width: 100%; height: 48px; margin-top: 8px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background: linear-gradient(135deg, #5365f5, #7463ed); border: 0; border-radius: 11px; box-shadow: 0 10px 24px rgba(83,101,245,.27); font-size: 12.5px; font-weight: 700; transition: .22s ease; }
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(83,101,245,.34); }
.login-submit i { transition: transform .2s ease; }
.login-submit:hover i { transform: translateX(3px); }
.login-submit.is-loading i { animation: loginArrow 1s ease-in-out infinite; }
@keyframes loginArrow { 50% { transform: translateX(5px); opacity: .45; } }
.login-submit:disabled { cursor: wait; opacity: .82; }
.login-security-note { margin: 20px 0 0; text-align: center; color: var(--text-muted); font-size: 10px; }
.login-security-note i { margin-right: 5px; color: #36b494; }
.login-copyright { margin: 24px 0 0; text-align: center; color: var(--text-muted); font-size: 9.5px; }
.login-field-error { display: block; margin-top: 5px; color: #f05b69; font-size: 10.5px; }
.login-input-wrap .form-control.error { border-color: rgba(240,91,105,.7); box-shadow: 0 0 0 3px rgba(240,91,105,.08); animation: none; }

:root[data-theme="dark"] body.login-page,
:root[data-theme="dark"] body.login-page.gray-bg { background: #0d1320 !important; }
:root[data-theme="dark"] .login-shell { border-color: rgba(255,255,255,.06); box-shadow: 0 32px 90px rgba(0,0,0,.42); }
:root[data-theme="dark"] .login-theme-toggle { color: var(--text-secondary); background: rgba(23,29,43,.72); border-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .login-input-wrap .form-control { background: #111827; border-color: #293246; }
:root[data-theme="dark"] .login-input-wrap .form-control:focus { background: #151d2c; border-color: var(--accent); }

/* ---------- 配置管理内页 ---------- */
body.admin-inner-page,
body.admin-inner-page.gray-bg {
    min-height: 100vh;
    padding: 0;
    color: var(--text);
    background: var(--bg-body) !important;
}
.admin-inner-page .wrapper.wrapper-content { padding: 0; }
.admin-inner-page .page-header { margin-bottom: 16px; }
.admin-inner-page .page-header .page-desc { margin-bottom: 0; }
.admin-inner-page .page-actions .btn { height: 38px; display: inline-flex; align-items: center; gap: 7px; }
.admin-inner-page .management-card,
.admin-inner-page .settings-card { margin-bottom: 0; }
.management-card .ibox-content { padding: 0; }

.filter-bar {
    min-height: 70px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
}
.filter-fields { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.filter-control { position: relative; }
.filter-control.has-icon > i {
    position: absolute;
    z-index: 2;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.filter-control.has-icon .form-control { width: 270px; padding-left: 36px; }
.filter-select { width: 170px; margin: 0; }
.toolbar-note,
.result-count { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.toolbar-note i { margin-right: 5px; color: var(--accent); }
.result-count strong { color: var(--text); font-size: 14px; }
.danger-outline { color: #e5484d; border-color: rgba(229,72,77,.25); background: rgba(229,72,77,.05); }
.danger-outline:hover { color: #d9363e; border-color: rgba(229,72,77,.5); background: rgba(229,72,77,.09); }

.management-table > thead > tr > th { height: 48px; padding: 12px 18px; text-transform: none; letter-spacing: 0; }
.management-table > tbody > tr > td { height: 58px; padding: 12px 18px; }
.management-table .check-column { width: 54px; }
.primary-cell { color: var(--text); font-weight: 600; }
.id-badge,
.sort-badge,
.category-badge,
.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 3px 9px;
    color: var(--text-secondary);
    background: var(--bg-sidebar-2);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 11.5px;
    white-space: nowrap;
}
.id-badge,
.sort-badge { min-width: 42px; justify-content: center; font-variant-numeric: tabular-nums; }
.config-key {
    padding: 4px 8px;
    color: #5b6bdb;
    background: rgba(91,107,219,.08);
    border: 1px solid rgba(91,107,219,.12);
    border-radius: 6px;
    font-family: Consolas, Monaco, monospace;
    font-size: 11.5px;
}
.type-text { color: #2764c8; background: rgba(39,100,200,.08); border-color: rgba(39,100,200,.13); }
.type-area { color: #7554c7; background: rgba(117,84,199,.08); border-color: rgba(117,84,199,.13); }
.type-choice { color: #138a72; background: rgba(19,138,114,.08); border-color: rgba(19,138,114,.13); }
.type-select { color: #b16a16; background: rgba(177,106,22,.08); border-color: rgba(177,106,22,.13); }
.type-image { color: #b34b78; background: rgba(179,75,120,.08); border-color: rgba(179,75,120,.13); }
.empty-state { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); }
.empty-state > i { font-size: 25px; color: var(--border-strong); }
.pagination-wrap { min-height: 70px; padding: 14px 18px; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid var(--border); }
.pagination-wrap .pagination { margin: 0; }

.settings-card { overflow: visible; }
.settings-tabs > .nav-tabs {
    padding: 10px 12px 0;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    background: var(--bg-sidebar-2);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}
.settings-tabs > .nav-tabs > li { float: none; margin: 0; }
.settings-tabs > .nav-tabs > li > a {
    margin: 0 0 10px;
    padding: 9px 15px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}
.settings-tabs > .nav-tabs > li > a:hover { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.settings-tabs > .nav-tabs > li.active > a,
.settings-tabs > .nav-tabs > li.active > a:hover,
.settings-tabs > .nav-tabs > li.active > a:focus { color: var(--accent); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.settings-tabs .tab-content,
.settings-tabs .panel-body { background: transparent; border: 0; }
.settings-form { padding: 22px 24px 0; }
.settings-form-head { padding-bottom: 16px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border); }
.settings-form-head h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; }
.settings-form-head span { color: var(--text-muted); font-size: 11.5px; }
.setting-field { padding: 20px 0; display: grid; grid-template-columns: minmax(180px, 26%) minmax(300px, 640px); gap: 26px; align-items: start; border-bottom: 1px solid var(--border); }
.setting-label { padding-top: 8px; }
.setting-label label { margin: 0 0 5px; color: var(--text); font-size: 13px; font-weight: 600; }
.setting-label code { padding: 0; color: var(--text-muted); background: transparent; font-size: 10.5px; }
.setting-control .form-control { width: 100%; margin: 0; }
.choice-group { min-height: 38px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.choice-item { margin: 0; padding: 8px 12px; display: inline-flex !important; align-items: center; gap: 7px; color: var(--text-secondary) !important; background: var(--bg-sidebar-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12px !important; font-weight: 500 !important; }
.choice-item:hover { color: var(--accent) !important; border-color: rgba(91,108,255,.35); }
.choice-item input { margin: 0; accent-color: var(--accent); }
.image-setting { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.image-preview { position: relative; width: 180px; height: 105px; overflow: hidden; background: var(--bg-sidebar-2); border: 1px solid var(--border); border-radius: 10px; }
.image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.image-remove { position: absolute; top: 7px; right: 7px; width: 29px; height: 29px; padding: 0; color: #fff; background: rgba(20,24,34,.64); border: 0; border-radius: 7px; opacity: 0; transition: .18s ease; }
.image-preview:hover .image-remove { opacity: 1; }
.config-uploader { min-width: 110px; }
.settings-actions { margin: 0 -24px; padding: 16px 24px; display: flex; gap: 9px; background: var(--bg-sidebar-2); border-radius: 0 0 var(--radius) var(--radius); }
.settings-actions .btn { min-width: 104px; }

.form-page .page-header { margin-bottom: 16px; }
.form-page .page-header .page-title { font-size: 16px; }
.editor-card { max-width: 980px; margin: 0 auto; }
.editor-card .ibox-content { padding: 0; }
.editor-form { margin: 0; }
.editor-field {
    padding: 22px 28px;
    display: grid;
    grid-template-columns: 150px minmax(280px, 620px);
    gap: 24px;
    align-items: start;
    border-bottom: 1px solid var(--border);
}
.editor-field > label {
    margin: 0;
    padding-top: 10px;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-align: right;
}
.required-mark { margin-right: 4px; color: #e5484d; }
.editor-control { min-width: 0; }
.editor-control .form-control { width: 100%; margin: 0; }
.editor-control textarea.form-control { min-height: 104px; }
.editor-control input.error,
.editor-control select.error,
.editor-control textarea.error { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,.08); }
.editor-control span.error { margin-top: 7px; display: block; color: #e5484d; font-size: 11.5px; font-weight: 500; }
.editor-actions {
    padding: 18px 28px 18px 202px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-sidebar-2);
}
.editor-actions .btn { min-width: 88px; }
.editor-actions .btn-link { min-width: auto; color: var(--text-muted); text-decoration: none; }
.editor-actions .btn-link:hover { color: var(--accent); }

:root[data-theme="dark"] .config-key { color: #aab4ff; background: rgba(117,130,255,.11); border-color: rgba(117,130,255,.16); }
:root[data-theme="dark"] .danger-outline { color: #ff8d91; background: rgba(229,72,77,.08); border-color: rgba(255,141,145,.2); }
:root[data-theme="dark"] .image-remove { background: rgba(0,0,0,.68); }

/* ---------- 响应式与减弱动效 ---------- */
@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .workflow-track { overflow-x: auto; gap: 20px; justify-content: flex-start; }
    .workflow-step { min-width: 150px; }
    .login-shell { width: 920px; grid-template-columns: 1fr 1fr; }
    .login-showcase { padding: 38px; }
    .login-form-panel { padding: 38px; }
}

@media (max-width: 991px) {
    .admin-shell .navbar-static-side { z-index: 110; transform: translateX(-100%); }
    .admin-shell #page-wrapper { margin-left: 0; }
    .admin-shell.sidebar-open .navbar-static-side { transform: translateX(0); }
    .admin-shell.sidebar-open .sidebar-backdrop { display: block; }
    .admin-shell .shell-page-heading span,
    .admin-shell .topbar-status { display: none; }
    .dashboard-date-card { margin-right: 8px; }
}

@media (max-width: 820px) {
    body.login-page { padding: 18px; overflow-y: auto; }
    .login-shell { width: 500px; min-height: 0; grid-template-columns: 1fr; }
    .login-showcase { display: none; }
    .login-form-panel { min-height: 590px; padding: 44px; }
    .login-mobile-brand { margin-bottom: 28px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 750; }
}

@media (max-width: 720px) {
    .admin-shell .row.border-bottom.row-top { padding: 0 12px; }
    .admin-shell #page-wrapper > .J_mainContent { padding: 12px; }
    .admin-shell .content-tabs { padding: 0 10px; }
    .admin-shell .navbar-top-links > li > a span { display: none; }
    .admin-shell .navbar-top-links > li > a { width: 38px; padding: 0; justify-content: center; }
    .dashboard-hero { min-height: 220px; padding: 30px; }
    .dashboard-hero h1 { font-size: 23px; }
    .dashboard-date-card { display: none; }
    .dashboard-metrics { grid-template-columns: 1fr; }
    .quick-access-grid { grid-template-columns: 1fr; }
    .admin-inner-page .page-header { align-items: flex-start; gap: 14px; }
    .admin-inner-page .page-header,
    .filter-bar { flex-direction: column; }
    .admin-inner-page .page-actions { width: 100%; }
    .filter-fields { width: 100%; }
    .filter-control,
    .filter-control.has-icon .form-control,
    .filter-select { width: 100%; }
    .filter-fields .btn { flex: 1; }
    .toolbar-note,
    .result-count { align-self: flex-start; }
    .setting-field { grid-template-columns: 1fr; gap: 9px; }
    .setting-label { padding-top: 0; }
    .settings-form { padding: 18px 16px 0; }
    .settings-actions { margin: 0 -16px; padding: 14px 16px; }
    .editor-card { max-width: none; }
    .editor-field { padding: 18px; grid-template-columns: 1fr; gap: 8px; }
    .editor-field > label { padding-top: 0; text-align: left; }
    .editor-actions { padding: 15px 18px; flex-wrap: wrap; }
}

@media (max-width: 480px) {
    body.login-page { padding: 0; align-items: stretch; }
    .login-theme-toggle { top: 14px; right: 14px; }
    .login-theme-toggle span { display: none; }
    .login-shell { min-height: 100vh; border-radius: 0; border: 0; }
    .login-form-panel { min-height: 100vh; padding: 72px 28px 30px; }
    .login-captcha-row { gap: 8px; }
    .captcha-button { width: 104px; }
    .dashboard-hero { padding: 26px 22px; border-radius: 14px; }
    .dashboard-hero-actions { align-items: stretch; flex-direction: column; }
    .dashboard-primary-action,
    .dashboard-secondary-action { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}