:root {
  --zj-primary: #0f7f8d;
  --zj-primary-2: #2563eb;
  --zj-accent: #f59e0b;
  --zj-text: #162033;
  --zj-muted: #64748b;
  --zj-border: #e3eaf2;
  --zj-bg: #f6f9fc;
  --zj-card: #ffffff;
  --zj-soft: #eef6f8;
  --zj-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  --zj-shell-width: 1160px;
  --zj-shell-gutter: 32px;
  --zj-shell-gutter-sm: 18px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body.zj-site {
  min-height: 100vh;
  margin: 0;
  color: var(--zj-text);
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f8 48%, #ffffff 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

.zj-site a {
  color: inherit;
  text-decoration: none;
}

.zj-site img {
  max-width: 100%;
  height: auto;
}

.zj-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  backdrop-filter: blur(16px);
}

.zj-topbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  min-height: 58px;
  margin: 0 auto;
}

.zj-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-weight: 800;
  letter-spacing: 0;
}

.zj-brand-mark,
.zj-tool-icon,
.zj-class-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  font-weight: 800;
}

.zj-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.zj-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.zj-nav::-webkit-scrollbar {
  display: none;
}

.zj-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  color: var(--zj-muted);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.zj-nav a:hover,
.zj-nav a.zj-active {
  color: var(--zj-primary);
  background: var(--zj-soft);
}

.zj-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.zj-page {
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  margin: 0 auto;
  padding: 0 0 42px;
}

.zj-hero {
  padding: 25px 0 14px;
}

.zj-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-crumb a {
  color: var(--zj-primary);
}

.zj-page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.zj-page-title h1 {
  margin: 0;
  color: var(--zj-text);
  font-size: clamp(24px, 4.5vw, 38px);
  line-height: 1.18;
}

.zj-page-title p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--zj-muted);
}

.zj-search {
  display: flex;
  align-items: center;
  width: min(100%, 620px);
  min-height: 48px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.zj-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  color: var(--zj-text);
  background: transparent;
  border: 0;
  outline: 0;
}

.zj-search button {
  align-self: stretch;
  min-width: 88px;
  color: #fff;
  background: var(--zj-primary);
  border: 0;
  font-weight: 800;
}

.zj-section {
  margin-top: 18px;
}

.zj-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.zj-section-head h2 {
  margin: 0;
  font-size: 20px;
}

.zj-section-head p {
  margin: 4px 0 0;
  color: var(--zj-muted);
}

.zj-tool-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.zj-tool-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-height: 118px;
  padding: 15px 10px 12px;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.zj-tool-card:hover {
  border-color: rgba(15, 127, 141, 0.34);
  transform: translateY(-1px);
  transition: 0.16s ease;
}

.zj-tool-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  font-size: 20px;
}

.zj-tool-name {
  display: -webkit-box;
  min-height: 40px;
  overflow: hidden;
  color: var(--zj-text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.38;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.zj-tool-meta {
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-vip-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 38px;
  padding: 3px 7px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-bottom-left-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.zj-vip-badge[data-group="0"][data-points="0"] {
  display: none;
}

.zj-pages {
  margin-top: 18px;
  text-align: center;
}

.zj-pages a,
.zj-pages b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  margin: 3px;
  padding: 0 10px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-pages b {
  color: #fff;
  background: var(--zj-primary);
  border-color: var(--zj-primary);
}

.zj-content-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: center;
  margin: 22px 0 4px;
}

.zj-content-pages:empty {
  display: none;
}

.zj-content-pages a,
.zj-content-pages b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 5px 10px;
  color: var(--zj-text);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 7px;
  font-weight: 400;
}

.zj-content-pages b {
  color: #fff;
  background: var(--zj-primary);
  border-color: var(--zj-primary);
}

.zj-tool-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: start;
}

.zj-card,
.zj-tool-body {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  box-shadow: var(--zj-shadow);
}

.zj-tool-body {
  min-width: 0;
  padding: 18px;
  overflow: hidden;
}

.zj-tool-aside {
  display: grid;
  gap: 12px;
}

.zj-card {
  padding: 16px;
}

.zj-card h2,
.zj-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.zj-card p,
.zj-card li {
  color: var(--zj-muted);
}

.zj-tool-head {
  margin-bottom: 14px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(15, 127, 141, 0.10), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(15, 127, 141, 0.18);
  border-radius: 12px;
}

.zj-tool-head h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.2;
}

.zj-tool-head p {
  margin: 8px 0 0;
  color: var(--zj-muted);
}

.zj-tool-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.zj-detail-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.zj-detail-vip[data-group="0"][data-points="0"] {
  display: none;
}

.zj-tool-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--zj-border);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

.zj-title-main {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 15px;
  min-width: 0;
}

.zj-title-main > .zj-line-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.zj-tool-title h1 {
  margin: 0;
  color: var(--zj-text);
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.18;
  font-weight: 900;
}

.zj-tool-title p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--zj-muted);
}

.zj-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.zj-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  color: #4f46e5;
  background: rgba(238, 242, 255, 0.92);
  border: 1px solid rgba(199, 210, 254, 0.86);
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.zj-tag:empty {
  display: none;
}

.zj-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
  color: var(--zj-text);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.zj-icon-btn:hover,
.zj-icon-btn.is-saved {
  color: #4f46e5;
  background: #eef2ff;
  border-color: #c7d2fe;
}

.zj-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.zj-calculator-card,
.zj-content-card {
  min-width: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06);
}

.zj-calculator-card {
  padding: 22px;
}

.zj-calculator-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-calculator-head h2 {
  margin: 8px 0 0;
  color: var(--zj-text);
  font-size: 22px;
  line-height: 1.25;
}

.zj-calc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.zj-calculator-card .zj-tool-body {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.zj-tool-content {
  display: grid;
  gap: 12px;
}

.zj-content-card {
  padding: 18px;
}

.zj-content-card h2 {
  margin: 0 0 10px;
  color: var(--zj-text);
  font-size: 17px;
  line-height: 1.35;
}

.zj-rich-text {
  color: var(--zj-muted);
  line-height: 1.8;
}

.zj-rich-text p,
.zj-rich-text ul,
.zj-rich-text ol,
.zj-rich-text dl {
  margin: 0;
}

.zj-rich-text ul,
.zj-rich-text ol {
  padding-left: 20px;
}

.zj-rich-text li + li,
.zj-rich-text dd + dt {
  margin-top: 6px;
}

.zj-rich-text dt {
  color: var(--zj-text);
  font-weight: 900;
}

.zj-rich-text dd {
  margin: 4px 0 0;
}

.zj-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.zj-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 11px;
  color: #4f46e5;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.zj-tool-body {
  color: var(--zj-text);
  font-size: 15px;
  line-height: 1.65;
}

.zj-tool-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.zj-tool-body td {
  padding: 6px 8px;
  vertical-align: middle;
}

.zj-tool-body [data-role="page"],
.zj-tool-body [data-role="content"] {
  width: 100% !important;
  max-width: 780px;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
}

.zj-tool-body [data-role="header"] {
  display: none !important;
}

.zj-tool-body h3 {
  margin: 0 0 16px;
  padding: 14px 16px;
  color: var(--zj-text);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.zj-tool-body h4 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 12px 14px;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.zj-tool-body form {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.05fr);
  gap: 10px 14px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
  background: rgba(248, 250, 252, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
}

.zj-tool-body .ui-block-a,
.zj-tool-body .ui-block-b {
  float: none !important;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
}

.zj-tool-body .ui-block-a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  color: #334155;
  font-weight: 800;
  line-height: 1.45;
}

.zj-tool-body .ui-block-a sup {
  display: inline;
  vertical-align: super;
  line-height: normal;
  font-size: 0.75em;
  margin: 0 0.5px;
}

.zj-tool-body .ui-block-b {
  display: flex;
  align-items: center;
}

.zj-tool-body input[type="text"],
.zj-tool-body input[type="number"],
.zj-tool-body input[type="tel"],
.zj-tool-body input[type="email"],
.zj-tool-body input[type="password"],
.zj-tool-body select,
.zj-tool-body textarea {
  width: 100% !important;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--zj-text);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d8e0ec;
  border-radius: 12px;
  outline: 0;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.02);
  font: inherit;
}

.zj-tool-body textarea {
  min-height: 96px;
  resize: vertical;
}

.zj-tool-body input:focus,
.zj-tool-body select:focus,
.zj-tool-body textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.zj-tool-body .ui-input-text,
.zj-tool-body .ui-select {
  width: 100% !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.zj-tool-body button,
.zj-tool-body input[type="button"],
.zj-tool-body input[type="submit"] {
  min-height: 44px;
  padding: 0 18px;
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #0891b2) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
  cursor: pointer;
  font-weight: 900;
}

.zj-tool-body a[data-role="button"],
.zj-tool-body .ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  max-width: 100%;
  padding: 0 13px;
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 800;
}

.zj-tool-body [data-role="footer"] {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 760px;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.zj-tool-body [data-role="navbar"] ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-tool-body [data-role="navbar"] li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-tool-body [data-role="navbar"] input[type="button"] {
  width: 100% !important;
}

.zj-tool-body [data-role="navbar"] .ui-btn,
.zj-tool-body .button-group .ui-btn {
  position: relative;
  min-height: 44px;
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #0891b2) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2) !important;
  overflow: hidden;
}

.zj-tool-body [data-role="navbar"] .ui-btn {
  width: 100% !important;
}

.zj-tool-body [data-role="navbar"] .ui-btn-inner,
.zj-tool-body .button-group .ui-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: inherit;
}

.zj-tool-body [data-role="navbar"] .ui-btn-text,
.zj-tool-body .button-group .ui-btn-text {
  color: inherit;
  font-weight: 900;
}

.zj-tool-body [data-role="navbar"] .ui-btn-hidden,
.zj-tool-body .button-group .ui-btn-hidden {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer;
  opacity: 0;
}

.zj-tool-body .button-group .ui-btn:has(#reset) {
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #d8e0ec !important;
  box-shadow: none !important;
}

.zj-tool-body div.ui-input-text {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 5px 5px 5px 13px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #b9d5ff !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07), inset 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

.zj-tool-body div.ui-input-text:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.zj-tool-body div.ui-input-text input[type="text"],
.zj-tool-body div.ui-input-text input[type="number"],
.zj-tool-body div.ui-input-text input[type="tel"],
.zj-tool-body div.ui-input-text input[type="email"],
.zj-tool-body div.ui-input-text input[type="password"] {
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  min-height: 40px;
  padding: 0 !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
}

.zj-tool-body div.ui-input-text .ui-input-clear {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 36px;
  margin: 0 !important;
  padding: 0 12px !important;
  color: #2563eb !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
}

.zj-tool-body div.ui-input-text .ui-input-clear .ui-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 !important;
  color: inherit;
}

.zj-tool-body div.ui-input-text .ui-input-clear .ui-btn-text {
  color: inherit;
  font-size: 13px;
  font-weight: 900;
}

.zj-tool-body div.ui-input-text .ui-input-clear .ui-icon {
  display: none !important;
}

.zj-site .ui-loader,
.zj-site .ui-loader-default,
.zj-site .ui-loader-verbose,
.zj-site .ui-loader-background {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.zj-tool-body hr {
  grid-column: 1 / -1;
  width: 100% !important;
  height: 1px;
  margin: 0;
  background: rgba(148, 163, 184, 0.22);
  border: 0;
}

.zj-tool-body sup {
  line-height: 0;
  vertical-align: super;
  font-size: 0.75em;
  margin: 0 0.5px;
}

.zj-access-panel {
  width: min(100%, 640px);
  margin: 42px auto 0;
  padding: 34px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.09);
}

.zj-access-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: #7c2d12;
  background: #ffedd5;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.zj-access-panel h1 {
  margin: 16px 0 8px;
  color: var(--zj-text);
  font-size: 32px;
  line-height: 1.2;
}

.zj-access-title {
  margin: 0 0 16px;
  color: var(--zj-text);
  font-size: 18px;
  font-weight: 900;
}

.zj-access-msg,
.zj-access-intro {
  margin: 0 0 14px;
  color: var(--zj-muted);
  line-height: 1.8;
}

.zj-access-require {
  margin: 18px 0;
  padding: 14px 16px;
  color: #0f766e;
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.7;
}

.zj-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.zj-primary-action,
.zj-secondary-action,
.zj-plain-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 900;
}

.zj-primary-action {
  color: #fff;
  background: var(--zj-primary);
}

.zj-secondary-action {
  color: #7c2d12;
  background: #fed7aa;
}

.zj-plain-action {
  color: var(--zj-text);
  background: #f8fafc;
  border: 1px solid var(--zj-border);
}

.zj-footer {
  margin-top: 34px;
  padding: 20px 0;
  color: var(--zj-muted);
  text-align: center;
  border-top: 1px solid var(--zj-border);
}

.zj-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.zj-bottom-nav {
  display: none;
}

.zj-member-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 440px);
  gap: 28px;
  align-items: stretch;
  padding: 34px 0;
}

.zj-member-hero,
.zj-member-card,
.zj-member-dashboard,
.zj-member-metrics > div {
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.zj-member-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  padding: 40px;
}

.zj-member-hero h1,
.zj-member-dashboard h1 {
  margin: 14px 0 10px;
  color: var(--zj-text);
  font-size: 34px;
  line-height: 1.18;
}

.zj-member-hero p,
.zj-member-dashboard p,
.zj-form-note {
  color: var(--zj-muted);
  line-height: 1.8;
}

.zj-member-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.zj-member-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  color: var(--zj-muted);
  font-weight: 800;
}

.zj-member-stats strong {
  color: var(--zj-primary);
}

.zj-member-card {
  padding: 22px;
}

.zj-member-card h2,
.zj-pay-panel h2 {
  margin: 0 0 16px;
  color: var(--zj-text);
  font-size: 20px;
}

.zj-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 18px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 12px;
}

.zj-auth-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--zj-muted);
  font-weight: 900;
  cursor: pointer;
}

.zj-auth-tabs button.is-active {
  color: var(--zj-text);
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.zj-auth-pane {
  display: none;
}

.zj-auth-pane.is-active {
  display: block;
}

.zj-member-form {
  display: grid;
  gap: 14px;
}

.zj-member-form label {
  display: grid;
  gap: 7px;
  color: var(--zj-text);
  font-weight: 900;
}

.zj-member-form label span {
  font-size: 13px;
}

.zj-member-form input,
.zj-member-form select,
.zj-buygroup-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  background: #fff;
  color: var(--zj-text);
  font-size: 15px;
}

.zj-inline-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.zj-code-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 92px;
  padding: 0 10px;
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  font-weight: 900;
}

.zj-full-action {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.zj-full-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.zj-auth-extra {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--zj-border);
}

.zj-wechat-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: #065f46;
  background: #d1fae5;
  border-radius: 10px;
  font-weight: 900;
}

.zj-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  color: var(--zj-muted);
  font-weight: 800;
}

.zj-member-dashboard {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px;
}

.zj-member-profile {
  display: flex;
  gap: 16px;
  align-items: center;
}

.zj-member-profile img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--zj-border);
}

.zj-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.zj-member-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.zj-member-metrics > div {
  padding: 18px;
}

.zj-member-metrics span,
.zj-member-list dt {
  color: var(--zj-muted);
  font-size: 13px;
  font-weight: 800;
}

.zj-member-metrics strong {
  display: block;
  margin-top: 8px;
  color: var(--zj-text);
  font-size: 24px;
}

/* 服务天数红色（桌面端） */
.zj-member-metrics .zj-service-days {
  color: #ef4444 !important;
  font-weight: 800 !important;
}
.zj-member-metrics .zj-service-days strong {
  color: #ef4444 !important;
  font-weight: 800 !important;
}

.zj-member-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zj-member-list {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

.zj-member-list dd {
  margin: 0;
  color: var(--zj-text);
  font-weight: 800;
}
  color: var(--zj-text);
  font-weight: 800;
}

.zj-member-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zj-member-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  font-weight: 900;
}

.zj-member-wide {
  margin-top: 14px;
}

.zj-member-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.zj-member-tools a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 14px 10px;
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  text-align: center;
}

.zj-member-tools strong {
  min-height: 38px;
  color: var(--zj-text);
  font-size: 14px;
  line-height: 1.35;
}

.zj-member-tools em {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 6px;
  color: #7c2d12;
  background: #fed7aa;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.zj-plan-list {
  display: grid;
  gap: 10px;
}

.zj-plan-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  cursor: pointer;
}

.zj-plan-card span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--zj-text);
  font-weight: 900;
}

.zj-plan-card em {
  color: var(--zj-primary);
  font-style: normal;
}

.zj-plan-card small {
  grid-column: 2;
  color: var(--zj-muted);
  line-height: 1.7;
}

.zj-pay-panel {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--zj-border);
}

@media (max-width: 980px) {
  .zj-tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .zj-tool-shell {
    grid-template-columns: 1fr;
  }

  .zj-tool-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-member-shell,
  .zj-member-grid {
    grid-template-columns: 1fr;
  }

  .zj-member-metrics,
  .zj-member-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.zj-site {
    padding-bottom: 62px;
    font-size: 14px;
  }

  .zj-topbar-inner {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    min-height: 54px;
  }

  .zj-brand span:last-child {
    display: none;
  }

  .zj-nav a {
    min-height: 32px;
    padding: 0 8px;
    font-size: 13px;
  }

  .zj-login-link {
    display: none;
  }

  .zj-page {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    padding-top: 0;
  }

  .zj-page-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .zj-search {
    width: 100%;
  }

  .zj-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .zj-tool-card {
    min-height: 108px;
    padding: 13px 7px 10px;
    border-radius: 9px;
  }

  .zj-tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 18px;
  }

  .zj-tool-name {
    min-height: 38px;
    font-size: 13px;
  }

  .zj-tool-body,
  .zj-tool-head,
  .zj-card,
  .zj-access-panel {
    padding: 13px;
    border-radius: 10px;
  }

  .zj-access-panel {
    margin-top: 18px;
  }

  .zj-access-panel h1 {
    font-size: 24px;
  }

  .zj-access-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .zj-member-shell {
    gap: 12px;
    padding: 12px 0;
  }

  .zj-member-hero {
    min-height: auto;
    padding: 18px;
  }

  .zj-member-hero h1,
  .zj-member-dashboard h1 {
    font-size: 24px;
  }

  .zj-member-card,
  .zj-member-dashboard,
  .zj-member-metrics > div {
    padding: 14px;
    border-radius: 10px;
  }

  .zj-member-dashboard,
  .zj-member-profile,
  .zj-member-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .zj-member-actions {
    justify-content: flex-start;
  }

  .zj-member-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-member-menu,
  .zj-member-tools {
    grid-template-columns: 1fr;
  }

  .zj-member-list {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .zj-inline-field {
    grid-template-columns: 1fr;
  }

  .zj-tool-body {
    overflow-x: auto;
  }

  .zj-tool-body table {
    width: max-content;
    min-width: 100%;
  }

  .zj-tool-body input[type="text"],
  .zj-tool-body input[type="number"],
  .zj-tool-body input[type="tel"],
  .zj-tool-body select,
  .zj-tool-body textarea {
    width: 100% !important;
    min-height: 40px;
    font-size: 16px;
  }

  .zj-tool-body .ui-block-a,
  .zj-tool-body .ui-block-b {
    float: none !important;
    width: 100% !important;
  }

  .zj-tool-body [data-role="header"] {
    flex-wrap: wrap;
  }

  .zj-tool-aside {
    grid-template-columns: 1fr;
  }

  .zj-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 58px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--zj-border);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  }

  .zj-bottom-nav a {
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--zj-muted);
    font-size: 12px;
    font-weight: 800;
  }

  .zj-bottom-nav a span {
    font-size: 18px;
    line-height: 1;
  }
}

/* 2026C refresh */
body.zj-site {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.96) 58%, #ffffff),
    linear-gradient(115deg, rgba(79, 70, 229, 0.08), rgba(6, 182, 212, 0.07) 36%, transparent 66%),
    var(--zj-bg);
}

body.zj-site.dark-theme {
  --zj-primary: #8b8dff;
  --zj-primary-2: #58b7ff;
  --zj-accent: #fbbf24;
  --zj-text: #eef2f7;
  --zj-muted: #aab3c3;
  --zj-border: #2b3343;
  --zj-bg: #101522;
  --zj-card: #151b2a;
  --zj-soft: #1b2233;
  --zj-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(16, 21, 34, 0.96) 0%, rgba(17, 24, 39, 0.96) 58%, rgba(16, 21, 34, 1) 100%),
    linear-gradient(115deg, rgba(139, 141, 255, 0.13) 0%, rgba(88, 183, 255, 0.10) 36%, transparent 66%),
    var(--zj-bg);
}

.zj-topbar {
  top: 12px;
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  min-height: 60px;
  margin: 12px auto 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.2);
}

.dark-theme .zj-topbar {
  background: rgba(15, 23, 42, 0.80);
  border-color: rgba(43, 51, 67, 0.90);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.zj-topbar-inner {
  width: 100%;
  min-height: 42px;
}

.zj-brand-mark {
  border-radius: 9px;
}

.zj-brand-text {
  color: var(--zj-text);
  font-weight: 900;
}

.zj-nav {
  overflow: visible;
}

.zj-nav-link,
.zj-dropdown-button,
.zj-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  color: var(--zj-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

.zj-nav-link:hover,
.zj-nav-link.zj-active,
.zj-dropdown.is-open .zj-dropdown-button,
.zj-dropdown-button:hover,
.zj-theme-btn:hover,
.zj-theme-btn.active {
  color: var(--zj-primary);
  background: var(--zj-soft);
  border-color: rgba(15, 127, 141, 0.12);
}

.zj-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.zj-dropdown-button {
  gap: 5px;
  cursor: pointer;
}

.zj-dropdown-button::after {
  content: "⌄";
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 70;
  display: none;
  width: min(460px, calc(100vw - 36px));
  padding: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--zj-border);
  border-radius: 18px;
  box-shadow: var(--zj-shadow);
}

.zj-dropdown.is-open .zj-dropdown-menu,
.zj-dropdown:focus-within .zj-dropdown-menu,
.zj-dropdown:hover .zj-dropdown-menu {
  display: block;
}

.dark-theme .zj-dropdown-menu {
  background: rgba(21, 27, 42, 0.98);
  border-color: rgba(43, 51, 67, 0.95);
}

.zj-dropdown-title {
  margin: 0 0 10px;
  color: var(--zj-text);
  font-size: 15px;
  font-weight: 900;
}

.zj-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.zj-dropdown-grid a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  color: var(--zj-text);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.zj-dropdown-grid a:hover {
  color: var(--zj-primary);
  border-color: rgba(15, 127, 141, 0.28);
}

.zj-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.zj-theme-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(248, 250, 252, 0.86);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
}

.dark-theme .zj-theme-switch {
  background: rgba(21, 27, 42, 0.90);
}

.zj-theme-btn {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.zj-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 3px 9px 3px 4px;
  color: var(--zj-text);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.zj-user-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.zj-user-level {
  color: var(--zj-primary);
}

.zj-page {
  padding-top: 0;
}

.zj-detail-page .zj-page,
.zj-article-page .zj-page {
  padding-top: 25px;
}

.zj-home-hero {
  max-width: 980px;
  margin: 0 auto;
  padding: 56px 0 26px;
  text-align: center;
}

.zj-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  color: var(--zj-primary);
  background: var(--zj-soft);
  border: 1px solid rgba(15, 127, 141, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.zj-home-hero h1 {
  margin: 16px 0 12px;
  color: var(--zj-text);
  font-size: 46px;
  line-height: 1.18;
  font-weight: 900;
}

.zj-home-hero p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--zj-muted);
  font-size: 17px;
}

.zj-home-search {
  display: flex;
  align-items: center;
  width: min(100%, 820px);
  height: 68px;
  margin: 30px auto 0;
  background: var(--zj-card);
  border: 2px solid rgba(88, 183, 255, 0.48);
  border-radius: 26px;
  box-shadow: 0 0 0 9px rgba(88, 183, 255, 0.10), 0 24px 70px rgba(15, 127, 141, 0.13);
  overflow: hidden;
}

.zj-home-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 24px;
  color: var(--zj-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 17px;
}

.zj-home-search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: calc(100% - 12px);
  margin-right: 6px;
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border: 0;
  border-radius: 21px;
  font-weight: 900;
}

.zj-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.zj-pill-row a,
.zj-pill-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  color: var(--zj-text);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
  font-weight: 800;
}

.dark-theme .zj-pill-row a,
.dark-theme .zj-pill-row button {
  background: rgba(21, 27, 42, 0.88);
}

.zj-home-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.zj-home-tabs button {
  min-height: 40px;
  padding: 0 14px;
  color: var(--zj-muted);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  font-weight: 900;
}

.zj-home-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border-color: transparent;
}

.zj-home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zj-mini-tool,
.zj-article-card {
  position: relative;
  min-width: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.dark-theme .zj-mini-tool,
.dark-theme .zj-article-card,
.dark-theme .zj-tool-card,
.dark-theme .zj-tool-body,
.dark-theme .zj-tool-head,
.dark-theme .zj-card,
.dark-theme .zj-access-panel {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.86);
}

.zj-mini-tool {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 132px;
  padding: 16px;
}

.zj-mini-tool strong {
  color: var(--zj-text);
  line-height: 1.35;
}

.zj-mini-tool small {
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-tool-class-grid .zj-class-card {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-content: center;
  min-height: 94px;
  padding: 14px 16px;
}

.zj-tool-class-grid .zj-class-card .zj-line-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

.zj-tool-class-grid .zj-class-card strong,
.zj-tool-class-grid .zj-class-card small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-tool-class-grid .zj-class-card strong {
  grid-row: 1;
  align-self: end;
}

.zj-tool-class-grid .zj-class-card small {
  grid-row: 2;
  align-self: start;
  line-height: 1.45;
}

.zj-empty-note {
  grid-column: 1 / -1;
  padding: 22px;
  color: var(--zj-muted);
  background: var(--zj-card);
  border: 1px dashed var(--zj-border);
  border-radius: 14px;
  text-align: center;
  font-weight: 800;
}

.zj-tool-card {
  min-height: 132px;
  border-radius: 14px;
}

.zj-tool-card[data-vip="0"] .zj-vip-badge,
.zj-detail-vip[data-group="0"][data-points="0"] {
  display: none;
}

.zj-card-action,
.zj-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

.zj-tool-card .zj-card-action {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

.zj-favorite-btn.is-saved,
.zj-card-action:hover,
.zj-favorite-btn:hover {
  color: #7c2d12;
  background: #ffedd5;
  border-color: #fed7aa;
}

.zj-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.zj-side-panel {
  display: grid;
  gap: 12px;
}

.zj-article-list {
  display: grid;
  gap: 12px;
}

.zj-news-list {
  display: grid;
  gap: 10px;
}

.zj-news-list-card {
  position: relative;
  min-width: 0;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.zj-news-list-link {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 13px 48px 13px 13px;
}

.zj-news-list-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 88px;
  margin: 0;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
}

.zj-news-list-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

.zj-news-list-thumb img[src=""] {
  display: none;
}

.zj-news-list-thumb img[src*="notimg"],
.zj-news-list-thumb img[src*="noimg"] {
  display: none;
}

.zj-news-list-copy {
  min-width: 0;
}

.zj-news-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-news-list-copy h3 {
  margin: 5px 0 4px;
  color: var(--zj-text);
  font-size: 18px;
  line-height: 1.4;
}

.zj-news-list-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--zj-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.6;
}

.zj-news-list-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
}

.zj-article-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.zj-article-card h3 {
  margin: 0;
  color: var(--zj-text);
  font-size: 18px;
  line-height: 1.4;
}

.zj-article-card p {
  margin: 0;
  color: var(--zj-muted);
}

.zj-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--zj-muted);
  font-size: 13px;
  font-weight: 800;
}

.zj-home-news-list {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 14px;
}

.zj-home-news-card {
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.zj-home-news-card a {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 15px 18px;
}

.zj-home-news-card:first-child {
  grid-row: span 3;
}

.zj-home-news-card:first-child a {
  align-content: end;
  min-height: 248px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.96)),
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.14), transparent 36%),
    radial-gradient(circle at bottom right, rgba(15, 127, 141, 0.14), transparent 34%);
}

.zj-news-label {
  width: max-content;
  max-width: 100%;
  padding: 3px 9px;
  overflow: hidden;
  color: #2563eb;
  background: #eef2ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-home-news-card h3 {
  margin: 0;
  color: var(--zj-text);
  font-size: 17px;
  line-height: 1.42;
}

.zj-home-news-card:first-child h3 {
  font-size: 25px;
  line-height: 1.25;
}

.zj-home-news-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--zj-muted);
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.zj-home-news-card:first-child p {
  -webkit-line-clamp: 4;
}

.zj-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-news-meta em {
  margin-left: auto;
  color: var(--zj-primary);
  font-style: normal;
  font-weight: 900;
}

.dark-theme .zj-home-news-card {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.86);
}

.dark-theme .zj-home-news-card:first-child a {
  background:
    linear-gradient(180deg, rgba(21, 27, 42, 0.70), rgba(21, 27, 42, 0.96)),
    radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 36%),
    radial-gradient(circle at bottom right, rgba(45, 212, 191, 0.12), transparent 34%);
}

.dark-theme .zj-news-label {
  color: #bfdbfe;
  background: rgba(30, 41, 59, 0.90);
  border-color: rgba(96, 165, 250, 0.28);
}

.zj-content-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 18px;
  align-items: start;
}

.zj-article-body {
  padding: 26px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 16px;
  box-shadow: var(--zj-shadow);
}

.zj-article-body h1,
.zj-tool-head h1 {
  margin: 0;
  color: var(--zj-text);
  font-size: 30px;
  line-height: 1.25;
}

.zj-news-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-news-title-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 8px;
}

.zj-news-title-row h1 {
  min-width: 0;
}

.zj-news-title-row .zj-favorite-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  border-color: var(--zj-border);
}

.zj-news-summary {
  margin: 14px 0 0;
  padding: 12px 14px;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border-left: 3px solid var(--zj-primary);
  border-radius: 0 8px 8px 0;
  line-height: 1.75;
}

.zj-brand-head {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
}

.zj-brand-head .zj-brand-logo {
  display: block;
  width: 160px;
  height: 112px;
  padding: 8px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-brand-head > div {
  min-width: 0;
}

.zj-brand-head p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.zj-brand-list {
  display: grid;
  gap: 12px;
}

.zj-brand-list-card {
  min-width: 0;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.zj-brand-list-link {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 14px;
}

.zj-brand-list-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 112px;
  margin: 0;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
}

.zj-brand-list-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.zj-brand-list-logo img[src=""] {
  display: none;
}

.zj-brand-list-copy {
  min-width: 0;
}

.zj-brand-list-copy h3 {
  margin: 4px 0 5px;
  color: var(--zj-text);
  font-size: 19px;
  line-height: 1.35;
}

.zj-brand-list-copy > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--zj-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.6;
}

.zj-brand-list-meta,
.zj-brand-list-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-brand-list-meta [data-rank="0"],
.zj-brand-list-facts span:empty,
.zj-brand-list-business:empty {
  display: none;
}

.zj-brand-list-facts {
  margin-top: 8px;
}

.zj-brand-list-facts span:first-child::before {
  content: "发源地 ";
}

.zj-brand-list-facts span:last-child::before {
  content: "创立时间 ";
}

.zj-brand-list-business {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--zj-text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 13px;
  line-height: 1.55;
}

.zj-brand-list-business::before {
  content: "主营：";
  color: var(--zj-muted);
}

.zj-brand-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.zj-brand-meta-item {
  min-width: 0;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-brand-meta-item.is-wide {
  grid-column: 1 / -1;
}

.zj-brand-meta-item > span {
  display: block;
  margin-bottom: 3px;
  color: var(--zj-muted);
  font-size: 12px;
  font-weight: 700;
}

.zj-brand-meta-item strong {
  display: block;
  color: var(--zj-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.zj-brand-meta-item em {
  color: var(--zj-muted);
  font-style: normal;
  font-weight: 500;
}

.zj-brand-meta-item a {
  color: var(--zj-primary);
  font-weight: 800;
}

.zj-ranking-card h2 {
  margin-bottom: 10px;
}

.zj-brand-ranking {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-brand-ranking li + li {
  border-top: 1px solid var(--zj-border);
}

.zj-brand-ranking a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 6px 2px;
}

.zj-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 38px;
  height: 30px;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 7px;
}

.zj-rank-glyph {
  font-size: 13px;
  line-height: 1;
}

.zj-rank-glyph:empty {
  display: none;
}

.zj-rank-badge b {
  font-size: 12px;
  line-height: 1;
}

.zj-rank-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.zj-brand-ranking .is-top-1 .zj-rank-badge {
  color: #9a6700;
  background: #fff6d8;
  border-color: #edc75e;
}

.zj-brand-ranking .is-top-2 .zj-rank-badge {
  color: #526173;
  background: #f1f5f9;
  border-color: #aab7c4;
}

.zj-brand-ranking .is-top-3 .zj-rank-badge {
  color: #9a4e24;
  background: #fff0e6;
  border-color: #d99a72;
}

.zj-brand-ranking .is-top .zj-rank-name {
  color: var(--zj-text);
  font-weight: 900;
}

.zj-article-text {
  margin-top: 18px;
  color: var(--zj-text);
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.zj-article-text *,
.zj-rich-text * {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.zj-article-text img,
.zj-tool-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.zj-article-tags {
  margin-top: 24px;
  padding-top: 8px;
  border-top: 1px solid var(--zj-border);
}

.zj-article-tags h2,
.zj-related-section h2 {
  margin: 0;
  color: var(--zj-text);
  font-size: 20px;
  font-weight: 400;
}

.zj-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.zj-tag-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 11px;
  color: var(--zj-primary);
  background: var(--zj-soft);
  border: 1px solid rgba(15, 127, 141, 0.22);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 400;
}

.zj-prev-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.zj-prev-next > div {
  min-width: 0;
  padding: 13px 14px;
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.zj-prev-next > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--zj-muted);
  font-size: 12px;
  font-weight: 400;
}

.zj-prev-next a {
  color: var(--zj-primary);
  font-weight: 400;
}

.zj-related-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--zj-border);
}

.zj-content-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zj-content-section-head > a {
  color: var(--zj-primary);
  font-size: 13px;
  font-weight: 400;
}

.zj-related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 14px;
}

.zj-related-list > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 0;
  border-bottom: 1px solid var(--zj-border);
}

.zj-related-list span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
  line-height: 1.45;
}

.zj-related-list em {
  color: var(--zj-muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.zj-hot-card h2 {
  margin-bottom: 10px;
}

.zj-hot-knowledge {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-hot-knowledge li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border-top: 1px solid var(--zj-border);
}

.zj-hot-knowledge li:first-child {
  border-top: 0;
}

.zj-hot-knowledge li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
}

.zj-hot-knowledge li:nth-child(-n + 3) > span {
  color: #9a4e24;
  background: #fff0e6;
}

.zj-hot-knowledge a {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.zj-hot-knowledge em {
  color: var(--zj-muted);
  font-size: 11px;
  font-style: normal;
}

.zj-tool-head-row {
  align-items: flex-start;
}

.zj-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.zj-bottom-nav {
  backdrop-filter: blur(16px);
}

.dark-theme .zj-bottom-nav {
  background: rgba(21, 27, 42, 0.96);
}

@media (max-width: 980px) {
  .zj-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-list-layout,
  .zj-content-shell {
    grid-template-columns: 1fr;
  }

  .zj-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-brand-list-page .zj-side-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .zj-topbar {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    border-radius: 22px;
  }

  .zj-topbar-inner {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .zj-brand {
    flex: 1 1 auto;
  }

  .zj-brand span:last-child {
    display: inline;
  }

  .zj-nav {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .zj-dropdown {
    position: static;
  }

  .zj-dropdown-menu {
    left: 8px;
    right: 8px;
    width: auto;
  }

  .zj-theme-switch {
    display: none;
  }

  .zj-user-label,
  .zj-user-level {
    display: none;
  }

  .zj-home-hero {
    padding-top: 28px;
  }

  .zj-home-hero h1 {
    font-size: 34px;
  }

  .zj-home-hero p {
    font-size: 15px;
  }

  .zj-home-search {
    height: 58px;
    border-radius: 20px;
  }

  .zj-home-search input {
    padding: 0 16px;
    font-size: 15px;
  }

  .zj-home-search button {
    min-width: 76px;
    border-radius: 16px;
  }

  .zj-home-grid,
  .zj-side-panel {
    grid-template-columns: 1fr;
  }

  .zj-news-list-link {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    padding: 11px 38px 11px 11px;
  }

  .zj-news-list-thumb {
    width: 88px;
    height: 72px;
  }

  .zj-news-list-copy h3 {
    margin-top: 3px;
    font-size: 16px;
  }

  .zj-news-list-copy p {
    -webkit-line-clamp: 1;
    font-size: 13px;
  }

  .zj-news-list-meta {
    gap: 3px 8px;
  }

  .zj-home-news-list {
    grid-template-columns: 1fr;
  }

  .zj-home-news-card:first-child {
    grid-row: auto;
  }

  .zj-home-news-card:first-child a {
    min-height: 190px;
    padding: 18px;
  }

  .zj-home-news-card:first-child h3 {
    font-size: 21px;
  }

  .zj-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-article-body {
    padding: 16px;
    border-radius: 12px;
  }

  .zj-article-body h1,
  .zj-tool-head h1 {
    font-size: 24px;
  }

  .zj-brand-head {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .zj-brand-head .zj-brand-logo {
    width: 92px;
    height: 76px;
  }

  .zj-brand-list-link {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .zj-brand-list-logo {
    width: 96px;
    height: 82px;
  }

  .zj-brand-list-copy h3 {
    font-size: 16px;
  }

  .zj-brand-list-business {
    display: none;
  }

  .zj-brand-meta {
    grid-template-columns: 1fr;
  }

  .zj-prev-next,
  .zj-related-list {
    grid-template-columns: 1fr;
  }

  .zj-news-title-row {
    gap: 10px;
  }

  .zj-news-title-row .zj-favorite-btn {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }

  .zj-tool-actions {
    justify-content: flex-start;
  }
}

/* Homepage style aligned with the 8088 reference */
body.zj-site {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 255, 0.96) 58%, #fff 100%),
    radial-gradient(circle at 16% 12%, rgba(79, 70, 229, 0.12), transparent 26%),
    radial-gradient(circle at 86% 8%, rgba(8, 145, 178, 0.13), transparent 28%),
    #f8fbff;
}

body.zj-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(79, 70, 229, 0.14), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(6, 182, 212, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(79, 70, 229, 0.08), transparent 46%),
    linear-gradient(225deg, rgba(6, 182, 212, 0.09), transparent 52%),
    repeating-linear-gradient(90deg, rgba(99, 102, 241, 0.052) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(6, 182, 212, 0.04) 0 1px, transparent 1px 92px);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 58%, transparent 100%);
}

body.dark-theme.zj-site {
  background:
    linear-gradient(180deg, rgba(16, 21, 34, 0.96) 0%, rgba(17, 24, 39, 0.96) 58%, rgba(16, 21, 34, 1) 100%),
    linear-gradient(115deg, rgba(139, 141, 255, 0.16) 0%, rgba(88, 183, 255, 0.11) 36%, transparent 66%),
    #101522;
}

body.dark-theme.zj-site::before {
  background:
    radial-gradient(circle at 16% 20%, rgba(139, 141, 255, 0.18), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(88, 183, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(139, 141, 255, 0.12), transparent 46%),
    linear-gradient(225deg, rgba(88, 183, 255, 0.10), transparent 52%),
    repeating-linear-gradient(90deg, rgba(139, 141, 255, 0.055) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(0deg, rgba(88, 183, 255, 0.04) 0 1px, transparent 1px 92px);
}

body.zj-site > * {
  position: relative;
  z-index: 1;
}

.zj-topbar {
  top: 12px;
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  margin: 12px auto 0;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(20px) saturate(1.16);
}

.dark-theme .zj-topbar {
  background: rgba(15, 23, 42, 0.82);
  border-color: rgba(43, 51, 67, 0.92);
}

.zj-topbar-inner {
  width: 100%;
  min-height: 58px;
  padding: 8px 12px;
}

.zj-home-page .zj-page {
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  padding-top: 0;
}

.zj-search-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 122px 0 26px;
  text-align: center;
}

.zj-search-hero h1 {
  order: 1;
  margin: 0;
  color: var(--zj-text);
  font-size: clamp(34px, 4.2vw, 48px);
  line-height: 1.12;
  letter-spacing: 0;
}

.zj-search-hero p {
  order: 2;
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--zj-muted);
  font-size: 17px;
}

.zj-cloud-strip,
.zj-major-pills,
.zj-hot-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.zj-cloud-strip {
  order: 3;
  max-width: 760px;
  gap: 14px 22px;
  margin: 38px auto 0;
}

.zj-cloud-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--zj-text);
  font-size: 14px;
}

.zj-cloud-strip span,
.zj-major-pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zj-primary-2);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--zj-border);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  font-weight: 800;
}

.zj-cloud-strip span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 13px;
}

.zj-search-hero .zj-home-search {
  order: 4;
  width: min(100%, 830px);
  height: 72px;
  margin: 28px auto 0;
  padding: 8px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(15, 127, 141, 0.22);
  border-radius: 24px;
  box-shadow: 0 16px 42px rgba(37, 99, 235, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.zj-search-hero .zj-home-search input {
  height: 100%;
  padding: 0 22px;
  font-size: 16px;
}

.zj-search-hero .zj-home-search button {
  min-width: 136px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--zj-primary-2), var(--zj-primary));
  font-size: 16px;
}

.zj-major-pills {
  order: 5;
  gap: 14px;
  margin: 26px auto 0;
}

.zj-major-pills a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 18px;
  color: var(--zj-text);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
  font-weight: 800;
}

.zj-major-pills span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.zj-hot-tags {
  order: 6;
  max-width: 760px;
  gap: 8px;
  margin: 24px auto 0;
}

.zj-hot-tags a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  color: var(--zj-muted);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 999px;
  font-size: 13px;
}

.dark-theme .zj-cloud-strip span,
.dark-theme .zj-major-pills a,
.dark-theme .zj-major-pills span,
.dark-theme .zj-hot-tags a,
.dark-theme .zj-search-hero .zj-home-search {
  background: rgba(21, 27, 42, 0.88);
  border-color: rgba(43, 51, 67, 0.96);
}

.dark-theme .zj-cloud-strip a,
.dark-theme .zj-major-pills a {
  color: var(--zj-text);
}

.zj-home-page .zj-section {
  margin-top: 28px;
}

.zj-home-page .zj-home-tabs {
  justify-content: center;
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .zj-topbar {
    top: 8px;
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    margin-top: 8px;
    border-radius: 24px;
  }

  .zj-topbar-inner {
    min-height: 0;
    padding: 8px 10px;
  }

  .zj-search-hero {
    padding: 54px 0 18px;
  }

  .zj-cloud-strip {
    gap: 8px 12px;
    margin-bottom: 22px;
  }

  .zj-cloud-strip a {
    font-size: 13px;
  }

  .zj-cloud-strip span {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }

  .zj-search-hero h1 {
    font-size: 34px;
  }

  .zj-search-hero p {
    font-size: 15px;
  }

  .zj-search-hero .zj-home-search {
    height: 62px;
    border-radius: 22px;
  }

  .zj-search-hero .zj-home-search input {
    padding: 0 14px;
    font-size: 15px;
  }

  .zj-search-hero .zj-home-search button {
    min-width: 82px;
    border-radius: 17px;
    font-size: 14px;
  }

  .zj-major-pills {
    gap: 10px;
  }

  .zj-major-pills a {
    min-height: 46px;
    padding: 0 13px;
  }

  .zj-hot-tags {
    gap: 7px;
  }
}

/* Compact tool cards, favorites, and category line icons */
.zj-nav a,
.zj-dropdown-button,
.zj-theme-btn,
.zj-user-chip {
  font-weight: 500;
}

.zj-dropdown-menu {
  z-index: 80;
  width: min(520px, calc(100vw - 28px));
  padding: 16px;
  background: #fff;
  border-radius: 18px;
}

.zj-dropdown-grid {
  gap: 8px;
}

.zj-dropdown-grid a {
  min-height: 38px;
  justify-content: flex-start;
  padding: 0 11px;
  color: var(--zj-text);
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 10px;
  font-weight: 500;
}

.dark-theme .zj-dropdown-grid a {
  background: rgba(30, 41, 59, 0.72);
  border-color: rgba(51, 65, 85, 0.88);
}

.dark-theme .zj-dropdown-menu {
  background: #151b2a;
}

.zj-line-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  border-radius: 13px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.zj-line-icon::before,
.zj-line-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.zj-line-icon::before {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.zj-line-icon::after {
  width: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.zj-i-drill::before { width: 8px; height: 22px; border-radius: 999px; transform: rotate(34deg); }
.zj-i-drill::after { width: 14px; transform: translate(7px, 9px) rotate(34deg); }
.zj-i-fluid::before { width: 15px; height: 20px; border-radius: 12px 12px 14px 14px; transform: rotate(45deg); }
.zj-i-fluid::after { width: 7px; height: 7px; border: 2px solid currentColor; background: transparent; border-radius: 999px; transform: translate(4px, 4px); }
.zj-i-density::before { width: 20px; height: 20px; border-radius: 50%; }
.zj-i-density::after { width: 12px; height: 2px; transform: rotate(-28deg); }
.zj-i-flask::before { width: 16px; height: 21px; border-radius: 4px 4px 9px 9px; transform: translateY(2px); }
.zj-i-flask::after { width: 9px; height: 8px; border: 2px solid currentColor; border-bottom: 0; background: transparent; transform: translateY(-12px); }
.zj-i-filter::before { width: 22px; height: 16px; clip-path: polygon(0 0, 100% 0, 58% 55%, 58% 100%, 42% 100%, 42% 55%); background: currentColor; border: 0; border-radius: 2px; }
.zj-i-filter::after { display: none; }
.zj-i-more::before { width: 4px; height: 4px; background: currentColor; border: 0; border-radius: 50%; box-shadow: -8px 0 0 currentColor, 8px 0 0 currentColor; }
.zj-i-more::after { display: none; }
.zj-i-medicine::before { width: 22px; height: 14px; border-radius: 999px; transform: rotate(-28deg); }
.zj-i-medicine::after { width: 2px; height: 14px; transform: rotate(-28deg); }
.zj-i-recipe::before { width: 18px; height: 22px; border-radius: 5px; }
.zj-i-recipe::after { width: 10px; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.zj-i-water::before { width: 18px; height: 18px; border-radius: 50%; }
.zj-i-water::after { width: 16px; height: 8px; border: 2px solid currentColor; border-top: 0; background: transparent; transform: translateY(4px); }
.zj-i-cement::before { width: 22px; height: 16px; border-radius: 4px; }
.zj-i-cement::after { width: 14px; height: 2px; box-shadow: 0 5px 0 currentColor; }
.zj-i-thicken::before { width: 18px; height: 22px; border-radius: 4px 4px 8px 8px; border: 2px solid currentColor; background: transparent; }
.zj-i-thicken::after { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; background: transparent; transform: translateY(-2px); }
.zj-i-stuck::before { width: 18px; height: 18px; border-radius: 50%; }
.zj-i-stuck::after { width: 16px; height: 2px; transform: rotate(45deg); }
.zj-i-shield::before { width: 18px; height: 22px; border-radius: 10px 10px 6px 6px; clip-path: polygon(50% 0, 100% 20%, 88% 76%, 50% 100%, 12% 76%, 0 20%); }
.zj-i-shield::after { width: 10px; height: 6px; border: 2px solid currentColor; border-top: 0; background: transparent; transform: translateY(2px); }
.zj-i-leak::before { width: 20px; height: 12px; border-radius: 999px; transform: rotate(-12deg); }
.zj-i-leak::after { width: 6px; height: 10px; border: 2px solid currentColor; border-top: 0; background: transparent; border-radius: 0 0 999px 999px; transform: translate(8px, 9px); }
.zj-i-hook::before { width: 16px; height: 22px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; transform: translateY(-2px); }
.zj-i-hook::after { width: 12px; height: 2px; transform: translateY(-11px); }
.zj-i-coordinate::before { width: 20px; height: 20px; border-radius: 50%; }
.zj-i-coordinate::after { width: 5px; height: 5px; background: currentColor; border-radius: 50%; box-shadow: 8px 0 0 currentColor, 4px 8px 0 currentColor; transform: translate(-4px, -3px); }
.zj-i-convert::before { width: 20px; height: 2px; box-shadow: 0 10px 0 currentColor; transform: translateY(-5px); }
.zj-i-convert::after { width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; background: transparent; transform: translate(7px, -5px) rotate(45deg); box-shadow: -12px 12px 0 -2px transparent; }

.zj-tool-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.zj-tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 24px;
  align-items: center;
  min-height: 108px;
  padding: 18px;
  text-align: left;
  border-radius: 16px;
}

.zj-tool-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.zj-tool-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.zj-tool-card .zj-tool-name {
  min-height: 0;
  font-size: 15px;
  font-weight: 700;
}

.zj-tool-card .zj-tool-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zj-tool-card .zj-card-action {
  position: static;
}

.zj-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  color: #4f46e5;
  font-size: 26px;
  line-height: 1;
}

.zj-card-action,
.zj-favorite-btn {
  color: #64748b;
  background: transparent;
  border-color: transparent;
}

.zj-card-action:hover,
.zj-card-action.is-saved,
.zj-favorite-btn:hover,
.zj-favorite-btn.is-saved {
  color: #4f46e5;
  background: transparent;
  border-color: transparent;
}

[data-zj-favorite],
[data-zj-favorite]:hover,
[data-zj-favorite].is-saved {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.zj-list-page .zj-hero,
.zj-article-list-page .zj-hero {
  max-width: 820px;
  padding: 25px 0 12px;
}

.zj-list-page .zj-page-title,
.zj-article-list-page .zj-page-title {
  display: block;
}

.zj-list-page .zj-page-title h1,
.zj-article-list-page .zj-page-title h1 {
  margin: 10px 0 8px;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.16;
}

.zj-list-page .zj-page-title p,
.zj-article-list-page .zj-page-title p {
  max-width: none;
  margin: 0;
  font-size: 17px;
}

.zj-list-page .zj-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.zj-list-page .zj-tool-card {
  grid-template-columns: minmax(0, 1fr) 34px 22px;
  justify-items: stretch;
  align-content: center;
  gap: 0;
  min-height: 116px;
  padding: 18px 16px;
  overflow: hidden;
  text-align: left;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
}

.zj-list-page .zj-tool-card-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  justify-self: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.zj-list-page .zj-tool-card-main .zj-line-icon {
  justify-self: start;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 13px;
}

.zj-list-page .zj-tool-copy {
  align-self: center;
  min-width: 0;
}

.zj-list-page .zj-tool-card .zj-card-action {
  justify-self: center;
}

.zj-list-page .zj-card-arrow {
  justify-content: center;
  font-size: 23px;
}

.zj-list-page .zj-vip-badge {
  border-bottom-left-radius: 10px;
}

.zj-tool-channel-page .zj-page {
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
}

.zj-channel-hero {
  max-width: 820px;
  padding: 25px 0 12px;
}

.zj-channel-hero h1 {
  margin: 10px 0 8px;
  color: var(--zj-text);
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.16;
}

.zj-channel-hero p {
  margin: 0;
  color: var(--zj-muted);
  font-size: 17px;
}

.zj-channel-class-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.zj-channel-class-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.04);
}

.zj-channel-class-card strong,
.zj-channel-tool-card strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--zj-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-channel-class-card small,
.zj-channel-tool-card small {
  display: block;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-channel-section {
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.78);
  border-radius: 18px;
}

.zj-channel-section + .zj-channel-section {
  margin-top: 18px;
}

.dark-theme .zj-channel-class-card,
.dark-theme .zj-channel-section,
.dark-theme .zj-channel-tool-card {
  background: rgba(21, 27, 42, 0.90);
  border-color: rgba(43, 51, 67, 0.88);
}

.zj-channel-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zj-channel-tool-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--zj-border);
  border-radius: 14px;
}

.zj-channel-tool-card .zj-line-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.zj-channel-tool-card em {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 7px;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-bottom-left-radius: 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

@media (min-width: 721px) {
  .zj-detail-page .zj-page > .zj-crumb,
  .zj-article-page .zj-page > .zj-crumb {
    padding-left: 24px;
    padding-right: 24px;
  }

  .zj-list-page .zj-hero,
  .zj-article-list-page .zj-hero,
  .zj-tool-channel-page .zj-channel-hero {
    padding-left: 24px;
    padding-right: 24px;
  }

  .zj-tool-channel-page .zj-channel-section {
    padding: 24px;
  }
}

.zj-home-tools-panel {
  padding: 18px;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid var(--zj-border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.dark-theme .zj-home-tools-panel {
  background: rgba(21, 27, 42, 0.90);
  border-color: rgba(43, 51, 67, 0.88);
}

.zj-home-tools-panel .zj-home-tabs {
  justify-content: flex-start;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-home-tools-panel .zj-home-tabs button {
  min-height: 30px;
  padding: 0 0 8px;
  color: var(--zj-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 600;
}

.zj-home-tools-panel .zj-home-tabs button.active {
  color: #4f46e5;
  background: transparent;
  border-bottom-color: #4f46e5;
}

.zj-home-tool-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.zj-home-tools-panel .zj-home-tool-list[hidden] {
  display: none !important;
}

.zj-home-tools-panel .zj-home-tool-list {
  max-height: 108px;
  overflow: hidden;
}

.zj-home-tools-panel .zj-empty-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 48px;
}

.zj-home-tool-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  background: #f3f6fb;
  border: 1px solid #e4eaf3;
  border-radius: 999px;
}

.dark-theme .zj-home-tool-pill {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(51, 65, 85, 0.86);
}

.zj-home-tool-pill a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.zj-home-tool-pill .zj-line-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.zj-home-tool-pill strong {
  min-width: 0;
  overflow: hidden;
  color: var(--zj-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-home-tool-pill .zj-card-action {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

@media (max-width: 1080px) {
  .zj-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zj-list-page .zj-tool-grid,
  .zj-channel-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-channel-class-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zj-home-tool-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zj-home-tools-panel .zj-home-tool-list {
    max-height: 108px;
  }
}

@media (max-width: 720px) {
  .zj-dropdown-menu {
    left: 0;
    right: 0;
  }

  .zj-tool-grid {
    grid-template-columns: 1fr;
  }

  .zj-list-page .zj-tool-grid,
  .zj-channel-class-grid,
  .zj-channel-tool-grid {
    grid-template-columns: 1fr;
  }

  .zj-tool-card {
    min-height: 88px;
    padding: 14px;
  }

  .zj-list-page .zj-tool-card {
    min-height: 96px;
    padding: 14px;
  }

  .zj-list-page .zj-tool-card-main {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
  }

  .zj-list-page .zj-tool-card-main .zj-line-icon {
    width: 40px;
    height: 40px;
  }

  .zj-channel-hero {
    padding-top: 25px;
  }

  .zj-channel-section {
    padding: 14px;
    border-radius: 16px;
  }

  .zj-channel-section + .zj-channel-section {
    margin-top: 12px;
  }

  .zj-line-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .zj-home-tools-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .zj-home-tool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .zj-home-tools-panel .zj-home-tool-list {
    max-height: 104px;
  }

  .zj-home-tool-pill {
    min-height: 46px;
    padding: 6px 8px;
  }
}

/* 8089-inspired homepage refinement */
.zj-calculator-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 360px;
  padding: 86px 0 38px;
  text-align: center;
}

.zj-home-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 18px;
  padding: 0 14px;
  color: #4f46e5;
  background: rgba(238, 242, 255, 0.86);
  border: 1px solid rgba(79, 70, 229, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.zj-calculator-hero h1 {
  margin: 0;
  color: var(--zj-text);
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0;
}

.zj-calculator-hero p {
  max-width: 780px;
  margin: 18px auto 0;
  color: var(--zj-muted);
  font-size: 17px;
  line-height: 1.8;
}

.zj-calculator-hero .zj-home-search {
  width: min(100%, 840px);
  height: 62px;
  margin: 32px auto 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.zj-calculator-hero .zj-home-search input {
  height: 100%;
  padding: 0 20px;
  font-size: 16px;
}

.zj-calculator-hero .zj-home-search button {
  min-width: 118px;
  border-radius: 0;
  background: linear-gradient(135deg, #4f46e5, #0f8aa0);
  font-size: 16px;
}

.zj-feature-section {
  margin-top: 22px;
}

.zj-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.zj-feature-card {
  position: relative;
  min-width: 0;
  padding: 18px 54px 18px 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--zj-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.dark-theme .zj-feature-card {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.88);
}

.zj-feature-card a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.zj-feature-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  text-align: left;
}

.zj-feature-copy strong {
  overflow: hidden;
  color: var(--zj-text);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-feature-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--zj-muted);
  font-size: 14px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.zj-feature-copy em {
  justify-self: start;
  min-height: 24px;
  padding: 2px 10px;
  color: #4f46e5;
  background: rgba(238, 242, 255, 0.82);
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
}

.zj-feature-card .zj-card-action {
  position: absolute;
  top: 20px;
  right: 16px;
}

.zj-feature-section + .zj-home-tools-panel {
  margin-top: 18px;
}

.zj-home-news-card a {
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}

.zj-home-news-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 126px;
  margin: 0;
  overflow: hidden;
  color: var(--zj-muted);
  background: var(--zj-soft);
  font-size: 13px;
  font-weight: 700;
}

.zj-home-news-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zj-home-news-copy {
  display: grid;
  gap: 7px;
  align-content: center;
  min-width: 0;
  padding: 14px 16px;
}

.zj-home-news-card:first-child {
  grid-row: auto;
  grid-column: 1 / -1;
}

.zj-home-news-card:first-child a {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  min-height: 250px;
  padding: 0;
  background: none;
}

.zj-home-news-card:first-child .zj-home-news-media {
  min-height: 250px;
}

.zj-home-news-card:first-child .zj-home-news-copy {
  padding: 22px 24px;
}

.zj-home-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.zj-home-brand-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--zj-text);
  background: var(--zj-surface);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.zj-home-brand-item:hover {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.zj-home-brand-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--zj-soft);
}

.zj-home-brand-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.zj-home-brand-item:hover img {
  transform: scale(1.025);
}

.zj-home-brand-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border-top: 1px solid var(--zj-border);
}

.zj-home-brand-meta strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-home-brand-meta > span {
  flex: 0 0 auto;
  color: var(--zj-primary);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .zj-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .zj-calculator-hero {
    min-height: 0;
    padding: 46px 0 28px;
  }

  .zj-home-badge {
    margin-bottom: 14px;
  }

  .zj-calculator-hero h1 {
    font-size: 38px;
  }

  .zj-calculator-hero p {
    margin-top: 14px;
    font-size: 15px;
  }

  .zj-calculator-hero .zj-home-search {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    margin-top: 24px;
    border-radius: 14px;
  }

  .zj-calculator-hero .zj-home-search input {
    height: 48px;
    text-align: left;
  }

  .zj-calculator-hero .zj-home-search button {
    height: 46px;
    width: 100%;
  }

  .zj-feature-grid {
    grid-template-columns: 1fr;
  }

  .zj-home-news-card a,
  .zj-home-news-card:first-child a {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 0;
  }

  .zj-home-news-card:first-child {
    grid-column: auto;
  }

  .zj-home-news-media,
  .zj-home-news-card:first-child .zj-home-news-media {
    min-height: 96px;
  }

  .zj-home-news-card:first-child .zj-home-news-copy {
    padding: 14px 16px;
  }

  .zj-home-news-card:first-child h3 {
    font-size: 17px;
  }

  .zj-home-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .zj-home-brand-meta {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 9px 10px;
  }

  .zj-home-brand-meta strong {
    width: 100%;
    font-size: 14px;
  }

  .zj-feature-card {
    padding: 16px 52px 16px 14px;
  }

  .zj-feature-copy strong {
    white-space: normal;
  }
}

/* Header action area like the 8089 reference */
.zj-actions {
  gap: 10px;
}

.zj-theme-switch {
  gap: 2px;
  min-height: 36px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
}

.zj-theme-btn {
  min-height: 30px;
  padding: 0 12px;
  color: var(--zj-muted);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.zj-theme-btn.active,
.zj-theme-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: transparent;
}

.zj-menu-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #526173;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--zj-border);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.zj-menu-button span {
  display: block;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
}

.zj-submit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 38px;
  padding: 0 16px;
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #6d5dfc);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.zj-member-nav {
  position: relative;
  z-index: 1200;
}

@media (hover: hover) and (pointer: fine) {
  .zj-member-nav::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 332px;
    height: 12px;
  }
}

.zj-submit-link.zj-member-trigger {
  gap: 8px;
  max-width: 190px;
  padding: 0 13px 0 8px;
}

.zj-member-trigger-avatar,
.zj-member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #4f7cff, #5967ea);
  border-radius: 50%;
  font-weight: 900;
}

.zj-member-trigger-avatar {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

.zj-member-trigger-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-member-trigger-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 18px;
  padding: 0 5px;
  color: #4338ca;
  background: #eef2ff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.dark-theme .zj-member-trigger-level {
  color: #312e81;
  background: #c7d2fe;
  border-color: rgba(255, 255, 255, 0.28);
}

.zj-member-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 332px;
  padding: 18px;
  color: var(--zj-text);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.zj-member-popover[hidden],
.zj-member-popover-backdrop[hidden] {
  display: none;
}

.zj-member-popover-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
}

.zj-member-avatar {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.zj-member-popover-head strong,
.zj-member-popover-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-member-popover-head strong {
  font-size: 18px;
  line-height: 1.35;
}

.zj-member-popover-head small {
  margin-top: 2px;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-member-popover-close {
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--zj-muted);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.zj-member-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 14px;
  color: var(--zj-muted);
  background: rgba(79, 70, 229, 0.07);
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 8px;
  font-size: 13px;
}

.zj-member-identity strong {
  color: var(--zj-primary);
}

.zj-member-popover-links {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.zj-member-popover-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 13px;
  color: var(--zj-text);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  font-size: 13px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.zj-member-popover-links a:hover {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.26);
}

.zj-member-popover-links b {
  color: var(--zj-muted);
  font-size: 18px;
  font-weight: 400;
}

.zj-member-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(15, 23, 42, 0.16);
  border: 0;
  backdrop-filter: blur(3px);
  cursor: default;
}

.dark-theme .zj-member-popover {
  background: rgba(21, 27, 42, 0.98);
  border-color: var(--zj-border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

.dark-theme .zj-member-identity {
  background: rgba(139, 141, 255, 0.10);
  border-color: rgba(139, 141, 255, 0.2);
}

.dark-theme .zj-member-popover-links a,
.dark-theme .zj-member-popover-close {
  background: #0f172a;
  border-color: var(--zj-border);
}

.zj-actions .zj-menu-button {
  display: none;
}

.dark-theme .zj-theme-switch,
.dark-theme .zj-menu-button {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.95);
}

@media (max-width: 720px) {
  body.zj-member-menu-open {
    overflow: hidden;
  }

  .zj-topbar {
    position: sticky;
  }

  .zj-topbar-inner {
    flex-wrap: nowrap;
    min-height: 42px;
  }

  .zj-brand {
    flex: 0 0 auto;
  }

  .zj-brand span:last-child {
    display: none;
  }

  .zj-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 90;
    order: initial;
    display: none;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: auto;
    padding: 12px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--zj-border);
    border-radius: 20px;
    box-shadow: var(--zj-shadow);
  }

  .dark-theme .zj-nav {
    background: rgba(21, 27, 42, 0.98);
  }

  .zj-nav.is-open {
    display: flex;
  }

  .zj-nav-link,
  .zj-dropdown-button {
    justify-content: space-between;
    min-height: 40px;
    width: 100%;
  }

  .zj-dropdown {
    position: relative;
  }

  .zj-dropdown-menu {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 16px;
    box-shadow: none;
  }

  .zj-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-actions {
    gap: 8px;
  }

  .zj-submit-link {
    display: inline-flex;
    min-height: 38px;
    padding: 0 14px;
  }

  .zj-theme-switch {
    display: inline-flex;
  }
}

@media (max-width: 420px) {
  .zj-topbar {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    padding: 7px 9px;
  }

  .zj-topbar-inner {
    width: 100%;
    gap: 8px;
  }

  .zj-actions {
    gap: 7px;
  }

  .zj-theme-btn {
    min-height: 30px;
    padding: 0 10px;
  }

  .zj-submit-link {
    padding: 0 13px;
  }
}

/* Final nav/search polish */
.zj-topbar {
  z-index: 1000;
}

body.zj-site > .zj-topbar {
  z-index: 1000;
}

.zj-dropdown {
  z-index: 1001;
}

.zj-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.zj-dropdown-menu {
  top: calc(100% + 8px);
  z-index: 1002;
  pointer-events: auto;
}

.zj-dropdown-grid a {
  position: relative;
  z-index: 1;
}

.zj-home-hero,
.zj-calculator-hero {
  position: relative;
  z-index: 0;
}

.zj-calculator-hero .zj-home-search {
  width: min(100%, 866px);
  height: 64px;
  margin: 34px auto 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

.zj-calculator-hero .zj-home-search input {
  height: 100%;
  padding: 0 20px;
  color: var(--zj-text);
  font-size: 16px;
}

.zj-calculator-hero .zj-home-search input::placeholder {
  color: #6b7280;
}

.zj-calculator-hero .zj-home-search button {
  align-self: stretch;
  min-width: 122px;
  height: 100%;
  margin: 0;
  padding: 0 24px;
  background: linear-gradient(135deg, #4f46e5 0%, #0f8aa0 100%);
  border-radius: 0;
  font-size: 16px;
  font-weight: 800;
}

.dark-theme .zj-calculator-hero .zj-home-search {
  background: rgba(21, 27, 42, 0.96);
  border-color: rgba(43, 51, 67, 0.95);
}

@media (max-width: 720px) {
  .zj-dropdown::after {
    display: none;
  }

  .zj-nav {
    z-index: 1002;
  }

  .zj-calculator-hero .zj-home-search {
    height: 58px;
    border-radius: 14px;
  }

  .zj-calculator-hero .zj-home-search input {
    padding: 0 15px;
    font-size: 14px;
  }

  .zj-calculator-hero .zj-home-search button {
    min-width: 96px;
    padding: 0 16px;
    font-size: 14px;
  }
}

.dark-theme .zj-tool-title,
.dark-theme .zj-calculator-card,
.dark-theme .zj-content-card {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.86);
}

.dark-theme .zj-icon-btn {
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(51, 65, 85, 0.88);
}

.dark-theme .zj-tag,
.dark-theme .zj-pill {
  color: #bfdbfe;
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(96, 165, 250, 0.28);
}

.dark-theme .zj-calc-badge {
  color: #a7f3d0;
  background: rgba(20, 83, 45, 0.38);
  border-color: rgba(45, 212, 191, 0.26);
}

@media (max-width: 980px) {
  .zj-tool-layout {
    grid-template-columns: 1fr;
  }

  .zj-tool-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .zj-tool-title {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  .zj-title-main {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
  }

  .zj-title-main > .zj-line-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .zj-tool-title h1 {
    font-size: 24px;
  }

  .zj-tool-title p {
    font-size: 14px;
  }

  .zj-calculator-card,
  .zj-content-card {
    border-radius: 16px;
  }

  .zj-calculator-card {
    padding: 16px;
  }

  .zj-calculator-head {
    display: grid;
    gap: 10px;
  }

  .zj-calculator-head h2 {
    font-size: 20px;
  }

  .zj-tool-content {
    grid-template-columns: 1fr;
  }
}

/* Tool calculator final polish */
.zj-calculator-card .zj-tool-body {
  overflow: visible;
}

.zj-tool-body form > a[data-role="button"],
.zj-tool-body form > .ui-btn,
.zj-tool-body form > p,
.zj-tool-body form > center {
  grid-column: 1 / -1;
  justify-self: start;
}

.zj-tool-body form > script,
.zj-tool-body form > style {
  display: none;
}

.zj-tool-body table input,
.zj-tool-body table select,
.zj-tool-body table textarea {
  margin: 0;
}

.zj-tool-body h1 {
  max-width: 780px;
  margin: 0 auto 14px;
  padding: 16px;
  color: var(--zj-text);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(14, 165, 233, 0.08));
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
}

.zj-tool-body .description,
.zj-tool-body .formula {
  width: 100%;
  max-width: 780px;
  margin: 0 auto 14px;
  padding: 14px 16px;
  color: var(--zj-muted);
  background: rgba(248, 250, 252, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 15px;
}

.zj-tool-body .input-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.95fr) minmax(220px, 1.05fr);
  gap: 10px 14px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto 14px;
  padding: 18px;
  background: rgba(248, 250, 252, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 18px;
}

.zj-tool-body .section-title,
.zj-tool-body .result-title,
.zj-tool-body .segment-title {
  color: var(--zj-text);
  font-weight: 900;
}

.zj-tool-body .section-title {
  grid-column: 1 / -1;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 16px;
}

.zj-tool-body #pipe-segments-container,
.zj-tool-body .pipe-segment,
.zj-tool-body .button-group,
.zj-tool-body .result-container,
.zj-tool-body .segment-results {
  grid-column: 1 / -1;
}

.zj-tool-body .pipe-segment {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
}

.zj-tool-body .segment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.zj-tool-body .input-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zj-tool-body .input-box {
  display: grid;
  gap: 6px;
}

.zj-tool-body .input-box label {
  color: #334155;
  font-weight: 800;
}

.zj-tool-body .button-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 780px;
  margin: 14px auto;
}

.zj-tool-body .button-group button {
  min-width: 128px;
}

.zj-tool-body .button-group .ui-btn {
  width: auto;
}

.zj-tool-body #reset,
.zj-tool-body .remove-segment {
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #d8e0ec !important;
  box-shadow: none !important;
}

.zj-tool-body button:disabled,
.zj-tool-body input[type="button"]:disabled,
.zj-tool-body input[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.zj-tool-body .result-container {
  width: 100%;
  max-width: 780px;
  margin: 14px auto;
  padding: 18px;
  color: #334155;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(236, 254, 255, 0.92));
  border: 1px solid rgba(96, 165, 250, 0.26);
  border-radius: 18px;
  text-align: center;
}

.zj-tool-body .result-value {
  margin: 8px 0;
  color: #2563eb;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.zj-tool-body .segment-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  text-align: left;
}

.dark-theme .zj-tool-body h3 {
  color: #e5e7eb;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(14, 165, 233, 0.12));
  border-color: rgba(96, 165, 250, 0.22);
}

.dark-theme .zj-tool-body h1,
.dark-theme .zj-tool-body .description,
.dark-theme .zj-tool-body .formula,
.dark-theme .zj-tool-body .input-section,
.dark-theme .zj-tool-body .pipe-segment {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(51, 65, 85, 0.86);
}

.dark-theme .zj-tool-body h1,
.dark-theme .zj-tool-body .section-title,
.dark-theme .zj-tool-body .result-title,
.dark-theme .zj-tool-body .segment-title {
  color: #e5e7eb;
}

.dark-theme .zj-tool-body .input-box label {
  color: #cbd5e1;
}

.dark-theme .zj-tool-body h4 {
  color: #bfdbfe;
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(96, 165, 250, 0.24);
}

.dark-theme .zj-tool-body form {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(51, 65, 85, 0.86);
}

.dark-theme .zj-tool-body .ui-block-a {
  color: #cbd5e1;
}

.dark-theme .zj-tool-body input[type="text"],
.dark-theme .zj-tool-body input[type="number"],
.dark-theme .zj-tool-body input[type="tel"],
.dark-theme .zj-tool-body input[type="email"],
.dark-theme .zj-tool-body input[type="password"],
.dark-theme .zj-tool-body select,
.dark-theme .zj-tool-body textarea {
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(71, 85, 105, 0.92);
}

.dark-theme .zj-tool-body a[data-role="button"],
.dark-theme .zj-tool-body .ui-btn {
  color: #bfdbfe !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}

.dark-theme .zj-tool-body #reset,
.dark-theme .zj-tool-body .remove-segment {
  color: #cbd5e1 !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(71, 85, 105, 0.86) !important;
}

.dark-theme .zj-tool-body .button-group .ui-btn:has(#reset) {
  color: #cbd5e1 !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(71, 85, 105, 0.86) !important;
}

.dark-theme .zj-tool-body div.ui-input-text {
  background: rgba(15, 23, 42, 0.94) !important;
  border-color: rgba(96, 165, 250, 0.36) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.dark-theme .zj-tool-body div.ui-input-text input[type="text"],
.dark-theme .zj-tool-body div.ui-input-text input[type="number"],
.dark-theme .zj-tool-body div.ui-input-text input[type="tel"],
.dark-theme .zj-tool-body div.ui-input-text input[type="email"],
.dark-theme .zj-tool-body div.ui-input-text input[type="password"] {
  color: #f8fafc !important;
}

.dark-theme .zj-tool-body div.ui-input-text .ui-input-clear {
  color: #bfdbfe !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(96, 165, 250, 0.34) !important;
}

.dark-theme .zj-tool-body .result-container {
  color: #cbd5e1;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.88));
  border-color: rgba(96, 165, 250, 0.24);
}

.dark-theme .zj-tool-body .result-value {
  color: #93c5fd;
}

.dark-theme .zj-tool-body .segment-result {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(71, 85, 105, 0.66);
}

.dark-theme .zj-tool-body hr {
  background: rgba(71, 85, 105, 0.66);
}

@media (max-width: 720px) {
  .zj-calculator-card .zj-tool-body {
    overflow: visible;
  }

  .zj-tool-body h3 {
    margin-bottom: 12px;
    padding: 12px 13px;
    font-size: 18px;
  }

  .zj-tool-body form {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 13px;
    border-radius: 15px;
  }

  .zj-tool-body h1 {
    padding: 13px;
    font-size: 19px;
  }

  .zj-tool-body .description,
  .zj-tool-body .formula,
  .zj-tool-body .input-section,
  .zj-tool-body .result-container {
    padding: 13px;
    border-radius: 15px;
  }

  .zj-tool-body .input-section {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .zj-tool-body .input-group {
    grid-template-columns: 1fr;
  }

  .zj-tool-body .segment-header,
  .zj-tool-body .segment-result {
    align-items: stretch;
    flex-direction: column;
  }

  .zj-tool-body .button-group {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .zj-tool-body .button-group .ui-btn,
  .zj-tool-body .button-group button {
    width: 100% !important;
  }

  .zj-tool-body .result-value {
    font-size: 26px;
  }

  .zj-tool-body .ui-block-a {
    min-height: 0;
    padding-top: 4px;
  }

  .zj-tool-body .ui-block-b {
    min-height: 44px;
  }

  .zj-tool-body div.ui-input-text {
    min-height: 50px;
    padding-left: 11px !important;
  }

  .zj-tool-body div.ui-input-text .ui-input-clear {
    min-width: 50px;
    padding: 0 10px !important;
  }

  .zj-tool-body h4,
  .zj-tool-body hr,
  .zj-tool-body form > a[data-role="button"],
  .zj-tool-body form > .ui-btn,
  .zj-tool-body form > p,
  .zj-tool-body form > center {
    grid-column: 1;
  }

  .zj-tool-body table,
  .zj-tool-body tbody,
  .zj-tool-body tr,
  .zj-tool-body td {
    display: block;
    width: 100% !important;
  }



  /* ===== 计算器表单：手机端 label + input 同行，输入框右对齐 ===== */
  .zj-tool-body form {
    display: block !important;
    grid-template-columns: none !important;
  }

  .zj-tool-body .ui-block-a,
  .zj-tool-body .ui-block-b {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    float: none !important;
    min-height: auto !important;
    vertical-align: top !important;
  }

  .zj-tool-body .ui-block-a {
    font-size: 13px !important;
    padding-right: 8px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .zj-tool-body .ui-block-b {
    flex: 1 !important;
    justify-content: flex-end !important;
  }

  .zj-tool-body .ui-block-b .ui-input-text {
    width: 100% !important;
    min-width: 0 !important;
  }

  .zj-tool-body .ui-block-b input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .zj-tool-body form > hr {
    margin: 8px 0 !important;
  }
}

  .zj-tool-body .ui-block-b input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .zj-tool-body form > hr {
    margin: 8px 0 !important;
  }
}

.zj-input-enhanced {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0 !important;
  align-items: stretch !important;
}
.zj-input-enhanced > input {
  border-radius: 14px 0 0 14px !important;
  border-right: 0 !important;
}

/* Clear button inside input area, right-aligned */
.zj-tool-body .zj-input-clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.zj-tool-body .zj-input-clear-btn:hover {
  color: #b42318 !important;
  background: #fff1f0 !important;
  border-color: #f5b8b2 !important;
}

.dark-theme .zj-tool-body .zj-input-clear-btn {
  color: #e5e7eb !important;
  background: rgba(30, 41, 59, 0.94) !important;
  border-color: rgba(71, 85, 105, 0.92) !important;
}

.zj-tool-body input[type="number"] {
  color-scheme: light;
}

.dark-theme .zj-tool-body input[type="number"] {
  color-scheme: dark;
}

.dark-theme .zj-tool-body .zj-input-clear-btn:hover {
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.34) !important;
  border-color: rgba(248, 113, 113, 0.48) !important;
}

@media (max-width: 720px) {
  .zj-tool-body .zj-input-clear-btn {
    width: 44px;
    min-width: 44px;
  }
}

/* Final dark-mode guards for list cards defined later in this stylesheet. */
.dark-theme .zj-tool-card {
  color: var(--zj-text);
  background: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.dark-theme .zj-tool-card:hover {
  background: #1a2233;
  border-color: rgba(96, 165, 250, 0.34);
}

.dark-theme .zj-tool-card .zj-tool-name,
.dark-theme .zj-tool-card .zj-tool-name * {
  color: var(--zj-text) !important;
}

.dark-theme .zj-tool-card .zj-tool-meta {
  color: var(--zj-muted);
}

.dark-theme .zj-news-list-card {
  background: var(--zj-card);
  border-color: var(--zj-border);
}

.dark-theme .zj-news-list-thumb {
  color: var(--zj-muted);
  background: #1e293b;
  border-color: var(--zj-border);
}

.dark-theme .zj-news-list-copy h3,
.dark-theme .zj-news-list-copy h3 * {
  color: var(--zj-text) !important;
}

/* Unified member login and registration pages. */
.zj-member-page .zj-member-shell {
  max-width: 1080px;
  margin: 0 auto;
}

.zj-member-page .zj-member-hero,
.zj-member-page .zj-member-card {
  border-radius: 12px;
}

.zj-member-page .zj-member-hero {
  background:
    linear-gradient(145deg, rgba(15, 127, 141, 0.08), transparent 52%),
    var(--zj-card);
}

.zj-member-card-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-member-card-head h2 {
  margin: 8px 0 5px;
}

.zj-member-card-head p {
  margin: 0;
  color: var(--zj-muted);
}

.zj-member-form input,
.zj-member-form select {
  background: var(--zj-card);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.zj-member-form input:focus,
.zj-member-form select:focus {
  outline: none;
  border-color: rgba(15, 127, 141, 0.72);
  box-shadow: 0 0 0 3px rgba(15, 127, 141, 0.12);
}

.zj-member-form .zj-primary-action {
  color: #fff !important;
  background: #0f7f8d !important;
  border: 1px solid #0f7f8d !important;
  box-shadow: none !important;
}

.zj-member-form .zj-primary-action:hover {
  background: #0b6975 !important;
  border-color: #0b6975 !important;
}

.zj-auth-tabs {
  border: 1px solid var(--zj-border);
}

.zj-auth-extra {
  display: grid;
  gap: 14px;
}

.zj-register-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-register-actions a,
.zj-auth-links a,
.zj-code-link a {
  color: var(--zj-primary);
  font-weight: 700;
}

.dark-theme .zj-member-hero,
.dark-theme .zj-member-card {
  background-color: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.dark-theme.zj-member-page .zj-member-hero {
  background:
    linear-gradient(145deg, rgba(20, 184, 166, 0.08), transparent 52%),
    var(--zj-card);
}

.dark-theme .zj-auth-tabs {
  background: #0f172a;
  border-color: var(--zj-border);
}

.dark-theme .zj-auth-tabs button {
  color: var(--zj-muted);
}

.dark-theme .zj-auth-tabs button.is-active {
  color: var(--zj-text);
  background: #1e293b;
  box-shadow: none;
}

.dark-theme .zj-member-form input,
.dark-theme .zj-member-form select {
  color: var(--zj-text);
  background: #0f172a;
  border-color: var(--zj-border);
}

.dark-theme .zj-member-form input::placeholder {
  color: #7f8ca3;
}

.dark-theme .zj-plain-action {
  color: var(--zj-text);
  background: #1e293b;
  border-color: var(--zj-border);
}

.dark-theme .zj-wechat-action {
  color: #d1fae5;
  background: rgba(6, 95, 70, 0.42);
  border-color: rgba(52, 211, 153, 0.26);
}

@media (max-width: 720px) {
  .zj-member-page .zj-member-hero {
    display: none;
  }

  .zj-member-page .zj-member-shell {
    padding-top: 8px;
  }
}

/* Redesigned member login/register pages, header remains unchanged. */
.zj-login-page,
.zj-register-page {
  background:
    radial-gradient(circle at 10% 16%, rgba(15, 127, 141, 0.14), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(37, 99, 235, 0.13), transparent 30%),
    linear-gradient(180deg, #f8fbfd 0%, #eef6f8 48%, #ffffff 100%);
}

.zj-login-page .zj-page,
.zj-register-page .zj-page {
  width: 100%;
  padding: 0 18px 46px;
}

.zj-member-page .zj-auth-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
  gap: 26px;
  align-items: center;
  width: min(100%, 1120px);
  max-width: 1120px;
  min-height: calc(100vh - 170px);
  margin: 0 auto;
  padding: 46px 0 32px;
}

.zj-member-page .zj-auth-layout::before {
  content: "";
  position: absolute;
  inset: 30px -24px auto;
  height: 360px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 127, 141, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.76), transparent);
}

.zj-member-page .zj-auth-visual,
.zj-member-page .zj-auth-card {
  position: relative;
  z-index: 1;
}

.zj-member-page .zj-auth-visual {
  min-height: 520px;
  padding: 44px;
  overflow: hidden;
  color: #102033;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.68)),
    radial-gradient(circle at 78% 20%, rgba(15, 127, 141, 0.16), transparent 32%);
  border: 1px solid rgba(226, 232, 240, 0.84);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.zj-member-page .zj-auth-visual::after {
  content: "";
  position: absolute;
  right: -78px;
  bottom: -92px;
  width: 260px;
  height: 260px;
  border: 44px solid rgba(15, 127, 141, 0.08);
  border-radius: 50%;
}

.zj-member-page .zj-auth-visual h1 {
  max-width: 640px;
  margin: 16px 0 14px;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.08;
  letter-spacing: 0;
}

.zj-member-page .zj-auth-visual p {
  max-width: 620px;
  margin: 0;
  color: #4b6075;
  font-size: 16px;
}

.zj-member-page .zj-auth-feature-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-top: 30px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}

.zj-member-page .zj-auth-feature-card h2 {
  margin: 0 0 12px;
  color: var(--zj-text);
  font-size: 18px;
}

.zj-member-page .zj-auth-feature-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-member-page .zj-auth-feature-card li {
  position: relative;
  padding-left: 24px;
  color: #41546b;
  font-weight: 700;
}

.zj-member-page .zj-auth-feature-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(15, 127, 141, 0.10);
}

.zj-member-page .zj-auth-card {
  padding: 28px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 24px;
  box-shadow: 0 26px 72px rgba(15, 23, 42, 0.13);
  backdrop-filter: blur(18px);
}

.zj-member-page .zj-auth-card .zj-member-card-head {
  margin-bottom: 20px;
  padding-bottom: 18px;
}

.zj-member-page .zj-auth-card .zj-member-card-head h2 {
  margin: 8px 0 6px;
  font-size: 28px;
  line-height: 1.16;
}

.zj-member-page .zj-access-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  color: var(--zj-primary);
  background: rgba(15, 127, 141, 0.10);
  border: 1px solid rgba(15, 127, 141, 0.16);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.zj-member-page .zj-auth-tabs {
  gap: 8px;
  padding: 6px;
  background: #edf5f7;
  border: 1px solid rgba(15, 127, 141, 0.10);
  border-radius: 16px;
}

.zj-member-page .zj-auth-tabs button {
  min-height: 44px;
  border-radius: 12px;
}

.zj-member-page .zj-auth-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  box-shadow: 0 12px 24px rgba(15, 127, 141, 0.22);
}

.zj-member-page .zj-member-form {
  gap: 15px;
}

.zj-member-page .zj-member-form label {
  gap: 8px;
}

.zj-member-page .zj-member-form label span {
  color: #2e4057;
  font-size: 14px;
}

.zj-member-page .zj-member-form input,
.zj-member-page .zj-member-form select {
  min-height: 48px;
  padding: 0 14px;
  background: #f9fcfd;
  border-color: #dbe7ee;
  border-radius: 14px;
}

.zj-member-page .zj-member-form input:focus,
.zj-member-page .zj-member-form select:focus {
  background: #fff;
  border-color: rgba(15, 127, 141, 0.78);
  box-shadow: 0 0 0 4px rgba(15, 127, 141, 0.11);
}

.zj-member-page .zj-inline-field {
  gap: 10px;
}

.zj-member-page .zj-code-link,
.zj-member-page .zj-plain-action {
  min-height: 48px;
  border-radius: 14px;
}

.zj-member-page .zj-form-note {
  margin: 0;
  padding: 11px 12px;
  background: #f4fafb;
  border: 1px solid #dcecef;
  border-radius: 12px;
  font-size: 13px;
}

.zj-member-page .zj-auth-extra {
  gap: 13px;
  margin-top: 20px;
  padding-top: 8px;
}

.zj-member-page .zj-wechat-action {
  min-height: 48px;
  color: #047857;
  background: #def7ec;
  border: 1px solid rgba(4, 120, 87, 0.12);
  border-radius: 14px;
}

.zj-member-page .zj-auth-links {
  justify-content: space-between;
  gap: 10px;
}

.zj-member-page .zj-auth-safe-note {
  margin: 18px 0 0;
  color: var(--zj-muted);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

.zj-member-page .zj-register-actions {
  min-height: 42px;
  padding: 0 12px;
  background: #f7fbfc;
  border: 1px solid #dfeaf0;
  border-radius: 14px;
}

.dark-theme.zj-login-page,
.dark-theme.zj-register-page {
  background:
    radial-gradient(circle at 10% 16%, rgba(20, 184, 166, 0.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(88, 183, 255, 0.13), transparent 30%),
    linear-gradient(180deg, #101522 0%, #0f172a 58%, #101522 100%);
}

.dark-theme.zj-member-page .zj-auth-visual,
.dark-theme.zj-member-page .zj-auth-card {
  background: rgba(21, 27, 42, 0.92);
  border-color: rgba(43, 51, 67, 0.95);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.30);
}

.dark-theme.zj-member-page .zj-auth-visual p,
.dark-theme.zj-member-page .zj-auth-feature-card li {
  color: var(--zj-muted);
}

.dark-theme.zj-member-page .zj-auth-feature-card,
.dark-theme.zj-member-page .zj-form-note,
.dark-theme.zj-member-page .zj-register-actions {
  background: rgba(15, 23, 42, 0.72);
  border-color: var(--zj-border);
}

.dark-theme.zj-member-page .zj-member-form label span {
  color: var(--zj-text);
}

.dark-theme.zj-member-page .zj-member-form input,
.dark-theme.zj-member-page .zj-member-form select {
  background: #0f172a;
  border-color: var(--zj-border);
}

@media (max-width: 860px) {
  .zj-member-page .zj-auth-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 24px 0 28px;
  }

  .zj-member-page .zj-auth-layout::before {
    inset: 0 -18px auto;
    height: 260px;
  }

  .zj-member-page .zj-auth-visual {
    display: flex;
    min-height: auto;
    padding: 28px;
  }

  .zj-member-page .zj-auth-visual h1 {
    font-size: 32px;
  }

  .zj-member-page .zj-auth-feature-card {
    display: none;
  }
}

@media (max-width: 720px) {
  .zj-member-page .zj-auth-visual {
    display: block;
  }

  .zj-member-page .zj-auth-card {
    padding: 20px;
    border-radius: 20px;
  }

  .zj-member-page .zj-auth-card .zj-member-card-head h2 {
    font-size: 24px;
  }
}

@media (max-width: 520px) {
  .zj-login-page .zj-page,
  .zj-register-page .zj-page {
    padding-right: 12px;
    padding-left: 12px;
  }

  .zj-member-page .zj-auth-visual {
    padding: 22px;
    border-radius: 20px;
  }

  .zj-member-page .zj-auth-visual h1 {
    font-size: 28px;
  }

  .zj-member-page .zj-member-stats {
    gap: 8px;
  }

  .zj-member-page .zj-auth-links {
    justify-content: center;
  }
}

/* Stitch-inspired authentication canvas; shared site header and footer stay intact. */
.zj-login-page,
.zj-register-page {
  background: #f5f8fe;
}

.zj-login-page .zj-page,
.zj-register-page .zj-page {
  position: relative;
  overflow: hidden;
  padding: 0 24px 56px;
  background-image:
    linear-gradient(rgba(0, 100, 114, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 100, 114, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #f8faff 0%, #eef5fb 100%);
  background-size: 40px 40px, 40px 40px, auto;
}

.zj-member-page .zj-auth-layout {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
  width: min(100%, 1280px);
  max-width: 1280px;
  min-height: calc(100vh - 150px);
  padding: 58px 0 46px;
}

.zj-member-page .zj-auth-layout::before,
.zj-member-page .zj-auth-visual::after {
  display: none;
}

.zj-member-page .zj-auth-visual {
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: 24px 0;
  overflow: visible;
  color: var(--zj-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.zj-member-page .zj-auth-visual h1 {
  max-width: 760px;
  margin: 26px 0 22px;
  font-size: clamp(38px, 4.3vw, 60px);
  font-weight: 800;
  line-height: 1.14;
}

.zj-member-page .zj-auth-title-primary {
  color: #006877;
}

.zj-member-page .zj-auth-title-secondary {
  color: #075fc2;
}

.zj-member-page .zj-auth-visual > p {
  max-width: 720px;
  color: #3e5269;
  font-size: 17px;
  line-height: 1.85;
}

.zj-member-page .zj-member-stats {
  gap: 14px;
  margin-top: 32px;
}

.zj-member-page .zj-member-stats span {
  min-height: 68px;
  padding: 0 24px;
  color: #35475b;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(190, 200, 203, 0.45);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.zj-member-page .zj-member-stats strong {
  color: #006877;
  font-size: 24px;
}

.zj-member-page .zj-member-stats span:nth-child(2) strong {
  color: #075fc2;
}

.zj-member-page .zj-member-stats span:nth-child(3) {
  color: #006472;
  background: rgba(163, 238, 255, 0.32);
  border-color: rgba(0, 104, 119, 0.28);
}

.zj-member-page .zj-auth-feature-card {
  max-width: 640px;
  margin-top: 42px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(190, 200, 203, 0.28);
  border-radius: 20px;
  box-shadow: none;
}

.zj-member-page .zj-auth-feature-card h2 {
  margin-bottom: 18px;
  font-size: 15px;
}

.zj-member-page .zj-auth-feature-card ul {
  gap: 15px;
}

.zj-member-page .zj-auth-feature-card li {
  padding-left: 26px;
  color: #3e5269;
  font-weight: 500;
}

.zj-member-page .zj-auth-feature-card li::before {
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.zj-member-page .zj-auth-feature-card li:nth-child(2)::before {
  background: #075fc2;
}

.zj-member-page .zj-auth-feature-card li:nth-child(3)::before {
  background: #4a5e58;
}

.zj-member-page .zj-auth-card {
  padding: 44px 48px;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.11);
  backdrop-filter: blur(20px);
}

.zj-member-page .zj-auth-card .zj-member-card-head {
  margin-bottom: 30px;
  padding: 0;
  border: 0;
}

.zj-member-page .zj-auth-card .zj-member-card-head h2 {
  margin: 16px 0 8px;
  font-size: 34px;
}

.zj-member-page .zj-auth-card .zj-member-card-head p {
  line-height: 1.65;
}

.zj-member-page .zj-access-kicker {
  min-height: 30px;
  padding: 0 14px;
  color: #006877;
  background: #e7efff;
  border: 0;
  font-weight: 600;
}

.zj-member-page .zj-auth-tabs {
  gap: 4px;
  margin-bottom: 34px;
  padding: 5px;
  background: #edf2ff;
  border: 0;
  border-radius: 16px;
}

.zj-member-page .zj-auth-tabs button {
  min-height: 50px;
  color: #3e484b;
  border-radius: 12px;
}

.zj-member-page .zj-auth-tabs button.is-active {
  color: #006472;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.06);
}

.zj-member-page .zj-member-form {
  gap: 21px;
}

.zj-member-page .zj-member-form label {
  gap: 10px;
}

.zj-member-page .zj-member-form label > span {
  color: #253141;
  font-size: 14px;
  font-weight: 700;
}

.zj-member-page .zj-member-form input,
.zj-member-page .zj-member-form select {
  min-height: 58px;
  padding: 0 16px;
  color: #101c2c;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(110, 121, 124, 0.28);
  border-radius: 15px;
}

.zj-member-page .zj-member-form input:focus,
.zj-member-page .zj-member-form select:focus {
  border-color: #006877;
  box-shadow: 0 0 0 4px rgba(0, 104, 119, 0.08);
}

.zj-member-page .zj-auth-input {
  position: relative;
}

.zj-member-page .zj-auth-input input {
  padding-left: 52px;
}

.zj-member-page .zj-auth-input-password input {
  padding-right: 52px;
}

.zj-member-page .zj-auth-input > i {
  position: absolute;
  z-index: 1;
  left: 20px;
  top: 50%;
  width: 17px;
  height: 17px;
  color: #6e797c;
  transform: translateY(-50%);
  pointer-events: none;
}

.zj-member-page .zj-auth-input-user > i::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.zj-member-page .zj-auth-input-user > i::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 15px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.zj-member-page .zj-auth-input-password > i::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 14px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.zj-member-page .zj-auth-input-password > i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 8px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.zj-member-page .zj-password-toggle {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #6e797c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transform: translateY(-50%);
  cursor: pointer;
}

.zj-member-page .zj-password-toggle::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 18px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50% / 60%;
}

.zj-member-page .zj-password-toggle::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.zj-member-page .zj-password-toggle.is-visible::after {
  background: transparent;
  border: 1px solid currentColor;
}

.zj-member-page .zj-auth-form-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: -2px;
}

.zj-member-page .zj-auth-form-links a {
  color: #006877;
  font-size: 14px;
  font-weight: 700;
}

.zj-member-page .zj-auth-form-links a:last-child {
  color: #3e484b;
}

.zj-member-page .zj-auth-form-links-single {
  justify-content: flex-end;
}

.zj-member-page .zj-member-form .zj-primary-action {
  min-height: 58px;
  margin-top: 2px;
  background: linear-gradient(135deg, #006877, #075fc2) !important;
  border: 0 !important;
  border-radius: 15px;
  box-shadow: 0 12px 25px rgba(0, 91, 191, 0.18) !important;
}

.zj-member-page .zj-auth-extra {
  gap: 20px;
  margin-top: 22px;
  padding-top: 0;
  border: 0;
}

.zj-member-page .zj-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #899397;
  font-size: 12px;
}

.zj-member-page .zj-auth-divider::before,
.zj-member-page .zj-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(110, 121, 124, 0.18);
}

.zj-member-page .zj-auth-divider span {
  flex: 0 0 auto;
}

.zj-member-page .zj-wechat-action {
  min-height: 58px;
  color: #00a94f;
  background: rgba(7, 193, 96, 0.10);
  border: 1px solid rgba(7, 193, 96, 0.24);
  border-radius: 15px;
}

.zj-member-page .zj-auth-safe-note {
  margin-top: 28px;
}

.zj-member-page .zj-register-card {
  padding-top: 36px;
  padding-bottom: 36px;
}

.zj-member-page .zj-register-card .zj-member-form {
  gap: 15px;
}

.zj-member-page .zj-register-card .zj-member-form input {
  min-height: 52px;
}

.dark-theme.zj-login-page,
.dark-theme.zj-register-page {
  background: #101522;
}

.dark-theme.zj-login-page .zj-page,
.dark-theme.zj-register-page .zj-page {
  background-image:
    linear-gradient(rgba(124, 211, 230, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 211, 230, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #111827 0%, #0f172a 100%);
}

.dark-theme.zj-member-page .zj-auth-visual,
.dark-theme.zj-member-page .zj-auth-card {
  border-color: rgba(51, 65, 85, 0.82);
}

.dark-theme.zj-member-page .zj-auth-visual {
  background: transparent;
  box-shadow: none;
}

.dark-theme.zj-member-page .zj-auth-visual > p,
.dark-theme.zj-member-page .zj-auth-feature-card li {
  color: var(--zj-muted);
}

.dark-theme.zj-member-page .zj-member-stats span,
.dark-theme.zj-member-page .zj-auth-feature-card {
  color: var(--zj-text);
  background: rgba(21, 27, 42, 0.72);
  border-color: var(--zj-border);
}

.dark-theme.zj-member-page .zj-auth-card {
  background: rgba(21, 27, 42, 0.94);
}

.dark-theme.zj-member-page .zj-auth-tabs {
  background: #0f172a;
}

.dark-theme.zj-member-page .zj-auth-tabs button.is-active {
  color: #7cd3e6;
  background: #253141;
}

.dark-theme.zj-member-page .zj-member-form label > span,
.dark-theme.zj-member-page .zj-auth-form-links a:last-child {
  color: var(--zj-text);
}

.dark-theme.zj-member-page .zj-member-form input,
.dark-theme.zj-member-page .zj-member-form select {
  color: var(--zj-text);
}

.dark-theme.zj-member-page .zj-member-form input::placeholder {
  color: #7f8ca3;
}

.dark-theme.zj-member-page .zj-auth-divider {
  color: var(--zj-muted);
}

@media (max-width: 980px) {
  .zj-member-page .zj-auth-layout {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
    gap: 34px;
    padding-top: 38px;
  }

  .zj-member-page .zj-auth-visual h1 {
    font-size: 38px;
  }

  .zj-member-page .zj-member-stats span {
    min-height: 54px;
    padding: 0 16px;
  }

  .zj-member-page .zj-auth-feature-card {
    margin-top: 28px;
    padding: 22px;
  }

  .zj-member-page .zj-auth-card {
    padding: 34px;
  }
}

@media (max-width: 760px) {
  .zj-login-page .zj-page,
  .zj-register-page .zj-page {
    padding: 16px 14px 36px;
  }

  .zj-member-page .zj-auth-layout {
    grid-template-columns: 1fr;
    width: min(100%, 520px);
    padding: 12px 0 24px;
  }

  .zj-member-page .zj-auth-visual {
    display: none !important;
  }

  .zj-member-page .zj-auth-card {
    padding: 28px 22px;
    border-radius: 22px;
  }

  .zj-member-page .zj-auth-card .zj-member-card-head h2 {
    font-size: 28px;
  }
}

@media (max-width: 420px) {
  .zj-member-page .zj-auth-card {
    padding: 24px 17px;
  }

  .zj-member-page .zj-auth-tabs button {
    font-size: 13px;
  }

  .zj-member-page .zj-auth-form-links {
    gap: 10px;
  }
}

/* Compact authentication layout for normal and low-height screens. */
.zj-login-page .zj-page,
.zj-register-page .zj-page,
.dark-theme.zj-login-page .zj-page,
.dark-theme.zj-register-page .zj-page {
  overflow: visible;
  background: transparent;
  background-image: none;
}

.zj-member-page .zj-auth-layout {
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: clamp(42px, 5vw, 72px);
  width: min(100%, 1200px);
  max-width: 1200px;
  min-height: 0;
  padding: 32px 0 26px;
}

.zj-member-page .zj-auth-visual {
  padding: 12px 0;
}

.zj-member-page .zj-auth-visual h1 {
  margin: 18px 0 16px;
  font-size: clamp(38px, 3.5vw, 50px);
  line-height: 1.12;
}

.zj-member-page .zj-auth-visual > p {
  max-width: 650px;
  font-size: 15px;
  line-height: 1.75;
}

.zj-member-page .zj-member-stats {
  gap: 10px;
  margin-top: 24px;
}

.zj-member-page .zj-member-stats span {
  min-height: 52px;
  padding: 0 18px;
  border-radius: 10px;
}

.zj-member-page .zj-member-stats strong {
  font-size: 20px;
}

.zj-member-page .zj-auth-card,
.zj-member-page .zj-register-card {
  padding: 27px 30px;
  border-radius: 20px;
  backdrop-filter: none;
}

.zj-member-page .zj-auth-card .zj-member-card-head {
  margin-bottom: 18px;
}

.zj-member-page .zj-auth-card .zj-member-card-head h2 {
  margin: 10px 0 5px;
  font-size: 28px;
}

.zj-member-page .zj-auth-card .zj-member-card-head p {
  font-size: 13px;
  line-height: 1.55;
}

.zj-member-page .zj-access-kicker {
  min-height: 25px;
  padding: 0 11px;
  font-size: 12px;
}

.zj-member-page .zj-auth-tabs {
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 12px;
}

.zj-member-page .zj-auth-tabs button {
  min-height: 40px;
  border-radius: 9px;
  font-size: 13px;
}

.zj-member-page .zj-auth-tabs .zj-auth-register-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  color: #3e484b;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 900;
  transition: color 160ms ease, background-color 160ms ease;
}

.zj-member-page .zj-auth-tabs .zj-auth-register-tab:hover {
  color: #006877;
  background: rgba(255, 255, 255, 0.52);
}

.dark-theme.zj-member-page .zj-auth-tabs .zj-auth-register-tab {
  color: var(--zj-muted);
}

.zj-member-page .zj-member-form,
.zj-member-page .zj-register-card .zj-member-form {
  gap: 12px;
}

.zj-member-page .zj-member-form label {
  gap: 5px;
}

.zj-member-page .zj-member-form label > span {
  font-size: 13px;
}

.zj-member-page .zj-member-form input,
.zj-member-page .zj-member-form select,
.zj-member-page .zj-register-card .zj-member-form input {
  min-height: 46px;
  border-radius: 10px;
}

.zj-member-page .zj-member-form .zj-primary-action {
  min-height: 48px;
  border-radius: 10px;
}

.zj-member-page .zj-auth-extra {
  gap: 12px;
  margin-top: 15px;
}

.zj-member-page .zj-wechat-action {
  min-height: 46px;
  border-radius: 10px;
}

.zj-member-page .zj-auth-safe-note {
  display: none;
}

.zj-member-page .zj-register-actions {
  min-height: 36px;
  border-radius: 10px;
}

@media (min-width: 761px) and (max-height: 780px) {
  .zj-member-page .zj-auth-layout {
    padding-top: 8px;
    padding-bottom: 18px;
  }

  .zj-member-page .zj-auth-visual h1 {
    font-size: 42px;
  }

  .zj-member-page .zj-auth-card,
  .zj-member-page .zj-register-card {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}

@media (max-width: 760px) {
  .zj-login-page .zj-page,
  .zj-register-page .zj-page {
    padding: 16px 14px 32px;
  }

  .zj-member-page .zj-auth-layout {
    grid-template-columns: 1fr;
    width: min(100%, 500px);
    padding: 10px 0 22px;
  }

  .zj-member-page .zj-auth-visual {
    display: none !important;
  }

  .zj-member-page .zj-auth-card,
  .zj-member-page .zj-register-card {
    padding: 24px 20px;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  .zj-member-page .zj-auth-card,
  .zj-member-page .zj-register-card {
    padding: 22px 16px;
  }
}

@media (max-width: 640px) {
  .zj-submit-link.zj-member-trigger {
    min-width: 0;
    max-width: 132px;
    padding-right: 10px;
  }

  .zj-member-trigger-name {
    max-width: 48px;
  }

  .zj-member-popover {
    position: fixed;
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}

/* Member center dashboard alignment and tool-category shortcuts. */
.zj-cp-page .zj-page {
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  padding: 28px 0 52px;
}

.zj-cp-page .zj-member-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 8px;
}

.zj-cp-page .zj-member-profile {
  min-width: 0;
  gap: 18px;
}

.zj-cp-page .zj-member-profile img {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 8px;
}

.zj-cp-page .zj-member-profile > div {
  min-width: 0;
}

.zj-cp-page .zj-member-dashboard h1 {
  margin: 5px 0 2px;
  overflow: hidden;
  font-size: 28px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-cp-page .zj-member-dashboard p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

.zj-cp-page .zj-member-actions {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 9px;
  align-items: center;
}

.zj-cp-page .zj-member-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zj-cp-page .zj-member-actions .zj-primary-action {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6d5dfc);
  border: 1px solid transparent;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.20);
  white-space: nowrap !important;
}

.zj-cp-page .zj-member-actions .zj-primary-action:hover {
  background: linear-gradient(135deg, #4338ca, #5b4de8);
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.28);
  transform: translateY(-1px);
}

.zj-cp-page .zj-member-actions .zj-plain-action {
  color: var(--zj-text);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.zj-cp-page .zj-member-actions .zj-plain-action:hover {
  color: var(--zj-primary);
  background: rgba(79, 70, 229, 0.06);
  border-color: rgba(79, 70, 229, 0.24);
  transform: translateY(-1px);
}

.dark-theme.zj-cp-page .zj-member-actions .zj-plain-action {
  color: var(--zj-text);
  background: #0f172a;
  border-color: var(--zj-border);
  box-shadow: none;
}

.zj-cp-page .zj-member-metrics {
  gap: 14px;
  margin: 16px 0;
}

.zj-cp-page .zj-member-metrics > div {
  min-height: 104px;
  padding: 18px 20px;
  border-radius: 8px;
}

.zj-cp-page .zj-member-metrics strong {
  margin-top: 7px;
  font-size: 22px;
  line-height: 1.3;
}

.zj-cp-page .zj-member-grid {
  gap: 16px;
}

.zj-cp-page .zj-member-grid > .zj-member-card {
  padding: 22px;
  border-radius: 8px;
}

.zj-cp-page .zj-member-grid h2 {
  margin-bottom: 14px;
  font-size: 18px;
}

.zj-cp-page .zj-member-list {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
}

.zj-cp-page .zj-member-list dt,
.zj-cp-page .zj-member-list dd {
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--zj-border);
}

.zj-cp-page .zj-member-list dd {
  overflow-wrap: anywhere;
}

.zj-cp-page .zj-member-menu {
  gap: 9px;
}

.zj-cp-page .zj-member-menu a {
  min-height: 42px;
  border-radius: 6px;
}

.zj-member-category-section {
  margin-top: 20px;
}

.zj-member-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.zj-member-section-head h2 {
  margin: 0;
  color: var(--zj-text);
  font-size: 20px;
  line-height: 1.35;
}

.zj-member-section-head p {
  margin: 3px 0 0;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-member-section-head > a {
  flex: 0 0 auto;
  color: var(--zj-primary);
  font-size: 13px;
  font-weight: 800;
}

.zj-member-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.zj-member-category-grid > a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 70px;
  padding: 12px 14px;
  color: var(--zj-text);
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zj-member-category-grid > a:hover {
  border-color: rgba(79, 70, 229, 0.3);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.zj-member-category-grid .zj-line-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.zj-member-category-grid strong {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark-theme.zj-cp-page .zj-member-category-grid > a {
  background: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

@media (max-width: 900px) {
  .zj-cp-page .zj-member-dashboard {
    grid-template-columns: 1fr;
  }

  .zj-cp-page .zj-member-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zj-cp-page .zj-member-actions a {
    width: 100%;
  }

  .zj-cp-page .zj-member-grid {
    grid-template-columns: 1fr;
  }

  .zj-member-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .zj-cp-page .zj-page {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    padding-top: 0;
  }

  .zj-cp-page .zj-member-dashboard {
    padding: 18px;
  }

  .zj-cp-page .zj-member-profile {
    align-items: center;
    flex-direction: row;
  }

  .zj-cp-page .zj-member-profile img {
    width: 58px;
    height: 58px;
  }

  .zj-cp-page .zj-member-dashboard h1 {
    font-size: 22px;
  }

  .zj-cp-page .zj-member-actions {
    grid-template-columns: 1fr;
  }

  .zj-cp-page .zj-member-metrics > div {
    min-height: 88px;
    padding: 15px;
  }

  .zj-cp-page .zj-member-grid > .zj-member-card {
    padding: 18px;
  }

  .zj-member-category-grid {
    gap: 8px;
  }

  .zj-member-category-grid > a {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    min-height: 62px;
    padding: 10px;
  }

  .zj-member-category-grid .zj-line-icon {
    width: 36px;
    height: 36px;
  }
}

/* Modern shell for legacy EmpireCMS member templates. */
.zj-member-legacy-page,
.zj-member-notice-page {
  background:
    radial-gradient(circle at 10% 16%, rgba(124, 58, 237, 0.10), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(37, 99, 235, 0.12), transparent 32%),
    linear-gradient(180deg, #f8fbfd 0%, #eef6f8 48%, #ffffff 100%);
}

.zj-member-legacy-page .zj-page,
.zj-member-notice-page .zj-page {
  width: min(100% - var(--zj-shell-gutter), var(--zj-shell-width));
  max-width: var(--zj-shell-width);
  margin: 0 auto;
  padding: 25px 0 44px;
}

.zj-member-legacy-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.09);
  backdrop-filter: blur(18px);
}

.zj-member-legacy-hero h1 {
  margin: 12px 0 6px;
  color: var(--zj-text);
  font-size: 30px;
  line-height: 1.16;
}

.zj-member-legacy-hero p {
  margin: 0;
  color: var(--zj-muted);
}

.zj-member-legacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.zj-member-legacy-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.zj-member-side-nav {
  position: sticky;
  top: 78px;
  padding: 18px;
}

.zj-member-side-nav h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.zj-member-side-nav nav {
  display: grid;
  gap: 8px;
}

.zj-member-side-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--zj-muted);
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  font-weight: 800;
}

.zj-member-side-nav a:hover,
.zj-member-side-nav a.is-active {
  color: var(--zj-primary);
  background: rgba(15, 127, 141, 0.08);
  border-color: rgba(15, 127, 141, 0.22);
}

.zj-member-legacy-content {
  min-width: 0;
  padding: 22px;
  overflow-x: auto;
}

.zj-member-crumb {
  margin: -2px 0 16px;
  padding: 10px 12px;
  color: var(--zj-muted);
  background: #f8fafc;
  border: 1px solid var(--zj-border);
  border-radius: 10px;
  font-size: 13px;
}

.zj-member-crumb a {
  color: var(--zj-primary);
  font-weight: 800;
}

.zj-member-legacy-content .h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--zj-text);
  font-size: 22px;
  line-height: 1.3;
}

.zj-member-legacy-content .h1 a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: var(--zj-primary);
  background: rgba(15, 127, 141, 0.08);
  border: 1px solid rgba(15, 127, 141, 0.18);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.zj-member-legacy-content table {
  width: 100% !important;
  margin: 0 0 16px;
  color: var(--zj-text);
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.zj-member-legacy-content .tableborder {
  background: var(--zj-card) !important;
  border: 1px solid var(--zj-border) !important;
  border-radius: 12px;
  overflow: hidden;
}

.zj-member-legacy-content td,
.zj-member-legacy-content th {
  padding: 11px 12px !important;
  background: var(--zj-card) !important;
  border-bottom: 1px solid var(--zj-border);
  font-size: 14px;
  line-height: 1.65;
  vertical-align: middle;
}

.zj-member-legacy-content tr:last-child td {
  border-bottom: 0;
}

.zj-member-legacy-content tr.header td,
.zj-member-legacy-content .header td,
.zj-member-legacy-content tr.h2 td,
.zj-member-legacy-content .h2 td {
  color: #213047;
  background: #eef6f8 !important;
  font-weight: 800;
}

.zj-member-legacy-content input[type="text"],
.zj-member-legacy-content input[type="password"],
.zj-member-legacy-content input[type="email"],
.zj-member-legacy-content input[type="file"],
.zj-member-legacy-content select,
.zj-member-legacy-content textarea {
  max-width: 100%;
  min-height: 40px;
  padding: 0 11px;
  color: var(--zj-text);
  background: #f9fcfd;
  border: 1px solid #dbe7ee;
  border-radius: 10px;
  font: inherit;
}

.zj-member-legacy-content textarea {
  min-height: 108px;
  padding-top: 9px;
}

.zj-member-legacy-content input:focus,
.zj-member-legacy-content select:focus,
.zj-member-legacy-content textarea:focus {
  outline: none;
  background: #fff;
  border-color: rgba(15, 127, 141, 0.76);
  box-shadow: 0 0 0 3px rgba(15, 127, 141, 0.11);
}

.zj-member-legacy-content input[type="submit"],
.zj-member-legacy-content input[type="button"],
.zj-member-legacy-content button {
  min-height: 40px;
  padding: 0 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--zj-primary), var(--zj-primary-2));
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.zj-member-legacy-content input[type="checkbox"],
.zj-member-legacy-content input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--zj-primary);
}

.zj-member-legacy-content a {
  color: var(--zj-primary);
}

.zj-member-legacy-content img {
  vertical-align: middle;
}

.zj-message-panel {
  margin-top: 70px;
}

.zj-message-text {
  padding: 12px 0 2px;
  color: var(--zj-text);
  font-size: 16px;
}

.dark-theme.zj-member-legacy-page,
.dark-theme.zj-member-notice-page {
  background:
    radial-gradient(circle at 10% 16%, rgba(124, 58, 237, 0.14), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(37, 99, 235, 0.15), transparent 32%),
    linear-gradient(180deg, #101522 0%, #0f172a 58%, #101522 100%);
}

.dark-theme .zj-member-legacy-hero,
.dark-theme .zj-member-side-nav,
.dark-theme .zj-member-legacy-content {
  background: rgba(21, 27, 42, 0.92);
  border-color: var(--zj-border);
}

.dark-theme .zj-member-side-nav a,
.dark-theme .zj-member-crumb,
.dark-theme .zj-member-legacy-content input[type="text"],
.dark-theme .zj-member-legacy-content input[type="password"],
.dark-theme .zj-member-legacy-content input[type="email"],
.dark-theme .zj-member-legacy-content input[type="file"],
.dark-theme .zj-member-legacy-content select,
.dark-theme .zj-member-legacy-content textarea {
  color: var(--zj-text);
  background: #0f172a;
  border-color: var(--zj-border);
}

.dark-theme .zj-member-legacy-content .tableborder,
.dark-theme .zj-member-legacy-content td,
.dark-theme .zj-member-legacy-content th {
  background: var(--zj-card) !important;
  border-color: var(--zj-border);
}

.dark-theme .zj-member-legacy-content tr.header td,
.dark-theme .zj-member-legacy-content .header td,
.dark-theme .zj-member-legacy-content tr.h2 td,
.dark-theme .zj-member-legacy-content .h2 td {
  color: var(--zj-text);
  background: #172033 !important;
}

@media (max-width: 860px) {
  .zj-member-legacy-page .zj-page,
  .zj-member-notice-page .zj-page {
    width: min(100% - var(--zj-shell-gutter-sm), var(--zj-shell-width));
    padding-top: 16px;
  }

  .zj-member-legacy-hero {
    display: grid;
    padding: 20px;
  }

  .zj-member-legacy-hero h1 {
    font-size: 25px;
  }

  /* 用户名不换行，空间不足时自动缩小 */
  .zj-member-legacy-hero p {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
  }

  .zj-member-legacy-actions {
    justify-content: flex-start;
  }

  .zj-member-legacy-shell {
    grid-template-columns: 1fr;
  }

  .zj-member-side-nav {
    position: static;
    padding: 0 !important;
  }

  .zj-member-side-nav nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  /* 账号功能卡片容器 */
  .zj-member-side-nav {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* 每行最多4个，超过自动换行 */
  .zj-member-side-nav nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* 每个按钮：紧凑美观的小方块 */
  .zj-member-side-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 3px !important;
    border-radius: 10px !important;
    border: 1px solid var(--zj-border) !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: all 0.15s ease !important;
  }

  .zj-member-side-nav a:active,
  .zj-member-side-nav a.is-active {
    background: rgba(15, 127, 141, 0.08) !important;
    border-color: rgba(15, 127, 141, 0.3) !important;
    color: #0e7490 !important;
    box-shadow: 0 2px 8px rgba(15, 127, 141, 0.1) !important;
  }

  .zj-member-legacy-content {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .zj-member-legacy-content td,
  .zj-member-legacy-content th {
    padding: 10px !important;
  }

  .zj-message-panel {
    margin-top: 24px;
  }
}

/* Member shelf and the shared request / error report page. */
.zj-shelf-page .zj-page,
.zj-request-page .zj-page {
  padding: 28px 0 52px;
}

.zj-shelf-head,
.zj-request-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-shelf-head h1,
.zj-request-head h1 {
  margin: 5px 0 3px;
  color: var(--zj-text);
  font-size: 30px;
  line-height: 1.25;
}

.zj-shelf-head p,
.zj-request-head p {
  margin: 0;
  color: var(--zj-muted);
}

.zj-shelf-head .zj-plain-action,
.zj-request-head .zj-plain-action {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
}

.zj-shelf-panel {
  margin-top: 24px;
}

.zj-shelf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.zj-shelf-grid .zj-home-tool-pill {
  min-height: 68px;
  padding: 10px 12px;
  background: var(--zj-card);
  border-color: var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.zj-shelf-grid .zj-empty-note {
  grid-column: 1 / -1;
  min-height: 120px;
  padding: 34px;
  text-align: center;
  background: var(--zj-card);
  border: 1px dashed var(--zj-border);
  border-radius: 8px;
}

.zj-request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

.zj-request-form {
  padding: 24px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.zj-request-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 20px;
  padding: 5px;
  background: var(--zj-soft);
  border: 0;
  border-radius: 8px;
}

.zj-request-types legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.zj-request-types label {
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.zj-request-types input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zj-request-types span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  color: var(--zj-muted);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
}

.zj-request-types input:checked + span {
  color: var(--zj-primary);
  background: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.zj-request-types input:focus-visible + span {
  outline: 2px solid var(--zj-primary-2);
  outline-offset: 2px;
}

.zj-request-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.zj-request-fields > label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--zj-text);
  font-size: 13px;
  font-weight: 800;
}

.zj-request-fields > label > span:first-child em {
  color: var(--zj-muted);
  font-style: normal;
  font-weight: 500;
}

.zj-request-fields .zj-request-wide {
  grid-column: 1 / -1;
}

.zj-request-fields input,
.zj-request-fields textarea {
  width: 100%;
  min-width: 0;
  color: var(--zj-text);
  background: var(--zj-bg);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  outline: 0;
  font: inherit;
  font-weight: 500;
}

.zj-request-fields input {
  height: 44px;
  padding: 0 12px;
}

.zj-request-fields textarea {
  min-height: 170px;
  padding: 11px 12px;
  line-height: 1.7;
  resize: vertical;
}

.zj-request-fields input:focus,
.zj-request-fields textarea:focus {
  background: var(--zj-card);
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.zj-request-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 9px;
}

.zj-request-code .zj-code-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  overflow: hidden;
  color: var(--zj-primary);
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  font-weight: 800;
}

.zj-request-code .zj-code-link img {
  display: block;
  max-width: 100%;
  height: 42px;
}

.zj-request-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.zj-request-actions button {
  min-width: 110px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.zj-request-actions .zj-primary-action {
  background: linear-gradient(135deg, #4f46e5, #6d5dfc);
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.2);
}

.zj-request-actions .zj-plain-action {
  border: 1px solid var(--zj-border);
}

.zj-request-aside {
  display: grid;
  gap: 12px;
}

.zj-request-aside section {
  padding: 20px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.zj-request-aside h2 {
  margin: 0 0 10px;
  color: var(--zj-text);
  font-size: 17px;
}

.zj-request-aside ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: var(--zj-muted);
}

.zj-request-aside li::marker {
  color: var(--zj-primary-2);
}

.zj-request-aside p {
  margin: 0;
  color: var(--zj-muted);
  line-height: 1.8;
}

.dark-theme.zj-shelf-page .zj-shelf-grid .zj-home-tool-pill,
.dark-theme.zj-shelf-page .zj-shelf-grid .zj-empty-note,
.dark-theme.zj-request-page .zj-request-form,
.dark-theme.zj-request-page .zj-request-aside section {
  background: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.dark-theme.zj-request-page .zj-request-fields input,
.dark-theme.zj-request-page .zj-request-fields textarea {
  background: #0f172a;
}

.dark-theme.zj-request-page .zj-request-types,
.dark-theme.zj-request-page .zj-request-code .zj-code-link,
.dark-theme.zj-request-page .zj-plain-action {
  background: rgba(30, 41, 59, 0.86);
}

@media (max-width: 860px) {
  .zj-request-layout {
    grid-template-columns: 1fr;
  }

  .zj-request-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .zj-shelf-page .zj-page,
  .zj-request-page .zj-page {
    padding-top: 16px;
  }

  .zj-shelf-head,
  .zj-request-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .zj-shelf-head h1,
  .zj-request-head h1 {
    font-size: 24px;
  }

  .zj-shelf-grid,
  .zj-request-fields,
  .zj-request-aside {
    grid-template-columns: 1fr;
  }

  .zj-request-form {
    padding: 18px;
  }

  .zj-request-fields .zj-request-wide {
    grid-column: auto;
  }

  .zj-request-actions button {
    flex: 1;
    min-width: 0;
  }
}

/* Unified member-area command buttons. */
.zj-member-page .zj-member-legacy-actions .zj-primary-action,
.zj-member-page .zj-member-legacy-actions .zj-secondary-action,
.zj-member-page .zj-member-legacy-actions .zj-plain-action,
.zj-member-page .zj-access-actions .zj-primary-action,
.zj-member-page .zj-access-actions .zj-secondary-action,
.zj-member-page .zj-access-actions .zj-plain-action,
.zj-member-page .zj-member-form .zj-primary-action,
.zj-member-page .zj-member-form .zj-secondary-action,
.zj-member-page .zj-member-form .zj-plain-action,
.zj-member-legacy-page .zj-member-legacy-content input[type="submit"],
.zj-member-legacy-page .zj-member-legacy-content input[type="button"],
.zj-member-legacy-page .zj-member-legacy-content input[type="reset"],
.zj-member-legacy-page .zj-member-legacy-content button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zj-member-page .zj-member-legacy-actions .zj-primary-action,
.zj-member-page .zj-access-actions .zj-primary-action,
.zj-member-page .zj-member-form .zj-primary-action,
.zj-member-legacy-page .zj-member-legacy-content input[type="submit"] {
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #6d5dfc) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.20) !important;
}

.zj-member-page .zj-member-legacy-actions .zj-primary-action:hover,
.zj-member-page .zj-access-actions .zj-primary-action:hover,
.zj-member-page .zj-member-form .zj-primary-action:hover,
.zj-member-legacy-page .zj-member-legacy-content input[type="submit"]:hover {
  background: linear-gradient(135deg, #4338ca, #5b4de8) !important;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.28) !important;
  transform: translateY(-1px);
}

.zj-member-page .zj-member-legacy-actions .zj-secondary-action,
.zj-member-page .zj-member-legacy-actions .zj-plain-action,
.zj-member-page .zj-access-actions .zj-secondary-action,
.zj-member-page .zj-access-actions .zj-plain-action,
.zj-member-page .zj-member-form .zj-secondary-action,
.zj-member-page .zj-member-form .zj-plain-action,
.zj-member-legacy-page .zj-member-legacy-content input[type="button"],
.zj-member-legacy-page .zj-member-legacy-content input[type="reset"],
.zj-member-legacy-page .zj-member-legacy-content button[type="button"],
.zj-member-legacy-page .zj-member-legacy-content button[type="reset"] {
  color: var(--zj-text) !important;
  background: var(--zj-card) !important;
  border: 1px solid var(--zj-border) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.zj-member-page .zj-member-legacy-actions .zj-secondary-action:hover,
.zj-member-page .zj-member-legacy-actions .zj-plain-action:hover,
.zj-member-page .zj-access-actions .zj-secondary-action:hover,
.zj-member-page .zj-access-actions .zj-plain-action:hover,
.zj-member-page .zj-member-form .zj-secondary-action:hover,
.zj-member-page .zj-member-form .zj-plain-action:hover,
.zj-member-legacy-page .zj-member-legacy-content input[type="button"]:hover,
.zj-member-legacy-page .zj-member-legacy-content input[type="reset"]:hover,
.zj-member-legacy-page .zj-member-legacy-content button[type="button"]:hover,
.zj-member-legacy-page .zj-member-legacy-content button[type="reset"]:hover {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.06) !important;
  border-color: rgba(79, 70, 229, 0.26) !important;
  transform: translateY(-1px);
}

.zj-member-page .zj-member-form .zj-full-action {
  width: 100%;
  min-height: 48px;
}

.zj-member-legacy-page .zj-member-legacy-content input[type="submit"][value*="删除"] {
  color: #b42318 !important;
  background: #fff5f4 !important;
  border: 1px solid #f5c4bf !important;
  box-shadow: none !important;
}

.zj-member-legacy-page .zj-member-legacy-content input[type="submit"][value*="删除"]:hover {
  color: #912018 !important;
  background: #fee9e7 !important;
  border-color: #eda59e !important;
  box-shadow: none !important;
}

.zj-member-page button:disabled,
.zj-member-page input:disabled,
.zj-member-page .zj-primary-action[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.dark-theme.zj-member-page .zj-member-legacy-actions .zj-secondary-action,
.dark-theme.zj-member-page .zj-member-legacy-actions .zj-plain-action,
.dark-theme.zj-member-page .zj-access-actions .zj-secondary-action,
.dark-theme.zj-member-page .zj-access-actions .zj-plain-action,
.dark-theme.zj-member-page .zj-member-form .zj-secondary-action,
.dark-theme.zj-member-page .zj-member-form .zj-plain-action,
.dark-theme.zj-member-legacy-page .zj-member-legacy-content input[type="button"],
.dark-theme.zj-member-legacy-page .zj-member-legacy-content input[type="reset"],
.dark-theme.zj-member-legacy-page .zj-member-legacy-content button[type="button"],
.dark-theme.zj-member-legacy-page .zj-member-legacy-content button[type="reset"] {
  color: var(--zj-text) !important;
  background: #0f172a !important;
  border-color: var(--zj-border) !important;
  box-shadow: none !important;
}

.dark-theme.zj-member-legacy-page .zj-member-legacy-content input[type="submit"][value*="删除"] {
  color: #fca5a5 !important;
  background: rgba(127, 29, 29, 0.22) !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
}

@media (max-width: 640px) {
  .zj-member-page .zj-member-legacy-actions > a {
    flex: 1 1 auto;
  }
}

/* Annual VIP purchase page. */
.zj-buygroup-page .zj-page {
  padding: 30px 0 52px;
}

.zj-vip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 32px;
  align-items: center;
  padding: 10px 0 28px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-vip-hero-copy h1 {
  margin: 7px 0 8px;
  color: var(--zj-text);
  font-size: 34px;
  line-height: 1.2;
}

.zj-vip-hero-copy > p {
  max-width: 720px;
  margin: 0;
  color: var(--zj-muted);
  line-height: 1.8;
}

.zj-vip-current {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 18px;
}

.zj-vip-current span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-vip-current strong {
  color: var(--zj-text);
}

.zj-vip-hero-price {
  display: grid;
  justify-items: end;
  padding-left: 28px;
  border-left: 1px solid var(--zj-border);
}

.zj-vip-hero-price > span {
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-vip-hero-price > strong {
  color: #4f46e5;
  font-size: 46px;
  line-height: 1.15;
}

.zj-vip-hero-price > strong small {
  margin-right: 4px;
  font-size: 20px;
}

.zj-vip-hero-price > em {
  color: var(--zj-muted);
  font-size: 13px;
  font-style: normal;
}

.zj-vip-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0 24px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.zj-vip-facts > div {
  display: grid;
  gap: 3px;
  min-height: 82px;
  padding: 16px 20px;
  border-right: 1px solid var(--zj-border);
}

.zj-vip-facts > div:last-child {
  border-right: 0;
}

.zj-vip-facts span {
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-vip-facts strong {
  color: var(--zj-text);
  font-size: 20px;
}

.zj-vip-purchase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  align-items: start;
}

.zj-vip-main {
  display: grid;
  gap: 26px;
  min-width: 0;
}

.zj-vip-section {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-vip-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.zj-vip-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zj-vip-section-head > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.zj-vip-section-head h2 {
  margin: 0;
  color: var(--zj-text);
  font-size: 20px;
}

.zj-vip-section-head > p {
  margin: 0;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-buygroup-page .zj-plan-list {
  gap: 12px;
}

.zj-buygroup-page .zj-plan-card {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px 20px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.zj-buygroup-page .zj-plan-card:hover {
  border-color: rgba(79, 70, 229, 0.30);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.zj-buygroup-page .zj-plan-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zj-plan-select {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
}

.zj-plan-select::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #4f46e5;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 160ms ease, transform 160ms ease;
}

.zj-plan-card > input:checked + .zj-plan-select {
  border-color: #4f46e5;
}

.zj-plan-card > input:checked + .zj-plan-select::after {
  opacity: 1;
  transform: scale(1);
}

.zj-plan-card:has(> input:checked) {
  border-color: rgba(79, 70, 229, 0.48);
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.10);
}

.zj-plan-copy {
  display: grid !important;
  justify-content: initial !important;
  gap: 3px !important;
  min-width: 0;
}

.zj-plan-copy > strong {
  color: var(--zj-text);
  font-size: 17px;
}

.zj-plan-copy > em {
  color: #4f46e5;
  font-size: 12px;
  font-style: normal;
}

.zj-plan-copy > small {
  grid-column: auto !important;
  color: var(--zj-muted);
  font-weight: 500;
  line-height: 1.6;
}

.zj-plan-price {
  display: grid !important;
  justify-items: end;
  gap: 0 !important;
  min-width: 100px;
}

.zj-plan-price > strong {
  color: #4f46e5;
  font-size: 30px;
  line-height: 1.2;
}

.zj-plan-price > strong small {
  margin-right: 2px;
  font-size: 14px;
}

.zj-plan-price > em {
  color: var(--zj-muted);
  font-size: 12px;
  font-style: normal;
}

.zj-vip-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-vip-benefits li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  min-height: 94px;
  padding: 15px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-vip-check {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  background: rgba(79, 70, 229, 0.09);
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 8px;
}

.zj-vip-check::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 7px;
  height: 12px;
  border-right: 2px solid #4f46e5;
  border-bottom: 2px solid #4f46e5;
  transform: rotate(45deg);
}

.zj-vip-benefits strong {
  display: block;
  color: var(--zj-text);
  font-size: 14px;
}

.zj-vip-benefits p {
  margin: 3px 0 0;
  color: var(--zj-muted);
  font-size: 12px;
  line-height: 1.65;
}

.zj-vip-policy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-vip-policy > div {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  border-right: 1px solid var(--zj-border);
}

.zj-vip-policy > div:last-child {
  border-right: 0;
}

.zj-vip-policy strong {
  color: var(--zj-text);
  font-size: 13px;
}

.zj-vip-policy span {
  color: var(--zj-muted);
  font-size: 12px;
  line-height: 1.6;
}

.zj-vip-checkout {
  position: sticky;
  top: 88px;
  padding: 20px;
  background: var(--zj-card);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09);
}

.zj-vip-checkout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--zj-border);
}

.zj-vip-checkout-head > span {
  color: var(--zj-text);
  font-size: 17px;
  font-weight: 900;
}

.zj-vip-checkout-head > a {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 800;
}

.zj-vip-order {
  margin: 15px 0 0;
}

.zj-vip-order > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  color: var(--zj-muted);
  font-size: 13px;
}

.zj-vip-order dt,
.zj-vip-order dd {
  margin: 0;
}

.zj-vip-order dd {
  color: var(--zj-text);
  font-weight: 800;
}

.zj-vip-order .zj-vip-order-total {
  min-height: 66px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--zj-border);
}

.zj-vip-order-total dd {
  color: #4f46e5;
}

.zj-vip-order-total dd small {
  margin-right: 2px;
  font-size: 14px;
}

.zj-vip-order-total dd strong {
  font-size: 28px;
}

.zj-vip-payment {
  padding-top: 16px;
  border-top: 1px solid var(--zj-border);
}

.zj-vip-payment h2 {
  margin: 0 0 12px;
  color: var(--zj-text);
  font-size: 15px;
}

.zj-vip-pay-select {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--zj-muted);
  font-size: 12px;
}

.zj-vip-pay-select select {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  color: var(--zj-text);
  background: var(--zj-bg);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-vip-pay-status {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  background: var(--zj-soft);
  border: 1px solid var(--zj-border);
  border-radius: 8px;
}

.zj-vip-pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: #4f46e5;
  border-radius: 8px;
  font-weight: 900;
}

.zj-vip-pay-status strong,
.zj-vip-pay-status small {
  display: block;
}

.zj-vip-pay-status strong {
  color: var(--zj-text);
  font-size: 13px;
}

.zj-vip-pay-status small {
  color: var(--zj-muted);
  font-size: 11px;
}

.zj-vip-pay-status em {
  color: #9a6700;
  background: #fff7d6;
  border: 1px solid #f4d77e;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.zj-vip-pay-note,
.zj-vip-checkout-note {
  color: var(--zj-muted);
  font-size: 12px;
  line-height: 1.7;
}

.zj-vip-pay-note {
  margin: 10px 0 12px;
}

.zj-vip-checkout-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--zj-border);
}

.zj-vip-checkout .zj-full-action {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
}

.zj-vip-checkout .zj-primary-action {
  color: #fff !important;
  background: linear-gradient(135deg, #4f46e5, #6d5dfc) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.20) !important;
}

.zj-vip-checkout .zj-primary-action:not(:disabled):hover {
  background: linear-gradient(135deg, #4338ca, #5b4de8) !important;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.28) !important;
  transform: translateY(-1px);
}

.dark-theme.zj-buygroup-page .zj-vip-facts,
.dark-theme.zj-buygroup-page .zj-plan-card,
.dark-theme.zj-buygroup-page .zj-vip-benefits li,
.dark-theme.zj-buygroup-page .zj-vip-checkout {
  background: var(--zj-card);
  border-color: var(--zj-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.dark-theme.zj-buygroup-page .zj-vip-pay-status,
.dark-theme.zj-buygroup-page .zj-vip-policy {
  background: #0f172a;
  border-color: var(--zj-border);
}

.dark-theme.zj-buygroup-page .zj-vip-pay-select select {
  color: var(--zj-text);
  background: #0f172a;
  border-color: var(--zj-border);
}

.dark-theme.zj-buygroup-page .zj-vip-pay-status em {
  color: #fde68a;
  background: rgba(146, 64, 14, 0.22);
  border-color: rgba(245, 158, 11, 0.28);
}

@media (max-width: 900px) {
  .zj-vip-purchase {
    grid-template-columns: 1fr;
  }

  .zj-vip-checkout {
    position: static;
  }
}

@media (max-width: 700px) {
  .zj-buygroup-page .zj-page {
    padding-top: 8px;
  }

  .zj-vip-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .zj-vip-hero-copy h1 {
    font-size: 27px;
  }

  .zj-vip-hero-price {
    justify-items: start;
    padding: 16px 0 0;
    border-top: 1px solid var(--zj-border);
    border-left: 0;
  }

  .zj-vip-hero-price > strong {
    font-size: 38px;
  }

  .zj-vip-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zj-vip-facts > div:nth-child(2) {
    border-right: 0;
  }

  .zj-vip-facts > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--zj-border);
  }

  .zj-vip-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .zj-buygroup-page .zj-plan-card {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 16px;
  }

  .zj-plan-price {
    grid-column: 2;
    justify-items: start;
    min-width: 0;
  }

  .zj-vip-benefits,
  .zj-vip-policy {
    grid-template-columns: 1fr;
  }

  .zj-vip-policy > div {
    border-right: 0;
    border-bottom: 1px solid var(--zj-border);
  }

  .zj-vip-policy > div:last-child {
    border-bottom: 0;
  }
}

/* Mobile audit fixes: readable controls, safe areas, and unclipped compact content. */
@media (max-width: 720px) {
  body.zj-site input[type="text"],
  body.zj-site input[type="number"],
  body.zj-site input[type="email"],
  body.zj-site input[type="password"],
  body.zj-site input[type="tel"],
  body.zj-site input[type="search"],
  body.zj-site input[type="url"],
  body.zj-site select,
  body.zj-site textarea {
    font-size: 16px !important;
  }

  .zj-calculator-hero .zj-home-search {
    display: flex;
    grid-template-columns: none;
    align-items: stretch;
    height: 52px;
    padding: 0;
  }

  .zj-calculator-hero .zj-home-search input {
    min-width: 0;
    height: 100%;
  }

  .zj-calculator-hero .zj-home-search button {
    flex: 0 0 96px;
    width: auto;
    height: 100%;
  }

  .zj-home-tools-panel .zj-home-tool-list {
    max-height: 188px;
  }

  .zj-home-tool-pill {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 4px;
    min-height: 56px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .zj-home-tool-pill a {
    gap: 5px;
  }

  .zj-home-tool-pill .zj-line-icon {
    width: 30px;
    height: 30px;
  }

  .zj-home-tool-pill strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .zj-brand,
  .zj-theme-btn,
  .zj-icon-btn,
  .zj-news-title-row .zj-favorite-btn {
    min-height: 38px;
  }

  .zj-news-title-row .zj-favorite-btn {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .zj-article-text figure {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .zj-article-text table,
  .zj-article-text pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .zj-article-text iframe,
  .zj-article-text video,
  .zj-article-text embed,
  .zj-article-text object {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body.zj-site {
    padding-bottom: 62px;
  }

  .zj-bottom-nav {
    min-height: 58px;
    padding-bottom: 0;
  }

  body.zj-site > .zj-bottom-nav {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
  }
}

@media (max-width: 360px) {
  .zj-home-tool-list {
    grid-template-columns: 1fr;
  }

  .zj-home-tools-panel .zj-home-tool-list {
    max-height: 338px;
  }

  .zj-home-tool-pill {
    min-height: 48px;
  }

  .zj-home-tool-pill strong {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* H5 bottom navigation icons. */
.zj-bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.zj-bottom-nav a {
  position: relative;
  grid-template-rows: 22px auto;
  align-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 5px 4px 4px;
  font-weight: 400;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.zj-bottom-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.zj-bottom-nav a.zj-active {
  color: var(--zj-primary);
}

.zj-bottom-nav a.zj-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 3px;
  background: currentColor;
  border-radius: 0 0 3px 3px;
  transform: translateX(-50%);
}

.zj-bottom-nav a.zj-active .zj-bottom-icon {
  stroke-width: 2.2;
}

@media (hover: hover) and (pointer: fine) {
  .zj-bottom-nav a:hover {
    color: var(--zj-primary);
    background: color-mix(in srgb, var(--zj-primary) 7%, transparent);
  }
}

/* Keep the full brand visible in the compact H5 header. */
@media (max-width: 720px) {
  .zj-brand span:last-child {
    display: inline;
  }

  .zj-brand-text {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .zj-submit-link:not(.zj-member-trigger) {
    min-width: 64px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .zj-submit-link.zj-member-trigger {
    max-width: 84px;
    padding-right: 7px;
    padding-left: 6px;
  }

  .zj-member-trigger-name {
    max-width: 34px;
  }

  .zj-member-trigger-level {
    display: none;
  }
}

@media (max-width: 360px) {
  .zj-topbar-inner {
    gap: 4px;
  }

  .zj-brand {
    gap: 5px;
  }

  .zj-brand-mark {
    width: 30px;
    height: 30px;
  }

  .zj-brand-text {
    font-size: 13px;
  }

  .zj-actions {
    gap: 4px;
  }

  .zj-theme-switch {
    gap: 1px;
    padding: 2px;
  }

  .zj-theme-btn {
    min-height: 30px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 11px;
  }

  .zj-submit-link:not(.zj-member-trigger) {
    min-width: 52px;
    min-height: 34px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 12px;
  }

  .zj-submit-link.zj-member-trigger {
    min-width: 42px;
    max-width: 54px;
  }

  .zj-member-trigger-name {
    display: none;
  }
}

/* On H5, tool channels open directly on the useful list content. */
@media (max-width: 640px) {
  .zj-list-page:not(.zj-brand-list-page) .zj-hero .zj-page-title,
  .zj-brand-list-page .zj-hero .zj-page-title,
  .zj-article-list-page .zj-hero .zj-page-title,
  .zj-tool-channel-page .zj-channel-hero h1,
  .zj-tool-channel-page .zj-channel-hero > p {
    display: none;
  }

  .zj-footer {
    display: none;
  }
}

/* Compact H5 tool-detail hierarchy and remove repeated calculator headings. */
@media (max-width: 640px) {
  .zj-detail-page .zj-tool-title {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px 11px;
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 14px;
  }

  .zj-detail-page .zj-title-main {
    display: contents;
  }

  .zj-detail-page .zj-title-main > .zj-line-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .zj-detail-page .zj-title-main > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .zj-detail-page .zj-tool-title h1 {
    font-size: 22px;
    line-height: 1.25;
  }

  .zj-detail-page .zj-tool-title p {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.65;
  }

  .zj-detail-page .zj-tag-row {
    gap: 5px;
    margin-top: 8px;
  }

  .zj-detail-page .zj-tag {
    min-height: 24px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }

  .zj-detail-page .zj-tool-actions {
    grid-column: 2;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
  }

  .zj-detail-page .zj-tool-actions .zj-icon-btn {
    min-height: 34px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
  }

  .zj-detail-page .zj-tool-actions [data-zj-favorite] {
    width: 34px;
    padding: 0;
  }

  .zj-detail-page .zj-tool-layout {
    gap: 12px;
  }

  .zj-detail-page .zj-calculator-card {
    padding: 14px;
    border-radius: 14px;
  }

  .zj-detail-page .zj-calculator-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .zj-detail-page .zj-calculator-head > div {
    min-width: 0;
  }

  .zj-detail-page .zj-calculator-head h2 {
    margin-top: 7px;
    font-size: 20px;
  }

  .zj-detail-page .zj-calc-badge {
    flex: 0 0 auto;
    min-height: 26px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 11px;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body > h1:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > h2:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > h3:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > h1:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > h2:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > h3:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > div:first-child > h1:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > div:first-child > h2:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > div:first-child > h3:first-child,
  .zj-detail-page .zj-calculator-card .zj-tool-body h1:first-child + .hr0,
  .zj-detail-page .zj-calculator-card .zj-tool-body h2:first-child + .hr0,
  .zj-detail-page .zj-calculator-card .zj-tool-body h3:first-child + .hr0 {
    display: none;
  }
}
/* ============================================================
   会员中心 - 手机端紧凑 App 风格
   仅对 .zj-cp-page 生效，不影响其他会员中心页面
   桌面端完全不变
   ============================================================ */

@media (max-width: 640px) {

  /* ---- 整体壳 ---- */
  .zj-cp-page .zj-page {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .zj-cp-page .zj-member-shell {
    padding: 0;
    gap: 0;
  }

  /* ---- Dashboard 紧凑化 ---- */
  .zj-cp-page .zj-member-dashboard {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 0;
    margin: 0;
  }

  .zj-cp-page .zj-member-profile {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  .zj-cp-page .zj-member-profile img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .zj-cp-page .zj-member-profile h1 {
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .zj-cp-page .zj-member-profile p {
    display: none;
  }

  .zj-cp-page .zj-access-kicker {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  /* ---- 操作按钮栏 ---- */
  .zj-cp-page .zj-member-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    margin-left: auto;
  }

  .zj-cp-page .zj-member-actions a {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---- Metrics 行内紧凑 ---- */
  .zj-cp-page .zj-member-metrics {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 0 14px 10px;
  }

  .zj-cp-page .zj-member-metrics > div {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    min-height: auto;
    border-radius: 0;
    border-left: 1px solid var(--zj-border);
  }

  .zj-cp-page .zj-member-metrics > div:first-child {
    border-left: none;
  }

  .zj-cp-page .zj-member-metrics span {
    font-size: 10px;
    display: block;
    margin: 0;
  }

  .zj-cp-page .zj-member-metrics strong {
    font-size: 16px;
    margin: 3px 0 0;
    display: block;
  }

  /* ---- Grid 卡片合并为一行 ---- */
  .zj-cp-page .zj-member-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 14px;
    margin-bottom: 0;
  }

  .zj-cp-page .zj-member-card {
    padding: 12px 14px;
    border-radius: 0;
    margin: 0;
  }

  .zj-cp-page .zj-member-card:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .zj-cp-page .zj-member-card:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 10px;
  }

  .zj-cp-page .zj-member-card h2 {
    font-size: 14px;
    margin: 0 0 8px;
    color: var(--zj-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ---- 账号信息列表紧凑 ---- */
  .zj-cp-page .zj-member-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .zj-cp-page .zj-member-list dt {
    font-size: 12px;
    color: var(--zj-muted);
    font-weight: 600;
    margin: 0;
  }

  .zj-cp-page .zj-member-list dd {
    font-size: 14px;
    margin: 0;
    color: var(--zj-text);
    font-weight: 700;
  }

  /* ---- 常用功能菜单紧凑 ---- */
  .zj-cp-page .zj-member-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .zj-cp-page .zj-member-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    border-radius: 6px;
    color: var(--zj-text);
    text-decoration: none;
    font-weight: 600;
  }

  .zj-cp-page .zj-member-menu a::before {
    content: '›';
    font-size: 18px;
    color: var(--zj-muted);
    margin-left: auto;
    font-weight: 300;
  }

  /* ---- 工具分类区域 ---- */
  .zj-cp-page .zj-member-category-section {
    margin-top: 0;
  }

  .zj-cp-page .zj-member-section-head {
    padding: 10px 14px 6px;
    margin-bottom: 0;
    gap: 10px;
  }

  .zj-cp-page .zj-member-section-head h2 {
    font-size: 14px;
    margin: 0;
    color: var(--zj-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .zj-cp-page .zj-member-section-head p {
    display: none;
  }

  .zj-cp-page .zj-member-section-head > a {
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ---- 分类网格 3 列紧凑 ---- */
  .zj-cp-page .zj-member-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 14px 10px;
  }

  .zj-cp-page .zj-member-category-grid > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: auto;
    padding: 10px 4px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--zj-border);
    background: var(--zj-card);
    text-decoration: none;
    color: var(--zj-text);
    transition: background 120ms ease, transform 120ms ease;
  }

  .zj-cp-page .zj-member-category-grid > a:active {
    transform: scale(0.96);
    background: color-mix(in srgb, var(--zj-primary) 8%, transparent);
  }

  .zj-cp-page .zj-member-category-grid .zj-line-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .zj-cp-page .zj-member-category-grid strong {
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
  }

  /* ---- 分隔线 ---- */
  .zj-cp-page .zj-member-shell > section {
    border-bottom: 1px solid var(--zj-border);
  }

  .zj-cp-page .zj-member-shell > section:last-child {
    border-bottom: none;
  }
}
/* ============================================================
   会员中心 - 手机端紧凑 App 风格
   仅对 .zj-cp-page 生效，不影响其他会员中心页面
   桌面端完全不变
   ============================================================ */


/* =============================================
   会员中心手机紧凑版 — App 风格
   仅对 .zj-cp-page 生效，桌面端完全不变
   ============================================= */

@media (max-width: 640px) {

  /* ===== 整体壳：去掉所有多余间距 ===== */
  .zj-cp-page .zj-page {
    width: 100% !important;
    padding: 0 !important;
  }

  .zj-cp-page .zj-member-shell {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ===== 重新设计 Dashboard：对称美观 ===== */
  .zj-cp-page .zj-member-dashboard {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 16px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
  }

  .zj-cp-page .zj-member-dashboard .zj-member-profile {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .zj-cp-page .zj-member-profile img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
  }

  .zj-cp-page .zj-member-profile h1 {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: white !important;
  }

  .zj-cp-page .zj-member-profile p {
    display: none !important;
  }

  .zj-cp-page .zj-access-kicker {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    margin-top: 4px !important;
  }


  /* ===== 用户信息行：ID + 注册时间 ===== */
  .zj-cp-page .zj-member-info-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .zj-cp-page .zj-member-info-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 1px !important;
  }

  .zj-cp-page .zj-member-info-item span {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 !important;
  }

  .zj-cp-page .zj-member-info-item strong {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  /* ===== 按钮区域：水平排列，对称分布 ===== */
  .zj-cp-page .zj-member-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }

  .zj-cp-page .zj-member-actions a {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: normal !important;
    min-height: auto !important;
  }

  .zj-cp-page .zj-member-actions .zj-primary-action {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #4f46e5 !important;
    border: none !important;
  }

  .zj-cp-page .zj-member-actions .zj-plain-action {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }


  /* ===== 指标行：不换行，空间不足时缩小字体 ===== */
  .zj-cp-page .zj-member-metrics {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 16px 16px 12px !important;
    padding: 0 !important;
    background: var(--zj-card) !important;
    border: 1px solid var(--zj-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
  }

  .zj-cp-page .zj-member-metrics > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    padding: 12px 4px !important;
    min-height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--zj-border) !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: hidden !important;
  }

  .zj-cp-page .zj-member-metrics > div:last-child {
    border-right: none !important;
  }

  .zj-cp-page .zj-member-metrics span {
    font-size: clamp(9px, 2.2vw, 11px) !important;
    display: block !important;
    margin: 0 !important;
    color: var(--zj-muted) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .zj-cp-page .zj-member-metrics strong {
    font-size: clamp(14px, 4.5vw, 20px) !important;
    margin: 4px 0 0 !important;
    display: block !important;
    color: var(--zj-text) !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* VIP 过期红色 */
  .zj-cp-page .zj-member-metrics .zj-vip-expired {
    color: #ef4444 !important;
    font-weight: 800 !important;
  }

  /* 服务天数红色 */
  .zj-cp-page .zj-member-metrics .zj-service-days {
    color: #ef4444 !important;
    font-weight: 800 !important;
  }
  .zj-cp-page .zj-member-metrics .zj-service-days strong {
    color: #ef4444 !important;
    font-weight: 800 !important;
  }
  /* ===== 隐藏账号信息和常用功能区域 ===== */
  .zj-cp-page .zj-member-grid {
    display: none !important;
  }

  /* ===== 工具分类区域 ===== */
  .zj-cp-page .zj-member-category-section {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .zj-cp-page .zj-member-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px 8px !important;
    margin: 0 !important;
    gap: 0 !important;
  }

  .zj-cp-page .zj-member-section-head > div {
    display: none !important;
  }

  .zj-cp-page .zj-member-section-head h2 {
    font-size: 13px !important;
    margin: 0 !important;
    color: var(--zj-muted) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
  }

  .zj-cp-page .zj-member-section-head p {
    display: none !important;
  }

  .zj-cp-page .zj-member-section-head > a {
    font-size: 13px !important;
    flex-shrink: 0 !important;
    color: var(--zj-primary) !important;
  }

  /* ===== 分类网格：3 列 App 风格 ===== */
  .zj-cp-page .zj-member-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 16px 16px !important;
  }

  .zj-cp-page .zj-member-category-grid > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: auto !important;
    padding: 14px 4px !important;
    border-radius: 12px !important;
    text-align: center !important;
    border: 1px solid var(--zj-border) !important;
    background: var(--zj-card) !important;
    text-decoration: none !important;
    color: var(--zj-text) !important;
    transition: background 100ms ease, transform 100ms ease !important;
    box-shadow: none !important;
  }

  .zj-cp-page .zj-member-category-grid > a:active {
    transform: scale(0.95) !important;
    background: color-mix(in srgb, var(--zj-primary) 8%, transparent) !important;
  }

  .zj-cp-page .zj-member-category-grid .zj-line-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  .zj-cp-page .zj-member-category-grid strong {
    font-size: 12px !important;
    line-height: 1.3 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    width: 100% !important;
    display: block !important;
  }

  /* ===== 分隔线替代空白间距 ===== */
  .zj-cp-page .zj-member-shell > section {
    border-bottom: 1px solid var(--zj-border) !important;
  }

  .zj-cp-page .zj-member-shell > section:last-child {
    border-bottom: none !important;
  }
}




/* 移动端首页优化 — App 风格紧凑布局 */
@media (max-width: 640px) {
  /* Hero 区域 — sticky: 不滚动时在原位,滚动时固定在顶部 */
  .zj-home-hero,
  .zj-calculator-hero {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    min-height: 0 !important;
    padding: 16px 0 4px !important;
    margin-bottom: 0 !important;
  }

  .zj-home-hero .zj-home-badge,
  .zj-calculator-hero .zj-home-badge,
  .zj-home-hero h1,
  .zj-calculator-hero h1,
  .zj-home-hero p,
  .zj-calculator-hero p,
  .zj-hot-tags {
    display: none !important;
  }

  .zj-home-hero .zj-home-search,
  .zj-calculator-hero .zj-home-search {
    display: flex !important;
    height: 40px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }

  .zj-home-hero .zj-home-search input,
  .zj-calculator-hero .zj-home-search input {
    font-size: 14px !important;
    padding: 0 12px !important;
    flex: 1 !important;
  }

  .zj-home-hero .zj-home-search button,
  .zj-calculator-hero .zj-home-search button {
    min-width: 64px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
  }

  /* Section 间距 */
  .zj-home-page .zj-section {
    margin-top: 0 !important;
  }

  .zj-home-tools-panel {
    padding-top: 8px !important;
  }

  /* ===== 常用工具面板 ===== */
  .zj-home-tools-panel {
    border-radius: 16px !important;
    padding: 14px 10px !important;
  }

  .zj-home-tabs {
    gap: 14px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .zj-home-tabs button {
    font-size: 14px !important;
    padding: 0 12px !important;
    min-height: 28px !important;
  }

  .zj-home-tabs button.active {
    font-size: 15px !important;
  }

  /* ===== 常用工具卡片 ===== */
  .zj-home-tool-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
  }

  .zj-home-tool-pill {
    border-radius: 16px !important;
    padding: 10px 12px !important;
    min-height: auto !important;
  }

  .zj-home-tool-pill .zj-line-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .zj-home-tool-pill strong {
    font-size: 13px !important;
  }

  .zj-home-tool-pill .zj-card-action {
    display: none !important;
  }

  /* ===== 精品推荐 ===== */
  .zj-feature-card {
    border-radius: 16px !important;
    padding: 12px !important;
  }

  .zj-feature-card .zj-feature-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .zj-feature-card .zj-feature-body {
    padding: 0 !important;
  }

  .zj-feature-card .zj-feature-title {
    font-size: 14px !important;
  }

  .zj-feature-card .zj-feature-desc {
    font-size: 12px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .zj-feature-card .zj-card-action,
  .zj-feature-card [data-zj-favorite] {
    display: none !important;
  }

  /* ===== 工具分类 ===== */
  .zj-home-grid.zj-tool-class-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .zj-mini-tool.zj-class-card {
    padding: 10px 6px !important;
    border-radius: 12px !important;
  }

  .zj-mini-tool.zj-class-card strong {
    font-size: 13px !important;
  }

  .zj-mini-tool.zj-class-card small {
    font-size: 11px !important;
    display: none !important;
  }

  /* ===== 品牌区域 ===== */
  .zj-home-brand-section {
    margin-top: 10px !important;
  }

  .zj-home-brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .zj-home-brand-item {
    border-radius: 12px !important;
  }

  /* ===== 新闻资讯 ===== */
  .zj-home-news-card {
    border-radius: 12px !important;
  }

  .zj-home-news-card .zj-news-thumb {
    width: 80px !important;
    height: 60px !important;
  }

  .zj-home-news-card .zj-news-title {
    font-size: 14px !important;
  }

  .zj-home-news-card .zj-news-desc {
    font-size: 12px !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
}

/* ===== 工具分类卡片：图标上/文字下（仅手机版） ===== */
@media (max-width: 640px) {
  .zj-mini-tool.zj-class-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 4px !important;
    padding: 10px 8px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  .zj-mini-tool.zj-class-card .zj-line-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 auto 3px !important;
  }

  .zj-mini-tool.zj-class-card strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ===== 常用工具卡片：图标上/文字下（仅手机版） ===== */
@media (max-width: 640px) {
  .zj-home-tool-pill {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 2px !important;
    padding: 8px 10px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 100%) !important;
    border-color: #d6e2f0 !important;
  }

  .dark-theme .zj-home-tool-pill {
    background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(30,41,59,0.85) 100%) !important;
    border-color: rgba(51,65,85,0.86) !important;
  }

  .zj-home-tool-pill a {
    display: contents !important;
  }

  .zj-home-tool-pill .zj-line-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    margin: 0 auto 4px !important;
  }

  .zj-home-tool-pill strong {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 12px !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }

  .zj-home-tool-pill .zj-card-action {
    display: none !important;
  }
}

/* ===== 移动端精品推荐：紧凑 + 查看全部不换行 ===== */
@media (max-width: 640px) {
  .zj-feature-section {
    margin-top: 0 !important;
  }

  .zj-section-head {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .zj-section-head h2 {
    font-size: 16px !important;
  }

  .zj-section-head p {
    font-size: 11px !important;
  }

  .zj-section-head a {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
  }

  .zj-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .zj-feature-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .zj-feature-card a {
    gap: 10px !important;
  }

  .zj-feature-card .zj-line-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .zj-feature-copy {
    gap: 2px !important;
  }

  .zj-feature-copy strong {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  .zj-feature-copy small {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .zj-feature-copy em {
    min-height: auto !important;
    padding: 1px 8px !important;
    font-size: 10px !important;
  }
}

/* ===== 移动端计算器优化：标题居中、输入框同行、计算按钮固定底部 ===== */
@media (max-width: 640px) {
  /* 1. 标题居中 */
  .zj-detail-page .zj-calculator-card .zj-tool-body h3,
  .zj-detail-page .zj-calculator-card .zj-tool-body > div:first-child > h3 {
    text-align: center !important;
    font-size: 17px !important;
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
  }

  /* 2. 计算器表单：label + input 同行，输入框右对齐 */
  .zj-detail-page .zj-calculator-card .zj-tool-body form {
    display: block !important;
    grid-template-columns: none !important;
    padding: 10px !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-a,
  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    float: none !important;
    min-height: auto !important;
    vertical-align: top !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-a {
    font-size: 13px !important;
    padding-right: 6px !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b {
    flex: 1 !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b .ui-input-text {
    width: 100% !important;
    min-width: 0 !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body form > hr {
    margin: 6px 0 !important;
  }

  /* 3. 计算按钮固定在底部 */
  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="footer"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 1px solid var(--zj-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
  }

  .dark-theme .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="footer"] {
    background: rgba(15, 23, 42, 0.97) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="navbar"] ul {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="navbar"] input[type="button"] {
    width: 100% !important;
    height: 48px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
  }

  /* 防止底部遮挡内容 */
  .zj-detail-page .zj-calculator-card .zj-tool-body {
    padding-bottom: 70px !important;
  }
}

/* ===== 修复：ui-input-text 透明化，zj-input-enhanced 接管样式 ===== */
.zj-tool-body .ui-input-text {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: auto !important;
}

.zj-input-enhanced {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 52px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #b9d5ff !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07), inset 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  overflow: hidden !important;
}

.zj-input-enhanced:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.zj-input-enhanced > input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #0f172a !important;
  line-height: 40px !important;
}

.zj-tool-body .zj-input-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 0 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.zj-tool-body .zj-input-clear-btn:hover {
  color: #b42318 !important;
  background: #fff1f0 !important;
  border-color: #f5b8b2 !important;
}

.dark-theme .zj-input-enhanced {
  background: rgba(21, 27, 42, 0.98) !important;
  border-color: rgba(43, 51, 67, 0.88) !important;
  box-shadow: none !important;
}

.dark-theme .zj-input-enhanced:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

.dark-theme .zj-tool-body .zj-input-clear-btn {
  color: #e5e7eb !important;
  background: rgba(30, 41, 59, 0.94) !important;
  border-color: rgba(71, 85, 105, 0.92) !important;
}

.dark-theme .zj-tool-body .zj-input-clear-btn:hover {
  color: #fecaca !important;
  background: rgba(127, 29, 29, 0.34) !important;
}

.zj-tool-body input[type="number"] {
  color-scheme: light;
}

.dark-theme .zj-tool-body input[type="number"] {
  color-scheme: dark;
}

@media (max-width: 720px) {
  .zj-tool-body .zj-input-clear-btn {
    width: 44px !important;
    min-width: 44px !important;
  }
}

/* ===== 修复：输入框内 clear 按钮始终贴右，尺寸自适应 ===== */
.zj-input-enhanced {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 40px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #b9d5ff !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07), inset 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  overflow: hidden !important;
}

.zj-input-enhanced:focus-within {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

/* input 填满剩余空间，clear 按钮固定右侧 */
.zj-input-enhanced > input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  color: #0f172a !important;
  line-height: 40px !important;
  min-height: 40px !important;
}

.zj-tool-body .zj-input-clear-btn {
  flex: 0 0 auto !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  border: 0 !important;
  border-left: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* 移动端：输入框和 clear 按钮缩小 */
@media (max-width: 640px) {
  .zj-input-enhanced {
    min-height: 28px !important;
    border-radius: 8px !important;
  }

  .zj-input-enhanced:focus-within {
    border-radius: 8px !important;
  }

  .zj-input-enhanced > input {
    font-size: 14px !important;
    line-height: 28px !important;
    min-height: 28px !important;
    padding: 0 4px !important;
  }

  .zj-tool-body .zj-input-clear-btn {
    width: 26px !important;
    min-width: 26px !important;
    height: 28px !important;
    font-size: 13px !important;
    padding: 0 2px !important;
  }
}

@media (max-width: 380px) {
  .zj-input-enhanced {
    min-height: 24px !important;
    border-radius: 6px !important;
  }

  .zj-input-enhanced:focus-within {
    border-radius: 6px !important;
  }

  .zj-input-enhanced > input {
    font-size: 13px !important;
    line-height: 24px !important;
    min-height: 24px !important;
    padding: 0 3px !important;
  }

  .zj-tool-body .zj-input-clear-btn {
    width: 22px !important;
    min-width: 22px !important;
    height: 24px !important;
    font-size: 12px !important;
    padding: 0 2px !important;
  }
}

/* ===== 平板端：计算按钮固定在屏幕下方 ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="footer"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    border-top: 1px solid var(--zj-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(10px) !important;
  }

  .dark-theme .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="footer"] {
    background: rgba(15, 23, 42, 0.97) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3) !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="navbar"] ul {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .zj-detail-page .zj-calculator-card .zj-tool-body [data-role="navbar"] input[type="button"] {
    width: 100% !important;
    height: 50px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
  }

  /* 防止底部遮挡内容 */
  .zj-detail-page .zj-calculator-card .zj-tool-body {
    padding-bottom: 80px !important;
  }
}

/* ===== 手机端工具列表页紧凑优化 ===== */
@media (max-width: 640px) {
  /* 工具网格：单列紧凑 */
  .zj-list-page .zj-tool-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* 工具卡片缩小 */
  .zj-list-page .zj-tool-card {
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  /* 卡片主区域缩小 */
  .zj-list-page .zj-tool-card-main {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .zj-list-page .zj-tool-card-main .zj-line-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }

  /* 工具名称缩小 */
  .zj-list-page .zj-tool-card .zj-tool-name {
    font-size: 14px !important;
  }

  .zj-list-page .zj-tool-card .zj-tool-meta {
    font-size: 11px !important;
  }

  /* VIP 徽章缩小 */
  .zj-list-page .zj-vip-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    min-width: 28px !important;
  }

  /* 收藏按钮缩小 */
  .zj-list-page .zj-tool-card .zj-card-action {
    font-size: 14px !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* 箭头按钮缩小 */
  .zj-list-page .zj-card-arrow {
    font-size: 16px !important;
  }
}



/* ===== 手机端计算器：label 最大60%，输入框最小化且右对齐 ===== */
@media (max-width: 640px) {
  /* label：最大60%，最小75px */
  /* Label 最大45%宽度，最小150px保证文字完整显示 */
  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-a {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 45% !important;
    min-width: 150px !important;
  }

  /* 输入框容器 最大45%宽度，右对齐 */
  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b {
    flex: 0 0 auto !important;
    max-width: 45% !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  /* 输入框增强容器：最小150px保证可读性 */
  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b .ui-input-text {
    width: auto !important;
    min-width: 150px !important;
  }

  /* 实际 input 元素 */
  .zj-detail-page .zj-calculator-card .zj-tool-body .ui-block-b input {
    width: auto !important;
    max-width: 100% !important;
    font-size: 14px !important;
  }
}

/* ===== 取回密码页面 手机端 App 风格 ===== */
@media (max-width: 640px) {
  /* 表单整体：flex 布局，替代 table */
  .GetPassForm,
  .GetPassForm table.tableborder {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  /* 移除表格背景色 */
  .GetPassForm tr {
    background: transparent !important;
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    border-bottom: 1px solid #e8f0f5 !important;
  }
  
  /* 每行紧凑间距 */
  .GetPassForm td {
    padding: 12px 0 !important;
    height: auto !important;
    vertical-align: middle !important;
    display: flex !important;
    align-items: center !important;
  }
  
  /* 标签列：横排文字，固定宽度 */
  .GetPassForm td[width="23%"],
  .GetPassForm td:first-child {
    flex: 0 0 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    padding-right: 12px !important;
    padding-left: 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    color: #334155 !important;
  }
  
  /* 输入列：占满剩余空间，不溢出 */
  .GetPassForm td[width="77%"],
  .GetPassForm td:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* 输入框：不超边界，圆角 */
  .GetPassForm input[type="text"],
  .GetPassForm input[type="password"],
  .GetPassForm input[name="username"],
  .GetPassForm input[name="email"],
  .GetPassForm input[name="key"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    border: 1px solid #d0e4f0 !important;
    background: #f7fafc !important;
    box-sizing: border-box !important;
    color: #1a2b3c !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }
  
  /* 验证码行：紧凑排列 */
  .GetPassForm td table {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .GetPassForm td table td {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .GetPassForm td table input[name="key"] {
    width: 72px !important;
    max-width: 72px !important;
    min-width: 72px !important;
    height: 40px !important;
    text-align: center !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }
  
  /* 验证码链接 */
  #getpasswordshowkey a {
    font-size: 13px !important;
    color: #2563eb !important;
    padding: 0 5px !important;
    white-space: normal !important;
  }
  
  /* 提交按钮：全宽，大触摸区域 */
  .GetPassForm input[type="submit"],
  .GetPassForm input[name="button"] {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    letter-spacing: 4px !important;
    margin-top: 6px !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
  }
  
  /* 标题区域 */
  .GetPassForm h1.h1 {
    font-size: 22px !important;
    padding: 16px 0 8px !important;
    margin: 0 !important;
    text-align: left !important;
    color: #1a2b3c !important;
  }
  
  /* 面包屑导航 */
  .GetPassForm .url,
  .GetPassForm td[align] a {
    font-size: 12px !important;
    color: #94a3b8 !important;
  }
}

/* ===== 搜索结果页面现代卡片样式 ===== */
.zj-search-result-page {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.zj-search-result-header {
  padding: 16px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #e8edf2;
}

.zj-search-result-header h1 {
  font-size: 18px;
  font-weight: 700;
  color: #1a2b3c;
  margin: 0 0 6px;
}

.zj-search-keyword {
  color: #2563eb;
}

.zj-search-count {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.zj-search-count strong {
  color: #2563eb;
  font-weight: 700;
}

.zj-search-result-list {
  padding: 8px 0;
  background: #f8fafc;
}

.zj-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eef2f6;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

.zj-search-item:active {
  background: #f0f7ff;
}

.zj-search-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  position: relative;
}

.zj-search-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 18px;
}

.zj-search-info {
  flex: 1;
  min-width: 0;
}

.zj-search-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-search-desc {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.zj-search-arrow {
  flex: 0 0 16px;
  color: #cbd5e1;
  font-size: 16px;
  font-weight: 300;
}

.zj-search-pagination {
  padding: 16px;
  text-align: center;
}

/* Mobile optimized */
@media (max-width: 640px) {
  .zj-search-result-header {
    padding: 12px 12px 10px;
  }

  .zj-search-result-header h1 {
    font-size: 16px;
  }

  .zj-search-item {
    padding: 10px 12px;
    gap: 10px;
  }

  .zj-search-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  .zj-search-icon::before {
    width: 16px;
    height: 16px;
    background-size: 16px;
  }

  .zj-search-title {
    font-size: 13px;
  }

  .zj-search-desc {
    font-size: 11px;
  }
}

/* ===== 搜索结果页面完整样式 ===== */
.zj-search-page {
  min-height: 100vh;
  background: #f8fafc;
}

.zj-search-hero {
  padding: 40px 24px 32px;
  background: linear-gradient(180deg, #f8fbfd 0%, #eef6f8 48%, #ffffff 100%);
  color: var(--zj-text);
  text-align: center;
}

.zj-search-title-main {
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--zj-text);
  letter-spacing: 0.5px;
}

.zj-search-keyword {
  font-size: 17px;
  margin: 0 0 10px;
  opacity: 0.85;
  color: var(--zj-muted);
}

.zj-search-keyword strong {
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.zj-search-count {
  font-size: 16px;
  margin: 0;
  opacity: 0.8;
  color: var(--zj-muted);
}

.zj-search-count strong {
  font-weight: 700;
  color: #ffd700;
  font-size: 19px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.zj-search-results {
  padding: 0;
  background: #f8fafc;
}

.zj-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #eef2f6;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
  min-height: 68px;
}

.zj-search-item:active {
  background: #f0f7ff;
  transform: scale(0.98);
}

.zj-search-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  position: relative;
}

.zj-search-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 18px;
}

.zj-search-info {
  flex: 1;
  min-width: 0;
}

.zj-search-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zj-search-desc {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.zj-search-arrow {
  flex: 0 0 16px;
  color: #cbd5e1;
  font-size: 18px;
  font-weight: 300;
}

.zj-search-pagination {
  padding: 20px 16px;
  text-align: center;
  background: #f8fafc;
}

/* Desktop styles */
@media (min-width: 768px) {
  .zj-search-hero {
    padding: 48px 32px 36px;
  }

  .zj-search-title-main {
    font-size: 40px;
  }

  .zj-search-keyword {
    font-size: 18px;
  }

  .zj-search-count {
    font-size: 17px;
  }

  .zj-search-count strong {
    font-size: 21px;
  }

  .zj-search-item {
    padding: 16px 20px;
    gap: 16px;
    min-height: 72px;
  }

  .zj-search-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .zj-search-icon::before {
    width: 20px;
    height: 20px;
    background-size: 20px;
  }

  .zj-search-title {
    font-size: 16px;
  }

  .zj-search-desc {
    font-size: 13px;
  }
}

/* Mobile optimized - 优化配色和字体 */
@media (max-width: 640px) {
  .zj-search-hero {
    padding: 28px 16px 24px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2) !important;
  }

  .zj-search-title-main {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 0 14px !important;
    color: #ffffff !important;
    letter-spacing: 1.5px !important;
  }

  .zj-search-keyword {
    font-size: 16px !important;
    margin: 0 0 10px !important;
    opacity: 0.95 !important;
    color: #ffffff !important;
  }

  .zj-search-keyword strong {
    color: #ffd700 !important;
    font-weight: 700 !important;
  }

  .zj-search-count {
    font-size: 15px !important;
    margin: 0 !important;
    opacity: 0.9 !important;
    color: #ffffff !important;
  }

  .zj-search-count strong {
    color: #ffd700 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
  }

  .zj-search-item {
    padding: 14px 14px !important;
    gap: 12px !important;
    min-height: 64px !important;
    border-radius: 12px !important;
    margin: 0 12px 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }

  .zj-search-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  .zj-search-icon::before {
    width: 18px !important;
    height: 18px !important;
    background-size: 18px !important;
  }

  .zj-search-title {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .zj-search-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .zj-search-arrow {
    font-size: 18px !important;
    color: #94a3b8 !important;
  }
}

/* ===== 连续油管计算器 - 蓝色渐变大按钮 ===== */
.zj-calc-btn-wrap {
  text-align: center;
  margin: 16px 0 8px;
}
.zj-calc-btn-primary {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 4px;
}
.zj-calc-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.zj-calc-btn-primary:active {
  transform: translateY(0);
}

/* ===== 连续油管计算器 - 底部固定按钮 ===== */
.zj-calc-btn-fixed-wrap {
  position: relative;
  padding: 16px 12px 12px;
}
.zj-calc-btn-primary {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 14px 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 4px;
}
.zj-calc-btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.zj-calc-btn-primary:active {
  transform: translateY(0);
}

/* 移动端：固定底部 */
@media (max-width: 720px) {
  .zj-calc-btn-fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 70%, rgba(255,255,255,0));
  }
  .zj-calc-btn-primary {
    max-width: 100%;
    padding: 12px 0;
    font-size: 17px;
  }
  /* 给计算器卡片加底部 padding，防止内容被按钮遮挡 */
  .zj-calculator-card {
    padding-bottom: 70px !important;
  }
}


/* ===== 裂缝几何计算器 - 清空/计算按钮组 ===== */
.zj-calc-btn-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.zj-calc-btn-row input[type="button"] {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 1px;
  transition: opacity 0.2s, transform 0.15s;
}
.zj-calc-btn-row input[type="button"]:hover {
  opacity: 0.9;
}
.zj-calc-btn-row input[type="button"]:active {
  transform: scale(0.98);
}

/* 清空按钮 - 空心描边 */
.zj-calc-btn-clear {
  background: transparent !important;
  color: #0d9488 !important;
  border: 2px solid #0d9488 !important;
  box-shadow: none !important;
}

/* 计算按钮 - 实心青绿色 */
.zj-calc-btn-calculate {
  background: #0d9488 !important;
  color: #fff !important;
  border: 2px solid #0d9488 !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25) !important;
}


/* 分享按钮 - 空心青绿色 */
.zj-calc-btn-outline {
  background: transparent !important;
  color: #0d9488 !important;
  border: 2px solid #0d9488 !important;
  box-shadow: none !important;
}

/* 分享按钮 - 实心青绿色 */
.zj-calc-btn-solid {
  background: #0d9488 !important;
  color: #fff !important;
  border: 2px solid #0d9488 !important;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25) !important;
}
/* 计算过程展示区 */
.zj-calc-process-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  font-family: 'Courier New', monospace;
  line-height: 1.8;
}
.zj-formula-info {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 2;
}
.zj-formula-info p {
  margin: 4px 0;
}

/* 移动端适配 */
@media (max-width: 720px) {
  /* 清空/计算按钮固定底部 */
  .bottom-action-row {
    gap: 6px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 70%, rgba(255,255,255,0));
  }
  .bottom-action-row input[type="button"] {
    padding: 0 !important;
    margin: 0 !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    height: 44px !important;
    line-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: none !important;
  }
  .share-row {
    gap: 6px;
  }
  .share-row input[type="button"] {
    padding: 10px 0;
    font-size: 12px;
    border-radius: 8px;
  }
  .zj-calc-process-box {
    font-size: 11px;
    padding: 8px 10px;
  }
  .zj-formula-info {
    font-size: 12px;
    padding: 8px 10px;
  }
  /* 给计算器卡片加底部 padding，防止内容被按钮遮挡 */
  .zj-calculator-card {
    padding-bottom: 80px !important;
  }
}

/* 电脑端：清空/计算按钮一行显示，总宽度与结果框一致 */
.bottom-action-row {
  margin-top: 8px;
  max-width: 97%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.bottom-action-row input[type="button"] {
  flex: 1;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.bottom-action-row input[type="button"]:hover {
  opacity: 0.9;
}
.bottom-action-row input[type="button"]:active {
  transform: scale(0.98);
}

/* ===== 酸化用酸量 - 酸液类型选择按钮 ===== */
.zj-select-btn {
  display: inline-block;
  margin-left: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #0d9488 !important;
  background: transparent !important;
  border: 1.5px solid #0d9488 !important;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
  white-space: nowrap;
}
.zj-select-btn:hover {
  background: #f0fdfa !important;
  opacity: 0.85;
}

/* ===== 底部操作按钮：清空/计算 横排 ===== */
.zj-calc-btn-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: center !important;
  align-items: center !important;
}

.bottom-action-row {
  padding: 10px 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.zj-calc-btn-clear,
.zj-calc-btn-calculate,
.zj-calc-btn-outline,
.zj-calc-btn-solid {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  line-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 按钮颜色、深色模式适配等 */

/* ===== 移动端分享按钮固定底部 ===== */
@media (max-width: 720px) {
  .share-row {
    position: fixed !important;
    bottom: 54px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    padding: 8px 12px !important;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 70%, rgba(255,255,255,0)) !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  
  .share-row input[type="button"] {
    flex: 1 !important;
    max-width: 200px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    height: auto !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
  }
  
  /* 给计算器卡片加底部 padding，防止内容被按钮遮挡 */
  .zj-calculator-card {
    padding-bottom: 120px !important;
  }
}