@charset "UTF-8";
/*!
 * 用户中心前台主题美化层 — theme.css
 * ------------------------------------------------------------------
 * 加载位置：必须排在 bootstrap.min.css / app.css 之后
 * 设计原则：只覆盖「皮肤」（配色 / 圆角 / 阴影 / 字体 / 间距 / 悬停态），
 *           不修改布局骨架（定位、宽高、浮动、栅格），避免影响页面结构与 JS。
 * 改配色：只改下面 :root 里的变量即可全局生效，无需逐条改规则。
 * Q弹动效：集中在第 17 节，仅用 transform / box-shadow / animation，
 *           不改布局盒尺寸，已在 prefers-reduced-motion 与打印环境下自动关闭。
 * 回滚：删除各页面中本文件的 <link> 即可 100% 还原为原始外观。
 * ------------------------------------------------------------------
 */

/* ============================================================
   1. 设计变量（果冻紫罗兰）
   ============================================================ */
:root {
  --t-primary: #7c5cff;
  --t-primary-lt: #9b86ff;
  --t-primary-dk: #5b3fd6;
  --t-primary-soft: rgba(124, 92, 255, .12);

  --t-accent: #ff5c8a;              /* 果冻粉：点缀强调 */
  --t-accent-soft: rgba(255, 92, 138, .12);

  --t-success: #22c55e;
  --t-warning: #f59e0b;
  --t-danger: #f43f5e;
  --t-info: #06b6d4;

  --t-text: #2c2745;
  --t-text-2: #574f78;
  --t-muted: #8c85a8;

  --t-border: #ece8fb;
  --t-border-2: #ddd6f6;
  --t-bg: #f6f5ff;
  --t-bg-2: #eef0ff;

  --t-side-a: #2a2352;
  --t-side-b: #171130;

  --t-radius-sm: 10px;
  --t-radius: 12px;
  --t-radius-lg: 16px;

  --t-shadow-sm: 0 1px 2px rgba(58, 41, 122, .06);
  --t-shadow: 0 2px 4px rgba(58, 41, 122, .05), 0 14px 30px -18px rgba(58, 41, 122, .30);
  --t-shadow-lg: 0 26px 64px -30px rgba(58, 41, 122, .48), 0 2px 8px rgba(58, 41, 122, .06);
  --t-ring: 0 0 0 3px var(--t-primary-soft);

  /* Q弹缓动曲线 */
  --t-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --t-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ============================================================
   2. 基础层：字体、背景、滚动条、选区
   ============================================================ */
html {
  background-color: var(--t-bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--t-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面底色渐变（含无 .app 外壳的独立页） */
.app:before {
  background-color: transparent;
  background-image: linear-gradient(180deg, #faf9ff 0%, var(--t-bg-2) 100%);
}

a {
  color: var(--t-primary);
  transition: color .18s ease;
}

a:hover,
a:focus {
  color: var(--t-primary-dk);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--t-text);
}

.font-thin {
  font-weight: 300;
}

hr,
.line {
  border-color: var(--t-border);
}

::selection {
  background: var(--t-primary);
  color: #fff;
}

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

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

::-webkit-scrollbar-thumb {
  background-color: #d3cbf0;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: content-box;
}

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

/* ============================================================
   3. 顶栏 Header
   ============================================================ */
#header.app-header {
  border-bottom: 1px solid rgba(58, 41, 122, .08);
  box-shadow: 0 6px 20px -14px rgba(58, 41, 122, .55);
}

/* 左上品牌区：与侧栏同色，形成连续的 L 形深色区 */
#header .navbar-header {
  background-color: var(--t-side-a);
  background-image: linear-gradient(135deg, var(--t-side-b) 0%, var(--t-side-a) 100%);
}

#header .navbar-brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #eae4ff;
}

#header .navbar-brand:hover,
#header .navbar-brand:focus {
  color: #fff;
}

#header .navbar-brand i {
  color: #b7a6ff;
  margin-right: 4px;
}

#header .navbar-header > button {
  color: #c0b7dd;
}

/* 右上白色功能条 */
#header .navbar-collapse {
  background-color: #fff;
  box-shadow: none;
}

#header .nav.navbar-nav > li > a {
  color: var(--t-text-2);
  transition: color .18s ease;
}

#header .nav.navbar-nav > li > a:hover,
#header .nav.navbar-nav > li.open > a {
  color: var(--t-primary);
  background-color: transparent;
}

#header .thumb-sm img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--t-primary-soft);
}

/* ============================================================
   4. 侧边栏 Aside
   ============================================================ */
#aside.app-aside,
#aside.app-aside:before {
  background-color: var(--t-side-a);
  background-image: linear-gradient(180deg, var(--t-side-a) 0%, var(--t-side-b) 100%);
}

#aside .navi ul.nav > li > a {
  padding-top: 11px;
  padding-bottom: 11px;
  color: #aaa1c9;
  transition: color .2s ease, background-color .2s ease, transform .28s var(--t-ease-spring);
}

#aside .navi ul.nav > li > a:hover,
#aside .navi ul.nav > li > a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, .07);
}

#aside .navi ul.nav > li.active > a,
#aside .navi ul.nav > li.open > a {
  color: #fff;
  background-image: linear-gradient(90deg, rgba(124, 92, 255, .42) 0%, rgba(124, 92, 255, .05) 100%);
}

/* 选中项左侧高亮竖条 */
#aside .navi ul.nav > li.active > a:before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #b7a6ff, var(--t-primary));
  content: "";
}

#aside .navi ul.nav > li > a > i {
  color: #8b81ac;
  transition: color .2s ease, transform .28s var(--t-ease-spring);
}

#aside .navi ul.nav > li.active > a > i,
#aside .navi ul.nav > li > a:hover > i {
  color: #c6b9ff;
}

/* 二级菜单 */
#aside .navi .nav-sub {
  background-color: rgba(10, 6, 30, .25);
}

#aside .navi ul.nav li li a {
  color: #9c93bc;
}

#aside .navi ul.nav li li a:hover {
  color: #fff;
}

#aside .navi ul.nav li li.active > a {
  color: #fff;
  font-weight: 600;
}

#aside .navi ul.nav > li.line {
  background-color: rgba(255, 255, 255, .08);
}

#aside .navi li.padder > span {
  color: #6f6790;
  letter-spacing: 1px;
}

#aside .navi .text-muted {
  color: #6f6790;
}

#aside .navi-wrap::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .18);
  background-clip: content-box;
}

/* 侧栏底部 "里程碑" 进度条 */
#aside .progress {
  background-color: rgba(255, 255, 255, .12);
  border-radius: 999px;
}

#aside .progress .progress-bar {
  border-radius: 999px;
}

/* ============================================================
   5. 内容区与页头
   ============================================================ */
#content .app-content-body > .wrapper-md.b-b {
  background-color: #fff;
  background-image: none;
  border-bottom: 1px solid var(--t-border);
}

#content .app-content-body > .wrapper-md.b-b h1 {
  font-size: 20px;
  font-weight: 600;
  color: var(--t-text);
}

#content .app-content-body > .wrapper-md.b-b small {
  color: var(--t-muted);
}

/* ============================================================
   6. 卡片 / 面板
   ============================================================ */
.panel {
  background-color: #fff;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}

.panel-heading {
  padding: 14px 18px;
  background-color: #fff;
  border-bottom: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
  font-weight: 600;
  color: var(--t-text);
}

.panel > .panel-heading.font-bold {
  font-weight: 600;
}

/* 头像卡片顶部的彩色条 */
.panel > .panel-heading.bg-info {
  background-image: linear-gradient(135deg, #9b86ff 0%, #6a48e0 100%);
  color: #fff;
}

.panel-body {
  padding: 18px;
}

.panel-footer {
  background-color: #fbfaff;
  border-top: 1px solid var(--t-border);
  border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg);
  color: var(--t-muted);
  padding: 14px 18px;
}

.panel-group .panel {
  margin-bottom: 16px;
}

/* 首页四宫格图标：柔和方形彩底 */
#content .round {
  border: 0;
  border-radius: 18px;
  line-height: 58px;
  background-color: var(--t-primary-soft);
  color: var(--t-primary);
}

#content .row > .col-xs-6:nth-child(2) .round {
  background-color: rgba(34, 197, 94, .13);
  color: var(--t-success);
}

#content .row > .col-xs-6:nth-child(3) .round {
  background-color: rgba(245, 158, 11, .15);
  color: var(--t-warning);
}

#content .row > .col-xs-6:nth-child(4) .round {
  background-color: rgba(6, 182, 212, .14);
  color: var(--t-info);
}

#content .hbox .col.b-r {
  border-color: var(--t-border);
}

/* ============================================================
   7. 表格
   ============================================================ */
.table {
  margin-bottom: 0;
}

.table > thead > tr > th {
  padding: 12px 14px;
  background-color: #faf9ff;
  border-top: 0;
  border-bottom: 1px solid var(--t-border);
  color: var(--t-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 12px 14px;
  border-top: 1px solid #f3f0fb;
  color: var(--t-text-2);
  vertical-align: middle;
}

.table > tbody > tr:hover > td {
  background-color: #f7f3ff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fdfcff;
}

.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child {
  padding-left: 18px;
}

.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child {
  padding-right: 18px;
}

.table-responsive {
  border-radius: var(--t-radius-lg);
}

.table-bordered {
  border-color: var(--t-border);
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--t-border);
}

/* ============================================================
   8. 按钮
   ============================================================ */
.btn {
  border-radius: var(--t-radius);
  font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .15s ease;
}

.btn:active,
.btn.active {
  box-shadow: none;
  transform: translateY(1px);
}

.btn-lg {
  border-radius: var(--t-radius);
  padding: 11px 20px;
  font-size: 15px;
}

.btn-sm {
  border-radius: var(--t-radius-sm);
  padding: 5px 12px;
}

.btn-xs {
  border-radius: 8px;
  padding: 3px 10px;
}

.btn-primary {
  background-image: linear-gradient(180deg, var(--t-primary-lt) 0%, var(--t-primary) 100%);
  border-color: var(--t-primary);
  box-shadow: 0 1px 2px rgba(124, 92, 255, .35);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: linear-gradient(180deg, var(--t-primary) 0%, var(--t-primary-dk) 100%);
  border-color: var(--t-primary-dk);
  box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .75);
  color: #fff;
}

.btn-info {
  background-image: linear-gradient(180deg, #22c9e0 0%, #0894ad 100%);
  border-color: #0894ad;
  color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-image: linear-gradient(180deg, #16bcd6 0%, #077d94 100%);
  border-color: #077d94;
  color: #fff;
}

.btn-success {
  background-image: linear-gradient(180deg, #34d27a 0%, #12aa57 100%);
  border-color: #12aa57;
  color: #fff;
}

.btn-success:hover,
.btn-success:focus {
  background-image: linear-gradient(180deg, #26c069 0%, #0e8f49 100%);
  border-color: #0e8f49;
  color: #fff;
}

.btn-warning {
  background-image: linear-gradient(180deg, #fbbf24 0%, #ea8a08 100%);
  border-color: #ea8a08;
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
  background-image: linear-gradient(180deg, #f5ae15 0%, #d17706 100%);
  border-color: #d17706;
  color: #fff;
}

.btn-danger {
  background-image: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  border-color: #e11d48;
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
  background-image: linear-gradient(180deg, #f75f75 0%, #c81742 100%);
  border-color: #c81742;
  color: #fff;
}

.btn-default {
  background-color: #fff;
  border-color: var(--t-border-2);
  color: var(--t-text-2);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  background-color: #f7f4ff;
  border-color: #cdbffb;
  color: var(--t-primary-dk);
}

.btn-white {
  background-color: #fff;
  border: 1px solid var(--t-border);
  color: var(--t-text-2);
}

.btn-white:hover,
.btn-white:focus {
  background-color: #f7f4ff;
  border-color: #cdbffb;
  color: var(--t-primary-dk);
}

.btn-rounded {
  border-radius: 999px;
}

.btn-icon {
  padding-left: 12px;
  padding-right: 12px;
}

.btn.no-shadow,
.btn.no-shadow:hover {
  box-shadow: none;
}

/* 按钮组 / 输入框组：内边角交给 bootstrap 处理，此处只统一外圆角 */
.btn-group .btn,
.input-group-btn .btn {
  border-radius: 0;
}

/* 徽章式小标签按钮（如首页 alert 里的 "重要/提示"） */
.btn-sm.btn-danger,
.btn-sm.btn-warning {
  border-radius: 8px;
  font-weight: 600;
}

/* ============================================================
   9. 表单
   ============================================================ */
.form-control {
  height: 40px;
  padding: 8px 12px;
  background-color: #fff;
  border: 1px solid var(--t-border-2);
  border-radius: var(--t-radius);
  box-shadow: none;
  color: var(--t-text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-control:focus {
  border-color: var(--t-primary-lt);
  box-shadow: var(--t-ring);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #f7f5fc;
  border-color: var(--t-border);
  color: var(--t-muted);
  box-shadow: none;
}

.form-control.no-border {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}

select.form-control,
select.form-control.input-sm {
  height: 40px;
}

.input-sm {
  height: 34px;
}

textarea.form-control {
  height: auto;
  min-height: 90px;
}

.form-control-static {
  padding-top: 9px;
  padding-bottom: 9px;
}

.help-block {
  color: var(--t-muted);
}

.control-label {
  color: var(--t-text-2);
  font-weight: 500;
}

.input-group-addon {
  background-color: #f8f6ff;
  border: 1px solid var(--t-border-2);
  color: var(--t-muted);
  border-radius: var(--t-radius);
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
  border-radius: var(--t-radius) 0 0 var(--t-radius);
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
  border-radius: 0 var(--t-radius) var(--t-radius) 0;
}

.input-group-addon a {
  color: var(--t-primary);
}

/* 校验提示 */
.has-error .form-control {
  border-color: #fb7185;
  box-shadow: none;
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .14);
}

/* ============================================================
   10. 列表组
   ============================================================ */
.list-group-item {
  padding: 13px 18px;
  background-color: #fff;
  border-color: var(--t-border);
  color: var(--t-text-2);
}

a.list-group-item:hover,
a.list-group-item:focus {
  background-color: #f7f3ff;
  color: var(--t-primary-dk);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: #fff;
}

.list-group-item.active .text-muted {
  color: rgba(255, 255, 255, .75);
}

/* ============================================================
   11. 标签页 / 胶囊导航
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--t-border);
}

.nav-tabs > li > a {
  padding: 10px 16px;
  margin-right: 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--t-text-2);
  font-weight: 500;
  transition: color .18s ease, border-color .18s ease;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--t-border-2);
  color: var(--t-primary);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  margin-bottom: -1px;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--t-primary);
  color: var(--t-primary);
  font-weight: 600;
}

.nav-pills > li > a {
  border-radius: var(--t-radius);
  color: var(--t-text-2);
  font-weight: 500;
}

.nav-pills > li > a:hover {
  background-color: #f5f1ff;
  color: var(--t-primary);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--t-primary);
  color: #fff;
}

.tab-content > .tab-pane {
  padding-top: 16px;
}

/* ============================================================
   12. 提示条 / 弹窗 / 下拉菜单
   ============================================================ */
.alert {
  padding: 13px 18px;
  border: 0;
  border-radius: var(--t-radius);
  box-shadow: none;
}

.alert-danger {
  background-color: #fef4f3;
  color: #b42318;
}

.alert-warning {
  background-color: #fffaeb;
  color: #b54708;
}

.alert-info {
  background-color: #eff8ff;
  color: #175cd3;
}

.alert-success {
  background-color: #ecfdf3;
  color: #027a48;
}

.alert .close {
  opacity: .45;
}

.alert .close:hover {
  opacity: .8;
}

.modal-content {
  border: 0;
  border-radius: 20px;
  box-shadow: var(--t-shadow-lg);
}

.modal-header {
  padding: 18px 22px;
  border-bottom: 1px solid var(--t-border);
}

.modal-title {
  font-weight: 600;
  color: var(--t-text);
}

.modal-body {
  padding: 20px 22px;
}

.modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--t-border);
}

.dropdown-menu {
  padding: 6px;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-shadow);
}

.dropdown-menu > li > a {
  padding: 8px 12px;
  border-radius: var(--t-radius-sm);
  color: var(--t-text-2);
  transition: background-color .16s ease, color .16s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--t-primary-soft);
  color: var(--t-primary-dk);
}

.dropdown-menu > li.divider {
  margin: 6px 4px;
  background-color: var(--t-border);
}

/* 徽标 / 标签 */
.badge,
.label {
  padding: 3px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  text-shadow: none;
}

.label.label-sm {
  border-radius: 7px;
}

/* 进度条 */
.progress {
  height: 8px;
  background-color: #f0edfa;
  border-radius: 999px;
  box-shadow: none;
}

.progress-xxs {
  height: 4px;
}

.progress-bar {
  border-radius: 999px;
  box-shadow: none;
}

/* 分页 */
.pagination > li > a,
.pagination > li > span {
  margin: 0 3px;
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-sm);
  color: var(--t-text-2);
  transition: all .18s ease;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--t-primary-soft);
  border-color: #cdbffb;
  color: var(--t-primary-dk);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
  color: #fff;
}

/* 工具提示 / 气泡 */
.tooltip-inner {
  border-radius: var(--t-radius-sm);
  padding: 6px 10px;
}

/* ============================================================
   13. 页脚
   ============================================================ */
#footer .wrapper {
  padding: 14px 20px;
  background-color: #fff;
  border-top: 1px solid var(--t-border);
  color: var(--t-muted);
  font-size: 13px;
}

#footer .wrapper a {
  color: var(--t-text-2);
}

#footer .wrapper a:hover {
  color: var(--t-primary);
}

/* ============================================================
   14. 登录 / 注册 / 找回密码等独立页（.app 直属 container）
   ============================================================ */
.app-header-fixed > .container.w-xxl {
  width: 100%;
  max-width: 430px;
  margin: 6vh auto 40px;
  padding: 32px 34px 26px;
  background-color: #fff;
  border: 1px solid var(--t-border);
  border-radius: 24px;
  box-shadow: var(--t-shadow-lg);
}

/* 卡片顶部品牌标题 */
.app-header-fixed > .container > .navbar-brand {
  display: block;
  padding: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: .5px;
  color: var(--t-text);
}

.app-header-fixed > .container > .navbar-brand::before {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background-image: linear-gradient(135deg, var(--t-primary-lt) 0%, var(--t-primary-dk) 100%);
  box-shadow: 0 10px 22px -10px rgba(124, 92, 255, .80);
  color: #fff;
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
  line-height: 52px;
  text-align: center;
  content: "\f09d"; /* fa-credit-card */
}

.app-header-fixed > .container .wrapper.text-center > strong {
  color: var(--t-muted);
  font-weight: 400;
}

/* 登录方式切换 */
.app-header-fixed > .container .nav-tabs > li > a {
  font-size: 13px;
}

/* 输入行：整体作为一个圆角输入框 */
.swaplogin .list-group-item {
  margin-bottom: 10px;
  padding: 0 14px;
  background-color: #faf9ff;
  border: 1px solid var(--t-border-2);
  border-radius: var(--t-radius);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.swaplogin .list-group-item:focus-within {
  background-color: #fff;
  border-color: var(--t-primary-lt);
  box-shadow: var(--t-ring);
}

.swaplogin .list-group-item .form-control {
  height: 46px;
  padding: 0;
  font-size: 14px;
  background-color: transparent;
}

/* 分割虚线与找回/注册按钮 */
.app-header-fixed > .container .line-dashed {
  margin: 18px 0;
  border-top: 1px dashed var(--t-border-2);
}

.app-header-fixed > .container .form-group .btn {
  font-size: 13px;
}

/* 第三方登录按钮 */
.app-header-fixed > .container .btn-icon.btn-lg {
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 4px 5px;
  border: 1px solid var(--t-border);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--t-shadow-sm);
  line-height: 46px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .28s var(--t-ease-spring);
}

.app-header-fixed > .container .btn-icon.btn-lg:hover {
  border-color: #cdbffb;
  box-shadow: 0 8px 18px -8px rgba(124, 92, 255, .60);
  transform: translateY(-2px);
}

/* 底部版权 */
.app-header-fixed > .container > .text-center small a {
  color: var(--t-text-2);
}

/* 验证码容器圆角化 */
#captcha {
  border-radius: var(--t-radius);
  overflow: hidden;
}

/* ============================================================
   15. 测试支付等纯 bootstrap 页面（无 app.css 外壳）
   ============================================================ */
.page-header {
  margin: 28px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--t-border);
}

.page-header h4 {
  font-weight: 600;
  color: var(--t-text);
}

.page-header small {
  color: var(--t-muted);
}

.panel-primary {
  border-color: var(--t-border);
}

.panel-primary > .panel-heading {
  background-color: var(--t-primary);
  border-color: var(--t-primary);
}

/* ============================================================
   16. 响应式微调
   ============================================================ */
@media (max-width: 767px) {
  #content .app-content-body > .wrapper-md.b-b {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  #content .app-content-body > .wrapper-md.b-b h1 {
    font-size: 18px;
  }

  .app-header-fixed > .container.w-xxl {
    width: auto;
    max-width: none;
    margin: 3vh 12px 24px;
    padding: 26px 22px 22px;
    border-radius: 18px;
  }

  .app-header-fixed > .container > .navbar-brand {
    font-size: 18px;
  }

  .app-header-fixed > .container > .navbar-brand::before {
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    border-radius: 15px;
    font-size: 21px;
    line-height: 46px;
  }

  .panel-heading,
  .panel-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .table > thead > tr > th:first-child,
  .table > tbody > tr > td:first-child {
    padding-left: 14px;
  }
}

/* ============================================================
   17. Q弹交互层（jelly / spring）
   ------------------------------------------------------------
   只用 transform / box-shadow / animation，不改变布局盒尺寸；
   入场动画不使用 animation-fill-mode:both，避免给 .panel 留下
   常驻 transform 而影响内部 fixed 定位的弹窗/下拉。
   ============================================================ */
@keyframes t-jelly-in {
  0%   { opacity: 0; transform: translateY(10px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes t-jelly-pop {
  0%   { opacity: 0; transform: scale(.90); }
  55%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes t-jelly-nudge {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.08); }
}

/* —— 卡片：入场弹一下，悬停轻抬 —— */
.panel {
  transition: transform .38s var(--t-ease-spring),
              box-shadow .38s var(--t-ease-soft),
              border-color .25s ease;
  animation: t-jelly-in .5s var(--t-ease-spring);
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--t-shadow);
  border-color: var(--t-border-2);
}

/* 卡片内出现浮层时取消抬升，避免影响模态/下拉定位 */
.panel:hover:has(.modal),
.panel:hover:has(.dropdown.open) {
  transform: none;
}

/* 首页四宫格图标：悬停果冻弹跳 */
#content .row > .col-xs-6 .round {
  transition: transform .32s var(--t-ease-spring), box-shadow .32s var(--t-ease-soft);
}

#content .row > .col-xs-6:hover .round {
  animation: t-jelly-nudge .5s var(--t-ease-spring);
  box-shadow: 0 12px 22px -12px var(--t-primary-soft);
}

/* —— 按钮：抬升 / 回弹 —— */
.btn {
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .28s var(--t-ease-soft), transform .28s var(--t-ease-spring);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active,
.btn.active {
  transform: translateY(0) scale(.96);
  transition-duration: .09s;
}

.btn-primary:hover,
.btn-info:hover,
.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover {
  box-shadow: 0 10px 20px -10px rgba(124, 92, 255, .55);
}

/* 按钮内图标轻微放大 */
.btn > .fa,
.btn > .glyphicon {
  transition: transform .28s var(--t-ease-spring);
}

.btn:hover > .fa,
.btn:hover > .glyphicon {
  transform: scale(1.12);
}

/* —— 表单：聚焦轻微上浮 —— */
.form-control:focus {
  transform: translateY(-1px);
}

/* —— 列表 / 分页：悬停弹起 —— */
.list-group-item,
.pagination > li > a,
.pagination > li > span {
  transition: transform .26s var(--t-ease-spring),
              background-color .18s ease, border-color .18s ease, color .18s ease;
}

a.list-group-item:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
  transform: translateY(-2px);
}

.badge,
.label {
  transition: transform .26s var(--t-ease-spring);
}

/* —— 顶栏头像：悬停弹一下 —— */
#header .thumb-sm {
  transition: transform .32s var(--t-ease-spring);
}

#header .thumb-sm:hover {
  transform: scale(1.08) rotate(-3deg);
}

/* —— 侧栏菜单项：悬停轻微右移 + 图标弹 —— */
#aside .navi ul.nav > li > a:hover {
  transform: translateX(3px);
}

#aside .navi ul.nav > li > a:hover > i {
  transform: scale(1.14);
}

/* —— 弹窗 / 提示条 / 下拉：弹性入场 —— */
.modal.fade .modal-dialog {
  transform: scale(.90);
  transition: transform .34s var(--t-ease-spring);
}

.modal.in .modal-dialog {
  transform: scale(1);
}

.alert {
  animation: t-jelly-pop .42s var(--t-ease-spring);
}

.dropdown.open > .dropdown-menu {
  animation: t-jelly-pop .32s var(--t-ease-spring);
}

/* —— 内容区页头：入场下滑 —— */
#content .app-content-body > .wrapper-md.b-b {
  animation: t-jelly-in .45s var(--t-ease-out);
}

/* ============================================================
   18. 动效与打印兜底
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .panel:hover,
  .btn:hover,
  a.list-group-item:hover,
  .pagination > li > a:hover,
  .pagination > li > span:hover,
  #aside .navi ul.nav > li > a:hover,
  #header .thumb-sm:hover,
  #content .row > .col-xs-6:hover .round {
    transform: none;
    animation: none;
  }
}

@media print {
  #header,
  #aside,
  #footer,
  .hidden-print {
    display: none !important;
  }

  #content .app-content {
    margin-left: 0 !important;
  }

  .panel {
    box-shadow: none;
    animation: none;
  }
}