/* 北上还原 / tmdcode.cn visual system
 * Loaded by admin.css so standalone iframe pages and the shell share one theme.
 */
:root {
  --tmd-paper: #faf9f7;
  --tmd-canvas: #f3f2f0;
  --tmd-ink: #1c1917;
  --tmd-muted: #78716c;
  --tmd-soft: #f5f5f4;
  --tmd-line: #e7e5e4;
  --tmd-indigo: #3b46c4;
  --tmd-green: #10b981;
  --tmd-radius: 16px;
  --tmd-shadow: 0 1px 2px rgba(28,25,23,.04);
}

/* Base document */
html, body {
  min-height: 100%;
  background: var(--tmd-canvas) !important;
  color: var(--tmd-ink) !important;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body.layui-layout-body { overflow: auto !important; }
a { color: inherit; }

/* Shell: retain EasyWeb behavior, change its geometry to the member layout. */
.layui-layout-admin {
  position: relative !important;
  min-height: 100vh !important;
  overflow: visible !important;
  background: var(--tmd-canvas) !important;
}
.layui-layout-admin .layui-header {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 240px !important;
  height: 112px !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1100 !important;
  pointer-events: none;
}
.layui-layout-admin .layui-header .layui-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 240px !important;
  height: 112px !important;
  padding: 26px 20px !important;
  color: var(--tmd-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.15 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  pointer-events: auto;
}
.layui-layout-admin .layui-header .layui-logo img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  content: url("/assets/tmd-brand-mark.png");
}
.layui-layout-admin .layui-header .layui-logo cite {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  color: var(--tmd-ink) !important;
  font-style: normal !important;
  white-space: nowrap;
  line-height: 1.1 !important;
}
.layui-layout-admin .layui-header .layui-logo cite span { display: block !important; color: var(--tmd-ink) !important; font-size: 15px !important; font-weight: 600 !important; }
.layui-layout-admin .layui-header .layui-logo cite small { display: block !important; color: #78716c !important; font-family: "Plus Jakarta Sans", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; }
.layui-layout-admin .layui-header .layui-layout-left { display: none !important; }
/* Keep profile/logout reachable: the legacy right menu becomes the lower sidebar card. */
.layui-layout-admin .layui-header .layui-layout-right {
  display: flex !important; flex-direction: column !important;
  position: fixed !important; left: 16px !important; right: auto !important; top: auto !important; bottom: 16px !important;
  width: 208px !important; height: auto !important; padding: 0 !important;
  background: transparent !important; pointer-events: auto !important; z-index: 1110 !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item { display: none !important; width: 100% !important; height: auto !important; line-height: 1 !important; }
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) { display: block !important; }
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
  display: flex !important; align-items: center !important; gap: 9px !important;
  width: 100% !important; height: 52px !important; box-sizing: border-box !important;
  padding: 8px 10px !important; border-radius: 12px !important;
  background: #f5f5f4 !important; color: var(--tmd-ink) !important;
  font-size: 12px !important; line-height: 1.2 !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a:hover { background: #eeece9 !important; }
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) .layui-nav-img {
  width: 32px !important; height: 32px !important; margin: 0 !important; border-radius: 50% !important;
  background: var(--tmd-ink) !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) cite {
  flex: 1 !important; color: var(--tmd-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) .layui-nav-child {
  position: absolute !important; left: 0 !important; bottom: 58px !important; top: auto !important;
  width: 208px !important; min-width: 0 !important; border: 1px solid var(--tmd-line) !important; border-radius: 12px !important;
  background: #fff !important; box-shadow: 0 8px 24px rgba(28,25,23,.12) !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) .layui-nav-child a { color: #57534e !important; text-align: left !important; }

.layui-layout-admin .layui-side {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 240px !important;
  background: var(--tmd-paper) !important;
  border-right: 1px solid rgba(231,229,228,.9) !important;
  box-shadow: none !important;
  z-index: 1000 !important;
  overflow: hidden !important;
}
.layui-layout-admin .layui-side .layui-side-scroll {
  width: 240px !important;
  height: 100% !important;
  padding: 112px 16px 90px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--tmd-paper) !important;
}
.layui-layout-admin .layui-side .layui-nav {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.layui-layout-admin .layui-side .layui-nav .nav-group-title { display: none !important; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  margin: 4px 0 !important;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a:hover {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 40px !important;
  box-sizing: border-box !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  color: var(--tmd-muted) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 40px !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a:hover {
  color: var(--tmd-ink) !important;
  background: #f1efec !important;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-this > a,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-this > a:hover,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-nav-itemed > a,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-nav-itemed > a:hover {
  color: #fff !important;
  background: var(--tmd-ink) !important;
  box-shadow: 0 4px 10px rgba(28,25,23,.12) !important;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a::before { display: none !important; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a .layui-icon {
  flex: 0 0 18px !important;
  width: 18px !important;
  margin: 0 10px 0 0 !important;
  color: #a8a29e !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: center !important;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a:hover .layui-icon,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-this > a .layui-icon,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item.layui-nav-itemed > a .layui-icon { color: #fff !important; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a cite {
  flex: 1 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit !important;
  font-style: normal !important;
}
.layui-layout-admin .layui-side .layui-nav .encrypt-tag {
  flex: 0 0 auto !important;
  margin-left: 6px !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}
.layui-layout-admin .layui-side .layui-nav .layui-nav-more { display: none !important; }

/* Optional sidebar footer cards used by the member home view. */
.tmd-side-footer {
  position: absolute !important; left: 16px !important; right: 16px !important; bottom: 16px !important;
  z-index: 3 !important;
}
.tmd-signin-card {
  padding: 14px !important; margin-bottom: 10px !important;
  border: 1px solid #fde68a !important; border-radius: 12px !important;
  background: #fffbeb !important; color: #57534e !important;
}
.tmd-signin-card .tmd-progress { height: 6px !important; border-radius: 999px !important; background: #e7e5e4 !important; overflow: hidden !important; }
.tmd-signin-card .tmd-progress > i { display: block !important; height: 100% !important; border-radius: inherit !important; background: #10b981 !important; }
.tmd-user-card {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 10px 12px !important; border-radius: 12px !important;
  background: #f5f5f4 !important; color: var(--tmd-ink) !important;
}
.tmd-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: var(--tmd-ink) !important; color: #fff !important; display: grid !important; place-items: center !important; font-weight: 600 !important; }

/* The reference member surface has no tab strip; keep the iframe content flush to the canvas. */
.layui-layout-admin .layui-body > .layui-tab > .layui-tab-title { display: none !important; }
.layui-layout-admin .layui-body > .layui-tab > .layui-tab-content { top: 0 !important; }
.layui-layout-admin .layui-body .admin-tabs-control { display: none !important; }

/* Content and footer */
.layui-layout-admin .layui-body {
  position: relative !important;
  left: 240px !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: calc(100% - 240px) !important;
  min-height: 100vh !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: auto !important;
  background: var(--tmd-canvas) !important;
}
.layui-layout-admin .layui-body > .admin-iframe,
.layui-layout-admin .layui-body iframe.admin-iframe {
  min-height: 100vh !important;
  background: var(--tmd-canvas) !important;
}
.layui-layout-admin .layui-footer {
  display: none !important;
}

/* Inner page canvas */
body:not(.layui-layout-body) { background: var(--tmd-canvas) !important; }
.layui-fluid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  box-sizing: border-box !important;
}
.layui-row.layui-col-space15 { margin-left: -8px !important; margin-right: -8px !important; }
.layui-row.layui-col-space15 > [class*="layui-col-"] { padding-left: 8px !important; padding-right: 8px !important; }

/* Typography */
h1, h2, h3, h4, h5, h6,
.layui-card-header,
.section-title, .notice-title {
  font-family: "Fraunces", Georgia, "Songti SC", serif !important;
  color: var(--tmd-ink) !important;
}
.layui-text, p, li, label, .layui-form-label { color: var(--tmd-muted); }

/* Cards, alerts, panels */
.layui-card,
.info-panel,
.search-box,
.user-bd-list,
.notice-content,
.notice-header {
  background: #fff !important;
  border: 1px solid rgba(231,229,228,.8) !important;
  border-radius: var(--tmd-radius) !important;
  box-shadow: var(--tmd-shadow) !important;
}
.layui-card { overflow: hidden !important; }
.layui-card-header {
  min-height: 54px !important;
  height: auto !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #f5f5f4 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  background: #fff !important;
}
.layui-card-body { padding: 20px !important; background: #fff !important; }
.info-panel, .search-box { padding: 16px !important; margin-bottom: 14px !important; }
.info-panel h4 { margin: 0 0 9px !important; font-size: 15px !important; }
.info-panel li { line-height: 1.75 !important; }

/* Home/stat cards */
.stat-card,
.stat-card.success,
.stat-card.warning {
  min-height: 102px !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid rgba(231,229,228,.8) !important;
  border-radius: var(--tmd-radius) !important;
  color: var(--tmd-ink) !important;
  box-shadow: var(--tmd-shadow) !important;
}
.stat-card .stat-icon { color: #a8a29e !important; opacity: 1 !important; }
.stat-card .stat-title { color: var(--tmd-muted) !important; opacity: 1 !important; }
.stat-card .stat-value { color: var(--tmd-ink) !important; font-family: "Fraunces", Georgia, serif !important; }

/* Controls */
.layui-btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid var(--tmd-ink) !important;
  border-radius: 12px !important;
  background: var(--tmd-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 38px !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.layui-btn:hover { color: #fff !important; background: #292524 !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(28,25,23,.12) !important; }
.layui-btn-primary,
.layui-btn-normal,
.layui-btn-warm,
.layui-btn-danger { background: #fff !important; border-color: #d6d3d1 !important; color: #57534e !important; }
.layui-btn-primary:hover,
.layui-btn-normal:hover,
.layui-btn-warm:hover,
.layui-btn-danger:hover { background: #fafaf9 !important; color: var(--tmd-ink) !important; border-color: #a8a29e !important; }
.layui-btn-sm { min-height: 34px !important; height: 34px !important; line-height: 32px !important; padding: 0 12px !important; border-radius: 10px !important; }
.layui-btn-xs { min-height: 28px !important; height: 28px !important; line-height: 26px !important; border-radius: 8px !important; padding: 0 9px !important; }
.layui-input,
.layui-select,
.layui-textarea,
.layui-form-select .layui-input,
input, select, textarea {
  border: 1px solid #d6d3d1 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--tmd-ink) !important;
  min-height: 42px;
  box-sizing: border-box;
}
.layui-input, .layui-form-select .layui-input { height: 42px !important; line-height: 40px !important; }
.layui-textarea, textarea { min-height: 96px; padding: 10px 12px !important; }
.layui-input:focus, .layui-textarea:focus, input:focus, select:focus, textarea:focus { border-color: #a8a29e !important; box-shadow: 0 0 0 3px rgba(214,211,209,.35) !important; }
.layui-form-label { width: 100px !important; padding: 11px 12px 11px 0 !important; color: #57534e !important; }
.layui-input-block { margin-left: 120px !important; min-height: 42px !important; }
.layui-form-item { margin-bottom: 16px !important; }
.layui-form-checkbox[lay-skin=primary] span { color: var(--tmd-muted) !important; }

/* Dropzones / upload controls */
.upload-area,
.layui-upload-drag {
  min-height: 220px !important;
  padding: 48px 24px !important;
  border: 2px dashed #d6d3d1 !important;
  border-radius: var(--tmd-radius) !important;
  background: #fff !important;
  color: var(--tmd-muted) !important;
  transition: border-color .18s ease, background .18s ease;
}
.upload-area:hover, .layui-upload-drag:hover { border-color: #a8a29e !important; background: #fafaf9 !important; }
.upload-area.has-file { border-color: #10b981 !important; background: #ecfdf5 !important; }
.file-info { border: 1px solid #e7e5e4 !important; border-radius: 12px !important; background: #faf9f7 !important; }

/* Tables (including dynamically rendered layui table) */
.layui-table-view {
  border: 1px solid rgba(231,229,228,.9) !important;
  border-radius: var(--tmd-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: var(--tmd-shadow) !important;
}
.layui-table-header, .layui-table-tool, .layui-table-total { background: #faf9f7 !important; }
.layui-table { margin: 0 !important; background: #fff !important; color: #57534e !important; }
.layui-table th {
  background: #faf9f7 !important;
  color: #44403c !important;
  border-color: #e7e5e4 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.layui-table td { border-color: #f0efed !important; color: #57534e !important; font-size: 13px !important; }
.layui-table td, .layui-table th { padding: 12px 14px !important; }
.layui-table tbody tr:hover, .layui-table-click { background: #fafaf9 !important; }
.layui-table-page { background: #fff !important; border-top: 1px solid #f0efed !important; }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--tmd-ink) !important; border-radius: 8px !important; }
.layui-laypage a:hover { color: var(--tmd-ink) !important; }

/* Badges and status colors */
.layui-badge, .layui-badge-rim, .free-badge, .legacy-badge {
  border-radius: 999px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.free-badge { background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.legacy-badge { background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important; }

/* Notice pages */
.notice-header { padding: 20px !important; margin-bottom: 14px !important; }
.notice-title { font-size: 26px !important; font-weight: 600 !important; }
.notice-meta { color: #a8a29e !important; font-size: 12px !important; }
.notice-content { padding: 24px !important; line-height: 1.9 !important; }

/* Authentication pages: same restrained paper/card language */
/* The legacy templates add a dark body pseudo-overlay and a narrow absolute wrapper;
   neutralize both so the paper canvas and centered 416px panel remain visible. */
body:before { display: none !important; content: none !important; }
.login-wrapper {
  position: relative !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100% !important; max-width: none !important;
  margin: 0 !important;
}
.login-wrapper {
  min-height: 100vh !important;
  box-sizing: border-box !important;
  padding: 9vh 16px 70px !important;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(59,70,196,.08), transparent 65%), var(--tmd-canvas) !important;
}
.login-wrapper:before { display: none !important; }
.login-wrapper .layui-form {
  width: min(420px, 100%) !important;
  margin: 0 auto !important;
  padding: 32px !important;
  border: 1px solid rgba(231,229,228,.9) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 8px 40px rgba(28,25,23,.06) !important;
}
.login-wrapper h2 { margin-bottom: 24px !important; font-family: "Fraunces", Georgia, serif !important; font-size: 28px !important; color: var(--tmd-ink) !important; }
.login-wrapper .layui-input { height: 46px !important; line-height: 44px !important; }
.login-wrapper .layui-form .layui-btn-fluid { background: var(--tmd-ink) !important; border-color: var(--tmd-ink) !important; border-radius: 12px !important; }
.login-copyright { color: #a8a29e !important; }

/* Keep the reference-width drawer when EasyWeb restores its compact-nav flag. */
@media (min-width: 769px) {
  .layui-layout-admin.admin-nav-mini { left: 0 !important; right: 0 !important; }
  .layui-layout-admin.admin-nav-mini .layui-header,
  .layui-layout-admin.admin-nav-mini .layui-header .layui-logo,
  .layui-layout-admin.admin-nav-mini .layui-side,
  .layui-layout-admin.admin-nav-mini .layui-side .layui-side-scroll,
  .layui-layout-admin.admin-nav-mini .layui-side .layui-nav { width: 240px !important; }
  .layui-layout-admin.admin-nav-mini .layui-header .layui-logo cite,
  .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .layui-nav-item > a cite,
  .layui-layout-admin.admin-nav-mini .layui-side .encrypt-tag { display: initial !important; }
  .layui-layout-admin.admin-nav-mini .layui-body { left: 240px !important; width: calc(100% - 240px) !important; }
}

/* Responsive shell */
@media (max-width: 768px) {
  /* EasyWeb defaults the whole layout off-canvas on phones; the reference keeps
     the content visible and only slides the drawer itself. */
  .layui-layout-admin { left: 0 !important; right: 0 !important; position: relative !important; }
  /* Compact header keeps the EasyWeb drawer trigger usable on phones. */
  .layui-layout-admin .layui-header {
    left: 0 !important; top: 0 !important; width: 100% !important; height: 56px !important;
    background: rgba(250,249,247,.88) !important; backdrop-filter: blur(10px) !important;
    pointer-events: auto !important;
  }
  .layui-layout-admin .layui-header .layui-logo { display: none !important; }
  .layui-layout-admin .layui-header .layui-layout-right { display: none !important; }
  .layui-layout-admin .layui-header .layui-layout-left {
    display: flex !important; position: absolute !important; left: 8px !important; top: 0 !important;
    height: 56px !important; padding: 0 !important;
  }
  .layui-layout-admin .layui-header .layui-layout-left .layui-nav-item { display: none !important; }
  .layui-layout-admin .layui-header .layui-layout-left .layui-nav-item:first-child { display: block !important; }
  .layui-layout-admin .layui-header .layui-layout-left .layui-nav-item > a {
    display: block !important; width: 40px !important; height: 40px !important;
    margin-top: 8px !important; padding: 0 !important; border-radius: 10px !important;
    color: #57534e !important; text-align: center !important; line-height: 40px !important;
  }
  .layui-layout-admin .layui-body { padding-top: 56px !important; }
  .layui-layout-admin .layui-side { transform: translateX(-100%); transition: transform .2s ease; }
  .layui-layout-admin.admin-nav-mini .layui-side { transform: translateX(0); }
  .layui-layout-admin.admin-nav-mini .site-mobile-shade {
    display: block !important; position: fixed !important; z-index: 999 !important;
    top: 56px !important; right: 0 !important; bottom: 0 !important; left: 240px !important;
    background: rgba(28,25,23,.3) !important;
  }
  .layui-layout-admin .layui-body { left: 0 !important; width: 100% !important; }
  .layui-fluid { padding: 20px 16px !important; }
  .layui-card-body { padding: 16px !important; }
  .layui-input-block { margin-left: 0 !important; }
  .layui-form-label { width: 100% !important; text-align: left !important; }
  .layui-form-item .layui-inline { margin-right: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* v2 auth composition: the existing field names, captcha and submit hook stay
   intact; only their presentation is replaced with the paper/card language. */
.tmd-auth-page,
html:has(body.tmd-auth-page) {
  min-height: 100% !important;
  background:
    radial-gradient(ellipse at top, rgba(168,162,158,.2), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(214,211,209,.4), transparent 45%),
    #f3f2f0 !important;
}
.tmd-auth-page {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  color: #1c1917 !important;
  background-image:
    radial-gradient(ellipse at top, rgba(168,162,158,.2), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(214,211,209,.4), transparent 45%) !important;
}
.tmd-auth-page:before { display: none !important; content: none !important; }
.tmd-auth-shell {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(416px, calc(100% - 32px)) !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 76px 0 36px !important;
  box-sizing: border-box !important;
}
.tmd-auth-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto 20px !important;
  color: #1c1917 !important;
  text-decoration: none !important;
}
.tmd-auth-brand img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  margin: 0 auto 9px !important;
}
.tmd-auth-brand span {
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
}
.tmd-auth-brand small {
  margin-top: 2px !important;
  color: #78716c !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
.tmd-auth-shell .login-wrapper {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  z-index: auto !important;
}
.tmd-auth-shell .login-wrapper > .layui-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(231,229,228,.8) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 40px rgba(28,25,23,.06) !important;
  backdrop-filter: blur(8px) !important;
}
.tmd-auth-heading { margin: 0 0 22px !important; }
.tmd-auth-heading h2,
.tmd-auth-shell .login-wrapper > .layui-form > h2 {
  margin: 0 !important;
  color: #1c1917 !important;
  font-family: "Fraunces", Georgia, serif !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.tmd-auth-heading p {
  margin: 4px 0 0 !important;
  color: #78716c !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.tmd-auth-shell .layui-form-item {
  position: relative !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
}
.tmd-auth-shell .tmd-field-label {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #57534e !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.tmd-auth-shell .layui-input-icon-group > .layui-icon { display: none !important; }
.tmd-auth-shell .layui-input,
.tmd-auth-shell .layui-form-item > .layui-input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #1c1917 !important;
  font-size: 14px !important;
  line-height: 40px !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.02) !important;
}
.tmd-auth-shell .layui-input::placeholder { color: #a8a29e !important; }
.tmd-auth-shell .layui-input:focus { border-color: #a8a29e !important; box-shadow: 0 0 0 3px rgba(214,211,209,.35) !important; }
.tmd-auth-shell .login-captcha-group { display: grid !important; grid-template-columns: minmax(0,1fr) 120px !important; column-gap: 10px !important; align-items: end !important; padding: 0 !important; }
.tmd-auth-shell .login-captcha-group .tmd-field-label { grid-column: 1 / -1 !important; }
.tmd-auth-shell .login-captcha-group > .layui-input { width: auto !important; grid-column: 1 !important; }
.tmd-auth-shell .login-captcha-group > .login-captcha {
  position: static !important;
  grid-column: 2 !important;
  width: 120px !important;
  height: 42px !important;
  min-height: 42px !important;
  object-fit: cover !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 12px !important;
  background: #fafaf9 !important;
  cursor: pointer !important;
}
.tmd-auth-links {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: -2px 0 18px !important;
  font-size: 13px !important;
}
.tmd-auth-links a,
.tmd-auth-shell .layui-link { color: #57534e !important; text-decoration: none !important; }
.tmd-auth-links a:hover { color: #1c1917 !important; text-decoration: underline !important; }
.tmd-auth-shell .tmd-submit-row { margin: 0 0 16px !important; }
.tmd-auth-shell .layui-btn.layui-btn-fluid {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid #1c1917 !important;
  border-radius: 12px !important;
  background: #1c1917 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.tmd-auth-shell .layui-btn.layui-btn-fluid:hover { background: #292524 !important; }
.tmd-auth-shell .login-oauth-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #a8a29e !important;
  font-size: 12px !important;
}
.tmd-auth-shell .login-oauth-group a { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.tmd-auth-shell .login-oauth-group a .layui-icon { font-size: 20px !important; }
.tmd-auth-page > .login-copyright {
  position: static !important;
  margin: -20px auto 0 !important;
  padding: 0 16px 24px !important;
  color: #a8a29e !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
@media (max-width: 480px) {
  .tmd-auth-shell { width: min(100% - 24px, 416px) !important; padding-top: 40px !important; }
  .tmd-auth-brand { margin-bottom: 16px !important; }
  .tmd-auth-shell .login-wrapper > .layui-form { padding: 20px !important; }
  .tmd-auth-shell .login-captcha-group { grid-template-columns: minmax(0,1fr) 104px !important; }
  .tmd-auth-shell .login-captcha-group > .login-captcha { width: 104px !important; }
}

/* Beat the legacy inline login selectors while retaining their behavior. */
.tmd-auth-shell .login-wrapper>.layui-form>.layui-form-item>.layui-input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #e7e5e4 !important;
  background: #fff !important;
  color: #1c1917 !important;
  font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 40px !important;
}
.tmd-auth-shell .login-wrapper>.layui-form>.layui-form-item.login-captcha-group>.login-captcha {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #e7e5e4 !important;
  object-fit: cover !important;
}
.tmd-auth-shell .login-wrapper>.layui-form>.layui-form-item>.layui-btn,
.tmd-auth-shell .login-wrapper>.layui-form>.layui-form-item>.layui-btn.layui-btn-fluid {
  font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.tmd-auth-shell .login-wrapper>.layui-form input::placeholder { color: #a8a29e !important; opacity: 1 !important; }
.tmd-auth-page { display: flex !important; flex-direction: column !important; min-height: 100vh !important; }
.tmd-auth-shell { min-height: 0 !important; flex: 1 0 auto !important; }
/* Keep the full legacy captcha flow within a single desktop viewport. */
@media (min-width: 769px) {
  .tmd-auth-shell { padding-top: 58px !important; padding-bottom: 18px !important; }
  .tmd-auth-brand { margin-bottom: 14px !important; }
  .tmd-auth-shell .login-wrapper>.layui-form { padding: 22px 24px !important; }
  .tmd-auth-heading { margin-bottom: 18px !important; }
  .tmd-auth-shell .layui-form-item { margin-bottom: 12px !important; }
  .tmd-auth-links { margin-bottom: 14px !important; }
  .tmd-auth-shell .tmd-submit-row { margin-bottom: 12px !important; }
}


/* Legacy dashboard components mapped to the reference paper tokens. */
.ew-console-wrapper .console-user-group {
  padding: 12px 44px 12px 48px !important;
  border-bottom: 1px solid #f0efed !important;
}
.ew-console-wrapper .console-user-group:last-child { border-bottom: 0 !important; }
.ew-console-wrapper .console-user-group .console-user-group-head { left: 10px !important; width: 28px !important; height: 28px !important; margin-top: -14px !important; }
.ew-console-wrapper .console-user-group .console-user-group-name a { color: #44403c !important; font-size: 13px !important; }
.ew-console-wrapper .dashboard-overview .overview-card {
  min-height: 108px !important; padding: 16px !important;
  border: 1px solid #e7e5e4 !important; border-radius: 12px !important;
  background: #fafaf9 !important; box-shadow: none !important;
}
.ew-console-wrapper .overview-card .card-label { color: #78716c !important; font-size: 12px !important; }
.ew-console-wrapper .overview-card .card-value { color: #1c1917 !important; font-family: "Fraunces", Georgia, serif !important; font-size: 26px !important; margin: 10px 0 3px !important; }
.ew-console-wrapper .overview-card .card-desc { color: #a8a29e !important; font-size: 11px !important; }
.ew-console-wrapper .profile-info-list .info-item,
.ew-console-wrapper .profile-qq-bind {
  border: 1px solid #e7e5e4 !important; border-radius: 12px !important;
  background: #fff !important; box-shadow: var(--tmd-shadow) !important;
}
.ew-console-wrapper .profile-info-list .info-item { padding: 16px 18px !important; }
.ew-console-wrapper .profile-qq-bind { padding: 14px 18px !important; }
.ew-console-wrapper .profile-qq-bind .qq-bind-icon { border-radius: 10px !important; background: #eff6ff !important; }

/* Compact pricing tabs: keep each role card self-contained instead of letting
   Layui's unbounded tab list bleed into its neighbors. */
.level-card .level-benefits { overflow: hidden !important; min-width: 0 !important; }
.level-card .level-benefits .layui-tab { width: 100% !important; min-width: 0 !important; margin: 0 !important; overflow: hidden !important; }
.level-card .level-benefits .layui-tab-title {
  display: flex !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border-bottom: 1px solid #e7e5e4 !important;
  box-sizing: border-box !important;
}
.level-card .level-benefits .layui-tab-title li {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  line-height: 42px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #78716c !important;
  font-size: 12px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}
.level-card .level-benefits .layui-tab-title li.layui-this { color: #3b82f6 !important; }
.level-card .level-benefits .layui-tab-title li.layui-this:after {
  left: 0 !important; right: 0 !important; bottom: -1px !important; top: auto !important;
  width: auto !important; height: 2px !important; border: 0 !important; background: #3b82f6 !important;
}
.level-card .level-benefits .layui-tab-content { width: 100% !important; min-width: 0 !important; padding: 10px 0 0 !important; overflow: hidden !important; }
.level-card .level-benefits .layui-tab-item { width: 100% !important; min-width: 0 !important; overflow: hidden !important; }
.level-card .price-table { width: 100% !important; table-layout: fixed !important; }
.level-card .price-table th,
.level-card .price-table td { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

@media (max-width: 1400px) and (min-width: 769px) {
  .level-row .level-col { width: 50% !important; }
}
@media (max-width: 760px) {
  .level-row .level-col { width: 100% !important; }
}


/* v3 compact responsive pass — deployed 2026-09-04
 * Keeps all existing routes/markup and only tightens the member shell.
 */
html, body { overflow-x: hidden !important; }

/* Use the available canvas instead of centering a narrow 1200px column. */
.layui-layout-admin .layui-body { overflow-x: hidden !important; }
.layui-layout-admin .layui-body > .layui-tab,
.layui-layout-admin .layui-body > .layui-tab > .layui-tab-content,
.layui-layout-admin .layui-body > .layui-tab > .layui-tab-content > .layui-tab-item {
  overflow-x: hidden !important;
}
.layui-fluid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 28px 32px !important;
  box-sizing: border-box !important;
}
.layui-row.layui-col-space15 {
  margin-left: -6px !important;
  margin-right: -6px !important;
  margin-bottom: 0 !important;
}
.layui-row.layui-col-space15 > [class*="layui-col-"] {
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
}
.layui-card { margin-bottom: 0 !important; }
.layui-card-header { min-height: 48px !important; padding: 13px 18px !important; font-size: 17px !important; }
.layui-card-body { padding: 17px 18px !important; }
.info-panel, .search-box { margin-bottom: 12px !important; padding: 14px !important; }

/* Preserve the semantic encryption groups in the sidebar. */
.layui-layout-admin .layui-side .layui-nav .nav-group-title {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 13px 0 4px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  color: #a8a29e !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 18px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
}
.layui-layout-admin .layui-side .layui-nav .nav-group-title:first-child { margin-top: 0 !important; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item { margin: 2px 0 !important; }
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a { height: 38px !important; line-height: 38px !important; }

/* Compact, predictable controls in every member iframe. */
.layui-form-item { margin-bottom: 13px !important; }
.layui-table-view { max-width: 100% !important; }

@media (min-width: 769px) {
  .layui-layout-admin .layui-body { left: 240px !important; width: calc(100% - 240px) !important; }
  .layui-layout-admin .layui-body > .layui-tab > .layui-tab-content { top: 0 !important; }
  .layui-layout-admin .layui-body iframe.admin-iframe,
  .layui-layout-admin .layui-body > .admin-iframe { width: 100% !important; min-width: 0 !important; }
}

@media (max-width: 768px) {
  .layui-layout-admin .layui-header { height: 52px !important; }
  .layui-layout-admin .layui-header .layui-layout-left { height: 52px !important; }
  .layui-layout-admin .layui-header .layui-layout-left .layui-nav-item > a {
    width: 40px !important; height: 40px !important; margin-top: 6px !important; line-height: 40px !important;
  }
  .layui-layout-admin .layui-body {
    left: 0 !important;
    width: 100% !important;
    padding-top: 52px !important;
    overflow-x: hidden !important;
  }
  .layui-layout-admin .layui-side,
  .layui-layout-admin .layui-side .layui-side-scroll,
  .layui-layout-admin .layui-side .layui-nav {
    width: min(240px, 84vw) !important;
    max-width: 84vw !important;
  }
  .layui-layout-admin .layui-side .layui-side-scroll { padding: 92px 12px 78px !important; }
  .layui-layout-admin .layui-side .layui-nav .nav-group-title { padding-left: 10px !important; margin-top: 11px !important; }
  .layui-layout-admin.admin-nav-mini .site-mobile-shade {
    top: 52px !important;
    left: min(240px, 84vw) !important;
  }
  .layui-fluid {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 12px 24px !important;
  }
  .layui-row.layui-col-space15 { margin-left: -5px !important; margin-right: -5px !important; }
  .layui-row.layui-col-space15 > [class*="layui-col-"] { padding-left: 5px !important; padding-right: 5px !important; padding-bottom: 10px !important; }
  .layui-card-header { min-height: 44px !important; padding: 11px 14px !important; font-size: 16px !important; }
  .layui-card-body { padding: 14px !important; }
  .layui-form-label { width: 100% !important; padding: 0 0 5px !important; }
  .layui-input-block { margin-left: 0 !important; }
  .layui-input-inline, .layui-form-mid, .layui-form-select { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .layui-btn { max-width: 100% !important; }
  .layui-table-view { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .layui-table-view .layui-table { min-width: 620px !important; }
  .layui-table-view .layui-table-header { overflow: visible !important; }
  .search-box .layui-inline { display: block !important; width: 100% !important; margin: 0 0 9px !important; }
  .search-box .btn-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; }
  .search-box .btn-group .layui-btn { flex: 0 0 auto !important; }
  .level-row { display: block !important; margin: 0 !important; }
  .level-row .level-col { width: 100% !important; padding: 0 0 10px !important; }
  .level-card { width: 100% !important; }
  .upload-area, .layui-upload-drag { min-height: 170px !important; padding: 32px 16px !important; }
  .notice-content { padding: 16px !important; line-height: 1.75 !important; word-break: break-word !important; }
  .ew-console-wrapper .profile-overview { display: block !important; }
  .ew-console-wrapper .profile-info-list { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .ew-console-wrapper .profile-qq-bind { margin-top: 10px !important; }
  .ew-console-wrapper .dashboard-overview { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ew-console-wrapper .dashboard-overview > [class*="layui-col-"] { width: auto !important; padding: 0 !important; }
  .ew-console-wrapper .dashboard-overview .overview-card { min-height: 94px !important; padding: 12px !important; }
}
@media (max-width: 380px) {
  .layui-fluid { padding-left: 9px !important; padding-right: 9px !important; }
  .layui-card-header { padding-left: 12px !important; padding-right: 12px !important; }
  .layui-card-body { padding-left: 12px !important; padding-right: 12px !important; }
  .ew-console-wrapper .dashboard-overview { grid-template-columns: 1fr !important; }
  .tmd-auth-shell { width: calc(100% - 20px) !important; }
}


/* Hit-area fix: the legacy logo width/height include padding in the reference
   layout. Without border-box it grows over the first nav item and steals clicks. */
.layui-layout-admin .layui-header,
.layui-layout-admin .layui-header .layui-logo {
  box-sizing: border-box !important;
}


/* Single-view shell: remove legacy breadcrumb/title chrome while keeping the
   one iframe flush with the member canvas. */
.layui-layout-admin .layui-body > .layui-body-header,
.layui-layout-admin .layui-body > .layui-body-header.show {
  display: none !important;
}
.layui-layout-admin .layui-body > .layui-body-header + div {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.layui-layout-admin .layui-body > .layui-body-header + div > .admin-iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 768px) {
  .layui-layout-admin .layui-body > .layui-body-header + div { top: 52px !important; }
}


/* Mobile brand stays visible beside the drawer trigger. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-header .layui-logo {
    display: flex !important;
    position: absolute !important;
    left: 52px !important;
    top: 0 !important;
    width: auto !important;
    max-width: calc(100% - 64px) !important;
    height: 52px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
  }
  .layui-layout-admin .layui-header .layui-logo img { width: 30px !important; height: 30px !important; }
  .layui-layout-admin .layui-header .layui-logo cite { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .layui-layout-admin .layui-header .layui-logo cite span { font-size: 13px !important; }
  .layui-layout-admin .layui-header .layui-logo cite small { display: none !important; }
}


/* Mobile profile access: keep the existing account menu available inside the
   open drawer instead of dropping it with the desktop header utilities. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-header .layui-layout-right {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: min(216px, calc(84vw - 24px)) !important;
    height: auto !important;
    padding: 0 !important;
    transform: translateX(-130%) !important;
    transition: transform .2s ease !important;
    z-index: 1200 !important;
    pointer-events: auto !important;
  }
  .layui-layout-admin.admin-nav-mini .layui-header .layui-layout-right {
    transform: translateX(0) !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
    width: 100% !important;
    height: 52px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) .layui-nav-child {
    left: 0 !important;
    bottom: 58px !important;
    width: 100% !important;
  }
}


/* Mobile drawer geometry and account menu correction. The base EasyWeb rule
   sets top:0!important; explicitly reset it so the account card anchors to
   the bottom of the open drawer instead of spilling above the viewport. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-side {
    width: min(240px, calc(100vw - 16px)) !important;
    max-width: min(240px, calc(100vw - 16px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .layui-layout-admin .layui-side .layui-side-scroll,
  .layui-layout-admin .layui-side .layui-nav {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right {
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    width: min(216px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) .layui-nav-child {
    width: 100% !important;
    max-width: 100% !important;
  }
  .layui-layout-admin:not(.admin-nav-mini) .layui-header .layui-layout-right { pointer-events: none !important; }
  .layui-layout-admin.admin-nav-mini .layui-header .layui-layout-right { pointer-events: auto !important; }
  .layui-layout-admin.admin-nav-mini .layui-side { transform: translate3d(0,0,0) !important; }
  .layui-layout-admin:not(.admin-nav-mini) .layui-side { transform: translate3d(-100%,0,0) !important; }
}


/* The header blur creates a fixed-position containing block; remove it on
   phones so the account card can anchor to the viewport bottom. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .layui-layout-admin .layui-header .layui-layout-right {
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
  }
}


@media (max-width: 768px) {
  .layui-layout-admin .layui-side .layui-side-scroll { padding-bottom: 140px !important; }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
    background: #faf9f7 !important;
    border: 1px solid #e7e5e4 !important;
    box-shadow: 0 6px 18px rgba(28,25,23,.12) !important;
  }
}


/* Solid desktop brand panel: the fixed logo remains legible while the content
   iframe or sidebar is scrolled. */
@media (min-width: 769px) {
  .layui-layout-admin .layui-header,
  .layui-layout-admin .layui-header .layui-logo {
    background: var(--tmd-paper) !important;
  }
}

/* v4 mobile dashboard grid — keep six existing metrics aligned at phone widths. */
@media (max-width: 768px) {
  .ew-console-wrapper .dashboard-overview {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .ew-console-wrapper .dashboard-overview::before,
  .ew-console-wrapper .dashboard-overview::after {
    display: none !important;
    content: none !important;
  }
  .ew-console-wrapper .dashboard-overview > [class*="layui-col-"] {
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .ew-console-wrapper .dashboard-overview .overview-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 94px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .ew-console-wrapper .dashboard-overview .card-label,
  .ew-console-wrapper .dashboard-overview .card-desc {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .ew-console-wrapper .dashboard-overview .card-value {
    max-width: 100% !important;
    margin: 6px 0 2px !important;
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (max-width: 380px) {
  .ew-console-wrapper .dashboard-overview { gap: 6px !important; }
  .ew-console-wrapper .dashboard-overview .overview-card { padding: 10px !important; min-height: 88px !important; }
}

/* v5 readability + single-scroll viewport pass - deployed 2026-09-04
 * Keep the iframe document as the only vertical scroller. The legacy shell
 * created two nested overflow:auto layers, which made touch momentum stop at
 * the wrapper and required a second swipe at the top/bottom on phones.
 */
:root {
  --tmd-font-sans: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI",
    "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Arial, sans-serif;
  --tmd-text-strong: #292524;
  --tmd-text-body: #57534e;
  --tmd-text-muted: #78716c;
}
html, body {
  font-family: var(--tmd-font-sans) !important;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
body.layui-layout-body {
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.layui-layout-admin {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.layui-layout-admin .layui-body {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto !important;
}
/* index.js inserts this wrapper around the iframe; do not make it a second
   scrolling surface. The child document retains its native body scroll. */
.layui-layout-admin .layui-body > .layui-body-header + div {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none;
  touch-action: pan-y;
}
.layui-layout-admin .layui-body > .layui-body-header + div > iframe.admin-iframe {
  display: block !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}
/* The generated shell can omit the body-header in some cached states. */
.layui-layout-admin .layui-body > div:has(> iframe.admin-iframe) {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none;
}

/* Use the CJK sans stack for headings and metrics too. Fraunces/Syne had no
   stable Chinese glyph coverage and produced thin/mismatched fallback text. */
h1, h2, h3, h4, h5, h6,
.layui-card-header, .section-title, .notice-title,
.layui-layout-admin .layui-logo,
.login-wrapper h2, .tmd-auth-brand span,
.tmd-auth-heading h2, .tmd-auth-shell .login-wrapper > .layui-form > h2,
.stat-card .stat-value,
.ew-console-wrapper .overview-card .card-value {
  font-family: var(--tmd-font-sans) !important;
  font-synthesis: none !important;
}
.layui-layout-admin .layui-logo cite span,
.layui-layout-admin .layui-logo cite small,
.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a,
.layui-layout-admin .layui-side .layui-nav .nav-group-title {
  font-family: var(--tmd-font-sans) !important;
}
/* Raise body/label contrast while preserving the muted hierarchy. */
.layui-text, p, li, label, .layui-form-label,
.ew-console-wrapper .console-user-group .console-user-group-name a,
.ew-console-wrapper .overview-card .card-label,
.ew-console-wrapper .overview-card .card-desc {
  color: var(--tmd-text-body) !important;
}
.ew-console-wrapper .overview-card .card-label { color: #57534e !important; }
.ew-console-wrapper .overview-card .card-desc { color: #78716c !important; }

/* Phone tables: keep one horizontally scrollable table and prevent Layui's
   duplicated fixed-right layer from covering action cells. */
@media (max-width: 768px) {
  html, body { overscroll-behavior-y: none; }
  .layui-layout-admin .layui-body { padding-bottom: env(safe-area-inset-bottom) !important; }
  .layui-table-view {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
  }
  .layui-table-view .layui-table-fixed-r {
    display: none !important;
    visibility: hidden !important;
  }
  .layui-table-view .layui-table-main {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
  .layui-table-view .layui-table {
    min-width: 620px !important;
  }
}
/* Keep small labels readable on high-density phone screens. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ew-console-wrapper .info-item .info-label,
.ew-console-wrapper .profile-qq-bind .qq-bind-status,
.ew-console-wrapper .layui-timeline-title .pull-right,
.ew-console-wrapper .console-user-group-desc,
.ew-console-wrapper .card-desc { color: #78716c !important; }
.ew-console-wrapper .layui-timeline-title,
.ew-console-wrapper .layui-timeline-content,
.ew-console-wrapper .console-user-group-name,
.ew-console-wrapper .profile-qq-bind .qq-bind-text,
.layui-card-body > p,
.layui-card-body > li { color: #57534e !important; }

/* v6 auth alignment — center the existing auth composition without changing
   field names, captcha flow, or submit handlers. */
.tmd-auth-page {
  min-height: 100svh !important;
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.tmd-auth-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: min(416px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  box-sizing: border-box !important;
  justify-content: center !important;
}
.tmd-auth-page > .login-copyright {
  position: static !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom)) !important;
  color: #78716c !important;
  font-family: var(--tmd-font-sans) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.tmd-auth-shell .login-wrapper,
.tmd-auth-shell .login-wrapper > .layui-form {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  .tmd-auth-shell {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding: 20px 0 !important;
  }
  .tmd-auth-shell .login-wrapper > .layui-form {
    padding: 20px !important;
  }
  .tmd-auth-shell .layui-form-item { margin-bottom: 12px !important; }
  .tmd-auth-shell .layui-input,
  .tmd-auth-shell .layui-form-item > .layui-input {
    height: 42px !important;
    min-height: 42px !important;
    line-height: 40px !important;
  }
}
@media (max-width: 360px) {
  .tmd-auth-shell {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    padding: 12px 0 !important;
  }
  .tmd-auth-brand { margin-bottom: 12px !important; }
  .tmd-auth-brand img { width: 36px !important; height: 36px !important; }
  .tmd-auth-brand span { font-size: 16px !important; }
  .tmd-auth-shell .login-wrapper > .layui-form { padding: 16px !important; }
  .tmd-auth-shell .layui-form-item { margin-bottom: 10px !important; }
  .tmd-auth-shell .login-captcha-group {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    column-gap: 8px !important;
  }
  .tmd-auth-shell .login-captcha-group > .login-captcha {
    width: 92px !important;
  }
}

/* Solid account utility card: keep the existing profile/logout menu aligned
   with the sidebar edge on both desktop and phone layouts. */
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
  background: var(--tmd-paper) !important;
  border: 1px solid var(--tmd-line) !important;
  box-shadow: 0 6px 18px rgba(28,25,23,.10) !important;
  color: var(--tmd-ink) !important;
}
@media (min-width: 769px) {
  .layui-layout-admin .layui-header .layui-layout-right {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 768px) {
  .layui-layout-admin .layui-header .layui-layout-right {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
    min-height: 52px !important;
    background: var(--tmd-paper) !important;
    border-color: var(--tmd-line) !important;
  }
}

/* Upgrade pricing surface: dense, equal-height cards with phone-first breaks. */
.upgrade-page #levelList {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.upgrade-page #levelList > .level-col {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}
.upgrade-page #levelList > .level-col > .level-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 18px !important;
  border: 1px solid #e7e5e4 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(28,25,23,.04) !important;
  box-sizing: border-box !important;
}
.upgrade-page #levelList > .level-col > .level-card.current {
  padding: 17px !important;
  border: 2px solid #22c55e !important;
  box-shadow: 0 5px 16px rgba(34,197,94,.10) !important;
}
.upgrade-page .level-header { margin-bottom: 9px !important; min-height: 24px !important; }
.upgrade-page .level-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #292524 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.upgrade-page .level-tag { flex: 0 0 auto !important; border-radius: 7px !important; }
.upgrade-page .level-price {
  margin: 0 0 12px !important;
  color: #f4512a !important;
  font-family: var(--tmd-font-sans) !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}
.upgrade-page .discount-badge {
  margin: 0 0 12px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
.upgrade-page .level-benefits {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 13px !important;
  padding: 8px 10px !important;
  border: 1px solid #f0efed !important;
  border-radius: 10px !important;
  background: #fafaf9 !important;
  box-sizing: border-box !important;
}
.upgrade-page .level-benefits .layui-tab-title { height: 36px !important; min-height: 36px !important; }
.upgrade-page .level-benefits .layui-tab-title li { height: 36px !important; line-height: 36px !important; font-size: 11px !important; }
.upgrade-page .level-benefits .layui-tab-content { padding-top: 7px !important; }
.upgrade-page .price-table { font-size: 12px !important; }
.upgrade-page .price-table th,
.upgrade-page .price-table td { padding: 6px 3px !important; line-height: 1.35 !important; }
.upgrade-page .level-btn {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  line-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}
.upgrade-page #userStatus { padding: 17px 20px !important; }
.upgrade-page #userStatus > div { min-width: 0 !important; }
.upgrade-page #userStatus > div > div:last-child { font-family: var(--tmd-font-sans) !important; }
.upgrade-page .layui-card:has(#userStatus),
.upgrade-page .layui-card:has(#levelList) { overflow: visible !important; }
.upgrade-page .layui-card:has(#levelList) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.upgrade-page .layui-card:has(#levelList) > .layui-card-body { padding: 0 !important; }
.upgrade-page .loading-box { padding: 28px 12px !important; }

@media (max-width: 1200px) and (min-width: 901px) {
  .upgrade-page #levelList { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) and (min-width: 641px) {
  .upgrade-page #levelList { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .upgrade-page #levelList { grid-template-columns: 1fr !important; gap: 10px !important; }
  .upgrade-page #levelList > .level-col > .level-card,
  .upgrade-page #levelList > .level-col > .level-card.current { padding: 16px !important; }
  .upgrade-page .level-price { font-size: 26px !important; }
  .upgrade-page .level-benefits { padding: 8px !important; }
  .upgrade-page .level-btn { min-height: 44px !important; height: 44px !important; line-height: 42px !important; }
  .upgrade-page #userStatus { padding: 14px !important; }
  .upgrade-page #userStatus > div { gap: 10px !important; }
  .upgrade-page #userStatus > div > div:first-child,
  .upgrade-page #userStatus > div > div:last-child { max-width: 48% !important; }
}
@media (max-width: 390px) {
  .upgrade-page .level-benefits .layui-tab-title li { font-size: 10px !important; padding: 0 3px !important; }
  .upgrade-page .price-table th,
  .upgrade-page .price-table td { padding-left: 2px !important; padding-right: 2px !important; font-size: 11px !important; }
}

/* API selector/actions: retain content width and prevent full-width button stacks. */
.api-page #apiTypeButtons,
.api-page #quickNav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.api-page #apiTypeButtons .layui-btn,
.api-page #quickNav .layui-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.api-page .api-selector-container { margin-bottom: 14px !important; padding: 16px !important; }
.api-page .api-selector-container .layui-form-item { margin-bottom: 0 !important; }
.api-page .api-selector-container .layui-form-label { margin-bottom: 8px !important; }
@media (max-width: 480px) {
  .api-page #apiTypeButtons,
  .api-page #quickNav { gap: 6px !important; }
  .api-page #apiTypeButtons .layui-btn,
  .api-page #quickNav .layui-btn {
    min-height: 40px !important;
    height: auto !important;
    line-height: 1.25 !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
  }
  .api-page #quickNav .layui-btn { flex: 1 1 auto !important; }
  .api-page .api-selector-container { padding: 12px !important; }
}
/* Final small-screen details for dynamic upgrade/API content. */
.upgrade-page #levelList > .loading-box,
.upgrade-page #levelList > div[style*="width:100%"] {
  grid-column: 1 / -1 !important;
  width: auto !important;
}
@media (max-width: 640px) {
  .upgrade-page #userStatus > div {
    flex-wrap: wrap !important;
  }
  .upgrade-page #userStatus > div > div:last-child {
    margin-left: auto !important;
  }
}
@media (max-width: 600px) {
  .api-page .toolbar .layui-form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .api-page .toolbar .layui-inline {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .api-page .toolbar .layui-inline:first-child .layui-form-label {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
  }
  .api-page .toolbar .layui-inline:first-child .layui-input-inline {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .api-page .toolbar .layui-inline:last-child {
    gap: 8px !important;
  }
  .api-page .toolbar .layui-inline:last-child .layui-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* v7 API mobile selector repair: the legacy floating form label consumed the
   input block width, pushing generated type buttons off the right edge. */
@media (max-width: 768px) {
  .api-page .api-selector-container .layui-form-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    clear: both !important;
  }
  .api-page .api-selector-container .layui-form-label {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
  }
  .api-page .api-selector-container .layui-input-block {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    clear: both !important;
    box-sizing: border-box !important;
  }
  .api-page .api-selector-container #apiTypeButtons {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .api-page .api-selector-container #apiTypeButtons .layui-btn {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .api-page .api-selector-container .layui-form-mid {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
  }
  .api-page .layui-tab-title {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .api-page .layui-tab-title li {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 5px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .api-page .layui-tab-bar { display: none !important; }
}
@media (max-width: 420px) {
  .api-page .api-selector-container #apiTypeButtons { gap: 6px !important; }
  .api-page .api-selector-container #apiTypeButtons .layui-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    line-height: 32px !important;
    font-size: 12px !important;
  }
}
/* v8 mobile viewport fit: the shell header occupies 52px, so the iframe
   must use the remaining viewport height. This keeps table pagers and footers
   reachable instead of clipping the last 52px at the bottom. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-body {
    height: 100dvh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .layui-layout-admin .layui-body > .layui-body-header + div {
    top: 52px !important;
    bottom: 0 !important;
    height: calc(100dvh - 52px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
  }
  .layui-layout-admin .layui-body > .layui-body-header + div > iframe.admin-iframe,
  .layui-layout-admin .layui-body iframe.admin-iframe {
    height: calc(100dvh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
    max-height: calc(100dvh - 52px) !important;
    display: block !important;
  }
}
/* v10 fallback for engines without dynamic-viewport units. */
@media (max-width: 768px) {
  .layui-layout-admin .layui-body > .layui-body-header + div {
    height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
  }
  .layui-layout-admin .layui-body > .layui-body-header + div > iframe.admin-iframe,
  .layui-layout-admin .layui-body iframe.admin-iframe {
    height: calc(100vh - 52px) !important;
    min-height: calc(100vh - 52px) !important;
    max-height: calc(100vh - 52px) !important;
  }
  @supports (height: 100dvh) {
    .layui-layout-admin .layui-body > .layui-body-header + div {
      height: calc(100dvh - 52px) !important;
      max-height: calc(100dvh - 52px) !important;
    }
    .layui-layout-admin .layui-body > .layui-body-header + div > iframe.admin-iframe,
    .layui-layout-admin .layui-body iframe.admin-iframe {
      height: calc(100dvh - 52px) !important;
      min-height: calc(100dvh - 52px) !important;
      max-height: calc(100dvh - 52px) !important;
    }
  }
}

/* v11 account utility finish: use a distinct white paper card against the
   sidebar canvas so the administrator control reads as a solid footer anchor. */
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a {
  background: #fff !important;
  border: 1px solid #e7e5e4 !important;
  box-shadow: 0 8px 22px rgba(28,25,23,.12) !important;
  backdrop-filter: none !important;
}
.layui-layout-admin .layui-header .layui-layout-right > .layui-nav-item:nth-child(4) > a:hover {
  background: #fafaf9 !important;
  border-color: #d6d3d1 !important;
}
@media (min-width: 769px) {
  .layui-layout-admin .layui-header .layui-layout-right {
    bottom: 14px !important;
  }
}
@media (max-width: 768px) {
  .layui-layout-admin .layui-header .layui-layout-right {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* v12 safe bottom inset: reserve room below the last control for the fixed
   customer button and browser gesture area, so pagers/actions are reachable. */
@media (max-width: 768px) {
  body:not(.layui-layout-body) .layui-fluid {
    padding-bottom: max(76px, calc(76px + env(safe-area-inset-bottom))) !important;
  }
}