/* ============================================================
   云加密系统 - 统一简洁视觉（2026-10 重新设计）
   兼容全部业务类名，功能零改动
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f3f5f9; color: #333; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: #4f6ef7; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
::selection { background: rgba(79,110,247,.15); }

/* ============================================================
   登录页
   ============================================================ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b5bdb 0%, #7048e8 55%, #9c36b5 100%); position: relative; overflow: hidden; }
.login-wrap::before, .login-wrap::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.login-wrap::before { width: 420px; height: 420px; top: -140px; right: -120px; }
.login-wrap::after { width: 320px; height: 320px; bottom: -120px; left: -100px; }
.login-box { background: #fff; padding: 40px 36px; border-radius: 16px; box-shadow: 0 24px 64px rgba(30,30,90,.28); width: 380px; position: relative; z-index: 1; }
.login-box h1 { text-align: center; margin-bottom: 8px; color: #1f2340; font-size: 24px; }
.login-box .login-sub { text-align: center; color: #98a0b3; font-size: 13px; margin-bottom: 28px; }
.login-box .form-group { margin-bottom: 18px; }
.login-box label { display: block; margin-bottom: 8px; color: #4a5270; font-weight: 500; font-size: 13px; }
.login-box input { width: 100%; padding: 11px 14px; border: 1px solid #dde1ec; border-radius: 10px; font-size: 14px; transition: all .25s; background: #fafbfe; }
.login-box input:focus { outline: none; border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,.14); background: #fff; }
.login-box .btn-login { width: 100%; padding: 12px; background: linear-gradient(135deg, #4f6ef7, #7048e8); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; margin-top: 10px; transition: all .25s; box-shadow: 0 6px 16px rgba(79,110,247,.32); }
.login-box .btn-login:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79,110,247,.4); }
.login-box .tip { text-align: center; margin-top: 16px; color: #a0a6ba; font-size: 12px; }
.login-box .role-tabs { display: flex; margin-bottom: 24px; background: #f0f2f8; border-radius: 10px; padding: 4px; }
.login-box .role-tab { flex: 1; padding: 9px; text-align: center; cursor: pointer; background: transparent; font-size: 13px; border-radius: 8px; transition: all .2s; color: #7a82a0; }
.login-box .role-tab.active { background: #fff; color: #4f6ef7; font-weight: 600; box-shadow: 0 2px 8px rgba(30,30,90,.1); }

/* ============================================================
   整体布局
   ============================================================ */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: #171a2b; color: #cdd2e4; position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; display: flex; flex-direction: column; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.sidebar .logo { padding: 22px 20px 18px; font-size: 17px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; color: #fff; letter-spacing: .3px; }
.sidebar .logo .icon { font-size: 22px; background: linear-gradient(135deg, #4f6ef7, #7048e8); width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(79,110,247,.4); }
.menu { padding: 10px 0 20px; flex: 1; }

/* 菜单分组 */
.menu-group { margin: 4px 0; }
.menu-group-title { padding: 14px 18px 10px; font-size: 14px; color: #8fa3ff; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; transition: all .2s; user-select: none; }
.menu-group-title:hover { color: #b7c4ff; }
.menu-group-title .group-arrow { font-size: 12px; transition: transform .2s; color: #8fa3ff; }
.menu-group-title.open .group-arrow { transform: rotate(90deg); }
.menu-group-items { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.menu-group-items.open { max-height: 5000px; }

/* 一级菜单项 */
.menu-item { position: relative; padding: 0 10px; }
.menu-title { padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #c9d0e6; border-radius: 9px; transition: all .18s; font-size: 15px; position: relative; }
.menu-title > span:first-child { width: 22px; text-align: center; font-size: 18px; }
.menu-title:hover { color: #fff; background: rgba(255,255,255,.08); }
.menu-title.active { color: #fff; background: linear-gradient(135deg, #4f6ef7, #5f7cf8); box-shadow: 0 4px 12px rgba(79,110,247,.35); font-weight: 600; }
.menu-title .arrow { margin-left: auto; transition: transform .2s; font-size: 12px; color: #7d86ad; }
.menu-title.open .arrow { transform: rotate(90deg); color: #c8d0ea; }
.menu-title.open { color: #fff; }

/* 二级子菜单 */
.submenu { margin: 2px 0 4px; padding-left: 32px; overflow: hidden; max-height: 0; transition: max-height .28s ease; }
.submenu.open { max-height: 600px; }
.submenu-item { padding: 10px 14px; cursor: pointer; color: #a6aecb; font-size: 14px; border-radius: 8px; transition: all .18s; position: relative; }
.submenu-item::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #5a6488; transition: all .18s; }
.submenu-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.submenu-item:hover::before { background: #7d8cff; }
.submenu-item.active { color: #fff; background: rgba(79,110,247,.28); }
.submenu-item.active::before { background: #7d8cff; box-shadow: 0 0 8px rgba(79,110,247,.8); }

/* ============================================================
   主区域
   ============================================================ */
.main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; min-height: 100vh; }
.topbar { height: 60px; background: #fff; box-shadow: 0 1px 0 rgba(30,30,90,.06); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 50; }
.topbar .page-title { font-size: 19px; font-weight: 700; color: #1f2340; letter-spacing: .2px; }
.topbar .user-info { display: flex; align-items: center; gap: 10px; }
.topbar .user-info .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #4f6ef7, #7048e8); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; box-shadow: 0 3px 8px rgba(79,110,247,.3); }
.topbar .user-name { font-weight: 600; color: #2a2f4a; font-size: 14px; }
.topbar .msg-icon { position: relative; cursor: pointer; margin-right: 4px; font-size: 19px; color: #5a6280; transition: color .2s; padding: 6px; border-radius: 8px; }
.topbar .msg-icon:hover { color: #4f6ef7; background: #f0f2fb; }
.topbar .msg-icon #msgBadge { position: absolute; top: -2px; right: -2px; background: #ff4d4f; color: #fff; font-size: 10px; border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center; display: none; font-weight: 600; }
.topbar .btn-logout { padding: 7px 14px; border: 1px solid #e2e6f0; color: #5a6280; background: #fff; border-radius: 8px; font-size: 13px; transition: all .2s; }
.topbar .btn-logout:hover { border-color: #ff4d4f; color: #ff4d4f; background: #fff5f5; }

.content { padding: 26px 28px; flex: 1; }

/* 卡片 */
.card { background: #fff; border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(30,30,90,.06); border: 1px solid #eef0f7; }
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f0f2f8; display: flex; align-items: center; justify-content: space-between; color: #1f2340; gap: 12px; flex-wrap: wrap; }
.card-title .btn { white-space: nowrap; }

/* ============================================================
   表格
   ============================================================ */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f0f2f8; vertical-align: middle; }
th { background: #f8f9fd; font-weight: 600; color: #5a6280; font-size: 13px; white-space: nowrap; }
th:first-child { border-radius: 8px 0 0 8px; }
th:last-child { border-radius: 0 8px 8px 0; }
tr:hover td { background: #f8f9ff; }
td { color: #3a4060; }

/* ============================================================
   按钮
   ============================================================ */
.btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #dde1ec; background: #fff; font-size: 13px; transition: all .2s; display: inline-flex; align-items: center; gap: 5px; color: #4a5270; }
.btn:hover { border-color: #4f6ef7; color: #4f6ef7; background: #f5f7ff; }
.btn-primary { background: #4f6ef7; color: #fff; border-color: #4f6ef7; box-shadow: 0 3px 10px rgba(79,110,247,.28); }
.btn-primary:hover { background: #4059e0; color: #fff; border-color: #4059e0; }
.btn-danger { color: #ff4d4f; border-color: #ffccc7; background: #fff5f5; }
.btn-danger:hover { background: #ff4d4f; color: #fff; border-color: #ff4d4f; }
.btn-success { color: #21a453; border-color: #b7ebc8; background: #f0fff4; }
.btn-success:hover { background: #21a453; color: #fff; border-color: #21a453; }
.btn-warning { color: #d9820c; border-color: #ffd591; background: #fffdf5; }
.btn-warning:hover { background: #faad14; color: #fff; border-color: #faad14; }
.btn-secondary { color: #5a6280; border-color: #dde1ec; background: #f8f9fd; }
.btn-secondary:hover { border-color: #9aa3c0; color: #3a4060; background: #eef0f8; }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }

/* ============================================================
   表单
   ============================================================ */
.form-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 200px; }
.form-group label { display: block; margin-bottom: 7px; color: #5a6280; font-size: 13px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea,
.form-control { width: 100%; padding: 9px 12px; border: 1px solid #dde1ec; border-radius: 8px; font-size: 14px; background: #fafbfe; transition: all .2s; color: #2a2f4a; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.form-control:focus { outline: none; border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,.12); background: #fff; }
.form-group input:disabled, .form-control:disabled { background: #f0f2f8; color: #98a0b3; }

/* 提示条 */
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.alert-info { background: #eef2ff; color: #3b52c8; border: 1px solid #d3dcff; }
.alert-success { background: #ecfdf3; color: #158a44; border: 1px solid #b9ecce; }

/* ============================================================
   标签
   ============================================================ */
.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.tag-green { background: #ecfdf3; color: #18a050; border: 1px solid #b9ecce; }
.tag-red { background: #fff1f0; color: #f53f3f; border: 1px solid #ffccc7; }
.tag-blue { background: #eef2ff; color: #4f6ef7; border: 1px solid #ccd6ff; }
.tag-orange { background: #fff8e6; color: #d9820c; border: 1px solid #ffe1a1; }
.tag-gray { background: #f4f5fa; color: #8a91ab; border: 1px solid #e2e6f0; }

/* ============================================================
   模态框
   ============================================================ */
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(23,26,43,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeIn .18s; }
.modal { background: #fff; border-radius: 14px; width: 520px; max-width: 92vw; max-height: 84vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(23,26,43,.3); animation: slideUp .22s; }
.modal-header { padding: 18px 22px; border-bottom: 1px solid #f0f2f8; font-size: 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; color: #1f2340; }
.modal-close { cursor: pointer; color: #98a0b3; font-size: 20px; transition: color .2s; line-height: 1; }
.modal-close:hover { color: #ff4d4f; }
.modal-body { padding: 22px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid #f0f2f8; text-align: right; display: flex; gap: 10px; justify-content: flex-end; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   提示
   ============================================================ */
.toast { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); padding: 12px 26px; border-radius: 10px; color: #fff; z-index: 2000; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(23,26,43,.3); animation: slideDown .28s; }
.toast-success { background: #21a453; }
.toast-error { background: #ff4d4f; }
.toast-info { background: #4f6ef7; }
@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   上传区域
   ============================================================ */
.upload-area { border: 2px dashed #ccd4ea; border-radius: 14px; padding: 44px 20px; text-align: center; cursor: pointer; transition: all .3s; background: #fafbfe; }
.upload-area:hover { border-color: #4f6ef7; background: #f2f5ff; }
.upload-area .icon { font-size: 44px; color: #4f6ef7; margin-bottom: 12px; }
.upload-area .text { color: #6a7190; font-size: 14px; }

/* ============================================================
   统计卡片
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 14px; padding: 20px 22px; box-shadow: 0 2px 12px rgba(30,30,90,.06); border: 1px solid #eef0f7; transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,30,90,.1); }
.stat-card .label { color: #8a91ab; font-size: 13px; margin-bottom: 10px; font-weight: 500; }
.stat-card .value { font-size: 28px; font-weight: 800; color: #1f2340; letter-spacing: .3px; }

/* ============================================================
   工具类（页面内联使用）
   ============================================================ */
.hidden { display: none !important; }
.text-muted { color: #8a91ab; }
.text-end { text-align: right; }
.ms-1 { margin-left: 4px; }
.ms-2 { margin-left: 8px; }
.me-2 { margin-right: 8px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mb-2 { margin-bottom: 8px; }

/* 文件上传输入 */
input[type="file"] { display: none; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d5daea; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b8bfd8; }
::-webkit-scrollbar-track { background: transparent; }

/* 移动端适配 */
@media (max-width: 900px) {
    .sidebar { width: 198px; }
    .main { margin-left: 198px; }
    .content { padding: 18px 16px; }
    .topbar { padding: 0 16px; }
    .topbar .user-name { display: none; }
    .stats { grid-template-columns: repeat(2, 1fr); }
}

/* SVG 线性图标（Lucide 风格） */
.menu-title > .mi, .menu-group-title .mi { display: inline-flex; align-items: center; justify-content: center; }
.menu-title > .mi svg { width: 20px; height: 20px; }
.menu-group-title .mi svg { width: 18px; height: 18px; }
.menu-title.active .mi, .menu-group-title.active .mi { color: #fff; }

/* ===== 版本管理页 ===== */
.ver-current-badge { display:inline-block; padding:2px 10px; border-radius:12px; background:#2563eb; color:#fff; font-size:12px; font-weight:600; }
.ver-grid { gap:16px; }
@media (max-width: 900px) {
  .ver-grid { grid-template-columns: 1fr !important; }
}

/* ===== UI 重构：弹窗分区标题 + 全局精致化 ===== */
.modal-section-title {
  font-size: 14px; font-weight: 700; color: #1f2340;
  margin: 22px 0 14px; padding: 8px 12px;
  background: linear-gradient(90deg, rgba(79,110,247,.09), rgba(79,110,247,0));
  border-left: 3px solid #4f6ef7; border-radius: 6px;
  letter-spacing: .3px;
}
.modal-section-title:first-child { margin-top: 0; }

/* 表格行 hover 强化 + 单元格垂直居中 */
table tbody tr { transition: background .15s; }
table tbody tr:hover td { background: #f4f7ff; }
table td, table th { padding: 11px 12px; vertical-align: middle; }
table th { background: #f7f8fc; color: #5a6280; font-weight: 600; font-size: 13px; white-space: nowrap; }
table td { color: #3a4060; font-size: 13.5px; }

/* 统计卡数字渐变强调（数据大屏/管理首页） */
.stat-card .value { background: linear-gradient(135deg, #1f2340, #4f6ef7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 卡片轻微悬浮反馈（仅主内容卡，不滚动侧边栏） */
.main .card { transition: box-shadow .2s, border-color .2s; }
.main .card:hover { box-shadow: 0 6px 22px rgba(30,30,90,.09); border-color: #e4e8f5; }

/* 表单控件统一聚焦态 */
.form-control:focus, input:focus, select:focus, textarea:focus {
  border-color: #4f6ef7 !important; box-shadow: 0 0 0 3px rgba(79,110,247,.14) !important; outline: none;
}

/* 侧边栏二级菜单当前项：高亮加深（点击二级时一级自动取消高亮） */
.submenu-item.active { background: rgba(79,110,247,.32); font-weight: 600; }

/* 表格内按钮组间距 */
td .btn { margin-right: 4px; }
td .btn:last-child { margin-right: 0; }

/* ===== 卡密管理页统一重构样式（kp-*） ===== */
.kp-page { display: flex; flex-direction: column; gap: 14px; }
.kp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kp-t1 { font-size: 19px; font-weight: 800; color: #1f2340; letter-spacing: .3px; }
.kp-t2 { font-size: 12.5px; color: #8a91ab; margin-top: 4px; line-height: 1.6; }
.kp-badge { font-size: 12px; padding: 5px 14px; border-radius: 99px; background: linear-gradient(135deg, #eff6ff, #eef2ff); color: #2563eb; border: 1px solid #cfe0ff; white-space: nowrap; }
.kp-badge b { font-size: 14px; }
.kp-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #eef0f7; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 10px rgba(30,30,90,.04); }
.kp-toolbar select, .kp-toolbar input { border: 1px solid #dde1ec; border-radius: 8px; padding: 7px 10px; font-size: 13px; background: #fff; color: #3a4060; outline: none; }
.kp-toolbar select:focus, .kp-toolbar input:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,.12); }
.kp-select-wrap { display: flex; align-items: center; gap: 8px; }
.kp-select-wrap label { font-size: 12.5px; color: #6b7280; font-weight: 600; }
.kp-card { background: #fff; border: 1px solid #eef0f7; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 12px rgba(30,30,90,.06); }
.kp-card-title { font-size: 15px; font-weight: 700; color: #1f2340; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.kp-card-title .dot { width: 7px; height: 7px; border-radius: 50%; background: #4f6ef7; box-shadow: 0 0 8px rgba(79,110,247,.5); }
.kp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.kp-stat { background: #fff; border: 1px solid #eef0f7; border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(30,30,90,.05); position: relative; overflow: hidden; }
.kp-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kc, #4f6ef7); }
.kp-sv { font-size: 24px; font-weight: 800; color: var(--kc, #1f2340); line-height: 1.1; }
.kp-sl { font-size: 12px; color: #8a91ab; margin-top: 5px; font-weight: 500; }
.kp-main2 { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .kp-main2 { grid-template-columns: 1fr; } }
.kp-note { background: #fffdf5; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #92400e; line-height: 1.8; }
.kp-empty { text-align: center; padding: 46px 20px; color: #98a0b3; background: #fff; border: 1px dashed #dde1ec; border-radius: 14px; font-size: 13.5px; }
.kp-empty .kp-ico { font-size: 34px; display: block; margin-bottom: 10px; }
.kp-progress { height: 7px; border-radius: 99px; background: #eef0f7; overflow: hidden; min-width: 70px; }
.kp-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #38bdf8, #4f6ef7); }
.kp-tag { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; }
.kp-tag-green { background: #ecfdf3; color: #16a34a; border: 1px solid #bbf7d0; }
.kp-tag-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.kp-tag-orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
.kp-tag-red { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.kp-tag-purple { background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.kp-tag-gray { background: #f8f9fc; color: #64748b; border: 1px solid #e2e8f0; }
.kp-code { font-family: Consolas, Menlo, monospace; font-size: 12px; background: #f4f6fb; border: 1px solid #e8ecf6; border-radius: 6px; padding: 2px 7px; color: #334155; word-break: break-all; }
.kp-search { min-width: 200px; }
.kp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===== 系统配置-作者端登录公告卡片 ===== */
.nt-card { background: linear-gradient(150deg, #f7f9ff 0%, #eef2ff 100%); border: 1px solid #dbe4ff; border-radius: 14px; padding: 18px 20px; margin: 6px 0 4px; }
.nt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; background: #4f6ef7; box-shadow: 0 0 10px rgba(79,110,247,.55); flex: none; }
.nt-title { font-size: 15px; font-weight: 700; color: #1f2340; }
.nt-status { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 99px; font-weight: 600; }
.nt-status-on { background: #ecfdf3; color: #16a34a; border: 1px solid #bbf7d0; }
.nt-status-off { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }
.nt-desc { font-size: 12.5px; color: #64748b; margin: 8px 0 14px; line-height: 1.7; }
.nt-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.nt-mode { position: relative; cursor: pointer; }
.nt-mode input { position: absolute; opacity: 0; pointer-events: none; }
.nt-mode span { display: block; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; transition: all .15s; height: 100%; box-sizing: border-box; }
.nt-mode b { display: block; font-size: 13px; color: #1f2340; margin-bottom: 3px; }
.nt-mode i { display: block; font-style: normal; font-size: 11.5px; color: #94a3b8; line-height: 1.5; }
.nt-mode input:checked + span { border-color: #4f6ef7; background: #f4f7ff; box-shadow: 0 0 0 3px rgba(79,110,247,.12); }
.nt-mode input:checked + span b { color: #4f6ef7; }
.nt-body { background: #fff; border: 1px solid #e8ecf6; border-radius: 10px; padding: 12px 14px; }
.nt-row { margin-bottom: 10px; }
.nt-row:last-child { margin-bottom: 0; }
.nt-row label { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 5px; }
.nt-row input[type=text], .nt-row textarea { width: 100%; box-sizing: border-box; border: 1px solid #dde1ec; border-radius: 8px; padding: 8px 11px; font-size: 13px; outline: none; background: #fff; color: #3a4060; }
.nt-row input[type=text]:focus, .nt-row textarea:focus { border-color: #4f6ef7; box-shadow: 0 0 0 3px rgba(79,110,247,.12); }
.nt-row textarea { resize: vertical; line-height: 1.7; }
.nt-tip { font-size: 12px; color: #8a91ab; margin-top: 4px; }
@media (max-width: 720px) { .nt-modes { grid-template-columns: 1fr; } }

/* ============================================================
   ★ 


/* ============================================================
   ★ 


/* ============================================================
   ★ 整站液态玻璃主题 V3（Liquid Glass，2026-10-23）
   玻璃反射渐变 + 高对比光斑 + 低不透明度磨砂
   只改视觉层，不动任何布局/尺寸/功能；删除本块即可回退
   ============================================================ */

/* ---- 背景：高饱和蓝紫粉渐变 ---- */
body {
  background: linear-gradient(118deg, #b9d2ff 0%, #c7d0ff 16%, #d9c4ff 34%, #efc9f7 50%, #c2e6ff 66%, #b8d8ff 84%, #d2c8ff 100%) fixed !important;
  background-attachment: fixed;
}

/* ---- 光斑：亮白 + 深蓝紫 高对比 ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 700px at 8% 12%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(520px 520px at 88% 6%, rgba(255,255,255,.55), transparent 58%),
    radial-gradient(660px 660px at 84% 88%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(560px 560px at 12% 88%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(900px 900px at 22% 42%, rgba(96,120,255,.32), transparent 62%),
    radial-gradient(760px 760px at 72% 55%, rgba(168,96,255,.26), transparent 62%),
    radial-gradient(500px 500px at 45% 92%, rgba(60,170,255,.24), transparent 60%);
}
.layout, .main, .content, .login-wrap, .login-box { position: relative; z-index: 1; }

/* ---- 侧边栏：深色玻璃 ---- */
.sidebar {
  background: linear-gradient(180deg, rgba(26,30,52,.78), rgba(18,22,42,.84)) !important;
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border-right: 1px solid rgba(255,255,255,.16);
  box-shadow: 4px 0 30px rgba(30,40,110,.2);
}
.sidebar .logo { border-bottom-color: rgba(255,255,255,.14); }

/* ---- 顶栏 ---- */
.topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28)) !important;
  backdrop-filter: blur(26px) saturate(1.8);
  -webkit-backdrop-filter: blur(26px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.95), 0 8px 32px rgba(60,80,170,.14);
}

/* ---- 卡片：玻璃反射渐变 + 磨砂 ---- */
.card, .stat-card, .kp-card, .kp-stat, .kp-toolbar, .kp-empty, .modal,
.nt-body, .nt-card, .nt-mode span {
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.26) 42%, rgba(255,255,255,.42) 100%) !important;
  backdrop-filter: blur(30px) saturate(1.8);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow:
    0 14px 44px rgba(60,80,170,.16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.5),
    inset 0 -24px 50px rgba(255,255,255,.35);
}
.main .card:hover, .stat-card:hover {
  box-shadow:
    0 20px 56px rgba(60,80,170,.22),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -24px 54px rgba(255,255,255,.4) !important;
  border-color: rgba(255,255,255,1);
  transform: translateY(-2px);
}
.card-title { border-bottom-color: rgba(220,228,250,.9); }

/* ---- 表格 ---- */
th { background: rgba(255,255,255,.35) !important; }
th, td { border-bottom-color: rgba(220,228,250,.85); }
tr:hover td, table tbody tr:hover td { background: rgba(255,255,255,.42) !important; }

/* ---- 按钮 ---- */
.btn {
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 3px 14px rgba(60,80,170,.1), inset 0 1px 0 rgba(255,255,255,.96);
}
.btn:hover {
  border-color: #4f6ef7 !important; color: #4f6ef7 !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 6px 20px rgba(79,110,247,.22), inset 0 1px 0 rgba(255,255,255,.96);
}
.btn-primary {
  background: linear-gradient(135deg, #4f6ef7, #7048e8) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #fff !important;
  box-shadow: 0 8px 26px rgba(79,110,247,.48), inset 0 1px 0 rgba(255,255,255,.42), inset 0 -6px 18px rgba(30,40,120,.2);
}
.btn-primary:hover { background: linear-gradient(135deg, #4059e0, #6338d8) !important; color: #fff !important; box-shadow: 0 10px 32px rgba(79,110,247,.58); }
.btn-danger { background: rgba(255,242,241,.55) !important; border-color: rgba(255,204,199,.9) !important; }
.btn-danger:hover { background: #ff4d4f !important; color: #fff !important; border-color: #ff4d4f !important; }
.btn-success { background: rgba(237,255,244,.55) !important; border-color: rgba(183,235,200,.9) !important; }
.btn-success:hover { background: #21a453 !important; color: #fff !important; border-color: #21a453 !important; }
.btn-warning { background: rgba(255,252,243,.58) !important; border-color: rgba(255,213,145,.9) !important; }
.btn-warning:hover { background: #faad14 !important; color: #fff !important; border-color: #faad14 !important; }
.btn-secondary { background: rgba(246,248,253,.5) !important; border-color: rgba(255,255,255,.94) !important; }
.btn-secondary:hover { background: rgba(236,239,248,.82) !important; color: #3a4060 !important; border-color: rgba(255,255,255,.96) !important; }

/* ---- 表单控件 ---- */
.form-group input, .form-group select, .form-group textarea,
.form-control, .kp-toolbar select, .kp-toolbar input,
.nt-row input[type=text], .nt-row textarea {
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.38)) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 12px rgba(60,80,170,.07);
}
.form-control:focus, .form-group input:focus, .form-group select:focus,
.form-group textarea:focus, .kp-toolbar select:focus, .kp-toolbar input:focus {
  background: rgba(255,255,255,.82) !important;
  border-color: #4f6ef7 !important;
  box-shadow: 0 0 0 3px rgba(79,110,247,.2), inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.form-group input:disabled, .form-control:disabled { background: rgba(238,240,247,.45) !important; color: #98a0b3; }

/* ---- 提示条 ---- */
.alert-info { background: rgba(235,241,255,.5) !important; border-color: rgba(211,220,255,.9) !important; backdrop-filter: blur(14px); }
.alert-success { background: rgba(233,253,241,.52) !important; border-color: rgba(185,236,206,.9) !important; backdrop-filter: blur(14px); }

/* ---- 标签徽章 ---- */
.tag-green, .tag-red, .tag-blue, .tag-orange, .tag-gray,
.kp-tag-green, .kp-tag-blue, .kp-tag-orange, .kp-tag-red, .kp-tag-purple, .kp-tag-gray {
  background: rgba(255,255,255,.42) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.92) !important;
  box-shadow: 0 2px 12px rgba(60,80,170,.09), inset 0 1px 0 rgba(255,255,255,.94);
}
.kp-badge { background: linear-gradient(135deg, rgba(237,244,255,.6), rgba(236,240,255,.5)) !important; backdrop-filter: blur(12px); }

/* ---- 弹窗 ---- */
.modal-mask { background: rgba(18,22,42,.48) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal { box-shadow: 0 36px 100px rgba(18,22,42,.34), inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(255,255,255,.5); }
.modal-header { border-bottom-color: rgba(220,228,250,.9); }
.modal-footer { border-top-color: rgba(220,228,250,.9); }
.modal-section-title { color: #1f2340; }

/* ---- Toast ---- */
.toast { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 44px rgba(18,22,42,.3), inset 0 1px 0 rgba(255,255,255,.38); }
.toast-success { background: rgba(33,164,83,.88); }
.toast-error { background: rgba(255,77,79,.9); }
.toast-info { background: rgba(79,110,247,.88); }

/* ---- 上传区 ---- */
.upload-area {
  background: rgba(255,255,255,.28) !important;
  border: 2px dashed rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.94), inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 20px rgba(60,80,170,.08);
}
.upload-area:hover { border-color: #4f6ef7 !important; background: rgba(240,244,255,.55) !important; }

/* ---- 登录页 ---- */
.login-wrap { background: linear-gradient(118deg, #b9d2ff 0%, #d2c8ff 42%, #efc9f7 70%, #bfe0ff 100%) !important; }
.login-box {
  background: linear-gradient(135deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.3) 45%, rgba(255,255,255,.45) 100%) !important;
  backdrop-filter: blur(34px) saturate(2);
  -webkit-backdrop-filter: blur(34px) saturate(2);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow:
    0 34px 90px rgba(30,30,90,.28),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -28px 70px rgba(255,255,255,.4);
}
.login-box input { background: rgba(250,251,254,.5) !important; border-color: rgba(255,255,255,.96); }
.login-box input:focus { background: rgba(255,255,255,.85) !important; }
.login-box .role-tabs { background: rgba(236,238,248,.45) !important; backdrop-filter: blur(12px); }
.login-box .role-tab.active { background: rgba(255,255,255,.85) !important; box-shadow: 0 2px 12px rgba(30,30,90,.16); }

/* ---- 消息图标 / 头像 ---- */
.topbar .msg-icon:hover { background: rgba(255,255,255,.7) !important; }
.topbar .btn-logout { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4)) !important; backdrop-filter: blur(14px); border-color: rgba(255,255,255,.94) !important; box-shadow: 0 2px 12px rgba(60,80,170,.09); }

/* ---- 滚动条 ---- */
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.7); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.9); }

/* ---- 细节高光 ---- */
.kp-note { backdrop-filter: blur(14px); }
.kp-code { background: rgba(241,244,251,.5) !important; border-color: rgba(228,233,246,.9) !important; }
.kp-progress { background: rgba(234,237,246,.7); }
.ver-current-badge { box-shadow: 0 3px 14px rgba(37,99,235,.42); }
.nt-status-on, .nt-status-off { background: rgba(255,255,255,.42) !important; backdrop-filter: blur(12px); }

/* ===== 整站液态玻璃主题 V4：页级容器玻璃化（覆盖各页面内联样式，2026-10-24） ===== */
/* ---- 软件管理页 ---- */
#content .sw-page .sw-stat,
#content .sw-page .sw-toolbar,
#content .sw-page .sw-table-card {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(31,45,85,.14);
}
#content .sw-page .sw-table-card thead th {
  background: rgba(255,255,255,.35) !important;
  color: #3b5b8f;
}
#content .sw-page .sw-toolbar select {
  background: rgba(255,255,255,.5) !important;
  border-color: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#content .sw-page .sw-key { background: rgba(59,130,246,.12) !important; border: 1px solid rgba(59,130,246,.28); }
/* ---- 软件加壳页 ---- */
#content .prot-page {
  background: rgba(255,255,255,.3) !important;
  border-color: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
#content .prot-page .prot-card,
#content .prot-page .prot-status {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(31,45,85,.12);
}
#content .prot-page .prot-card select,
#content .prot-page .prot-upload input,
#content .prot-page .prot-upload select { background: rgba(255,255,255,.5) !important; border-color: rgba(255,255,255,.72) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* ---- 软件云加密页 ---- */
#content .enc-page {
  background: rgba(255,255,255,.3) !important;
  border-color: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
#content .enc-page .enc-box,
#content .enc-page .enc-opt,
#content .enc-page .enc-status,
#content .enc-page .enc-prev,
#content .enc-page .enc-side .sb {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(31,45,85,.12);
}
/* 实心按钮保护：选中态Tab与"下一步"为实心蓝渐变白字，不得被上面的玻璃规则洗白(白字白底看不见) */
#content .enc-page .enc-tab-btn.btn-primary {
  background: linear-gradient(135deg,#38bdf8,#3b82f6) !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(59,130,246,.25) !important;
}
#content .enc-page .enc-tab-btn {
  background: rgba(255,255,255,.72) !important;
  color: #64748b !important;
}
#content .enc-page .enc-tab-btn:hover { border-color:#3b82f6 !important; color:#2563eb !important; }
#content .enc-page .enc-next {
  background: linear-gradient(135deg,#2563eb,#3b82f6) !important;
  border-color: #3b82f6 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(59,130,246,.25) !important;
}
#content .enc-page .enc-next:hover { filter:brightness(1.08); color:#fff !important; }
#content .enc-page .enc-prev { color:#334155 !important; }
#content .enc-page .enc-field select,
#content .enc-page .enc-field input[type=text] { background: rgba(255,255,255,.5) !important; border-color: rgba(255,255,255,.72) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* ---- 加密任务页 ---- */
#content .et-page .et-toolbar {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(31,45,85,.14);
}
#content .et-page .et-toolbar input[type=text],
#content .et-page .et-toolbar select { background: rgba(255,255,255,.5) !important; border-color: rgba(255,255,255,.72) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* ---- 使用统计 ---- */
#content .us-kpi { background: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.65) !important; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 8px 28px rgba(31,45,85,.12); }
/* ---- 加壳特征库页 ---- */
#content .pf-page .pf-toolbar {
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(31,45,85,.14);
}
#content .pf-page .pf-toolbar input,
#content .pf-page .pf-toolbar select { background: rgba(255,255,255,.5) !important; border-color: rgba(255,255,255,.72) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ===== 整站液态玻璃主题 V5：移动端侧边栏折叠（2026-10-24） ===== */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.72);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  cursor: pointer;
  font-size: 17px;
  color: #3b4a76;
  margin-right: 10px;
  box-shadow: 0 3px 12px rgba(31,45,85,.14);
  transition: .2s;
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.85); color: #2563eb; }
.sidebar-footer { margin-top: 0; padding: 10px 0 2px; }
.sidebar-hide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px;
  padding: 9px 0;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #cdd2e4;
  cursor: pointer;
  font-size: 13px;
  transition: .2s;
  width: calc(100% - 24px);
}
.sidebar-hide-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
body.sidebar-hidden .sidebar { transform: translateX(-100%); }
body.sidebar-hidden .main { margin-left: 0; }
body.sidebar-hidden .sidebar-toggle { display: inline-flex; }
body.sidebar-hidden .topbar .page-title { display: block; }

/* ===== 整站液态玻璃主题 V6：消息表格手机卡片化（2026-10-24） ===== */
@media (max-width: 720px) {
  #content .msg-table, #content .msg-table thead, #content .msg-table tbody,
  #content .msg-table tr, #content .msg-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  #content .msg-table thead { display: none; }
  #content .msg-table tr {
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 12px;
    box-shadow: 0 6px 20px rgba(31,45,85,.10);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
  }
  #content .msg-table td {
    border: none !important;
    padding: 6px 2px !important;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  #content .msg-table td::before {
    content: attr(data-label);
    font-size: 12px;
    color: #8a90a8;
    flex-shrink: 0;
  }
  #content .msg-table td[data-label="操作"] { justify-content: flex-end; }
}