/* ==========================================================================
   Site-wide base stylesheet (inherited from the naming site, still the skeleton every page shares)
   Design language: cinnabar / gilt / rice-paper cream
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Type */
  --ink: #201d2b;          /* Ink black */
  --ink-soft: #4a4557;     /* Secondary text */
  --muted: #8a8496;        /* Faded text */
  --vermilion: #c0392b;    /* Cinnabar red (the primary brand colour) */
  --vermilion-dark: #a12c20;
  --vermilion-soft: #f6e7e4;
  --gold: #c39b52;         /* Gilt */
  --gold-soft: #f3e9d4;
  --jade: #3f7d6e;         /* Celadon green (supporting) */

  /* Backgrounds */
  --paper: #ffffff;
  --cream: #fbf6ee;        /* Rice-paper cream */
  --cream-mid: #f4eadc;    /* The slightly deeper cream at the top of the home page cards */
  --cream-deep: #f4ebdd;
  --line: #ece4d6;         /* Rules */

  /* System */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 10px rgba(32, 29, 43, .05);
  --shadow: 0 10px 34px rgba(32, 29, 43, .08);
  --shadow-lg: 0 20px 60px rgba(32, 29, 43, .12);
  --serif: "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Container: the content width is a flat 1200 (1240 less 20 of padding each side), and that padding is
     controlled by .wrap alone --
     a page must not override it with a three-value padding, or its content ends up 40px wider than every other page */
  --maxw: 1240px;
}

/* ---------- Base reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 15px;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--vermilion); }
.anchor-target { display: block; position: relative; top: -84px; visibility: hidden; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.serif { font-family: var(--serif); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 60px 0; }

/* Section headings
   overflow-x: clip is load-bearing: the two decorative rules below are absolutely positioned 16px outside
   the heading, so the moment the heading wraps and fills the whole container they are pushed outside it and
   widen the document by about 50px. That is invisible on a desktop, but on a phone the whole page ends up
   shifted left with a strip of ground showing down the right-hand side -- and body's overflow-x: hidden does
   not hold that back in iOS Safari. clip keeps the rules visible on a wide screen and trims them on a narrow
   one, without creating a scroll container (so the sticky nav still works). */
.sec-head { text-align: center; margin-bottom: 40px; overflow-x: clip; }
.sec-head .zh {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  display: inline-block;
}
.sec-head .zh::before,
.sec-head .zh::after {
  content: ""; position: absolute; top: 50%; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.sec-head .zh::before { right: calc(100% + 16px); transform: scaleX(-1); }
.sec-head .zh::after { left: calc(100% + 16px); }
/* Below 900px the heading takes the full width anyway, so the rules have nowhere to sit: they are dropped
   outright, which also covers the Safari versions that do not support overflow-x: clip */
@media (max-width: 900px) {
  .sec-head .zh::before,
  .sec-head .zh::after { display: none; }
}
.sec-head .en { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }

/* ---------- Top nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 246, 238, .85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; height: 64px; gap: 28px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--ink); }
.logo .seal {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark));
  color: #fff; display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 4px 12px rgba(192, 57, 43, .35);
}
.nav-menu { display: flex; gap: 26px; margin-left: 8px; }
.nav-menu a { font-size: 15px; font-weight: 500; color: var(--ink-soft); position: relative; padding: 4px 0; }
.nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--vermilion); transition: width .25s; }
.nav-menu a:hover::after { width: 100%; }
/* Current section: red text + persistent underline */
.nav-menu a.active { color: var(--vermilion); font-weight: 700; }
.nav-menu a.active::after { width: 100%; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* These two nav buttons are a size down from the CTAs in the body, so they do not pull attention off the main content (below 640px the whole .nav-cta is hidden) */
.nav-cta .btn { padding: 7px 16px; font-size: 13.5px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary { background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); color: #fff; box-shadow: 0 6px 18px rgba(192, 57, 43, .3); }
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(192, 57, 43, .4); }
.btn-ghost { border: 1px solid var(--gold); color: var(--gold); }
.btn-ghost:hover { background: var(--gold); color: #fff; }
.nav-toggle { display: none; font-size: 24px; margin-left: auto; color: var(--ink); }
/* 1025-1180px (narrow desktop / laptop): ten nav items reach the container edge, so the spacing tightens to avoid wrapping; at 1024px and below see the hamburger block further down */
@media (max-width: 1180px) {
  .nav-inner { gap: 20px; }
  .nav-menu { gap: 18px; }
}
/* iPad and below (covering 768/810/834 portrait and 1024 landscape): ten nav items are too wide, so they
   collapse into a hamburger, as on a phone.
   The open state is positioned by js/main.js with an inline style on click (absolutely positioned, top:64px, full-width dropdown); this block only handles the default collapsed state and the stacked list */
@media (max-width: 1024px) {
  .nav-menu { display: none; gap: 0; margin-left: 0; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-menu a { padding: 12px 20px; margin: 0 -20px; border-bottom: 1px solid var(--line); }
  .nav-menu a:last-child { border-bottom: none; }
  .nav-menu a::after { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(195, 155, 82, .16), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(192, 57, 43, .1), transparent 60%),
    var(--cream);
  padding: 88px 0 76px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/hero-bg.webp') center / cover no-repeat;
  opacity: .35;
  pointer-events: none;
}
.hero::after { display: none; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--gold-soft); color: #97701f; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.hero h1 { font-family: var(--serif); font-size: 46px; line-height: 1.25; font-weight: 700; letter-spacing: 1px; }
.hero h1 .hl { color: var(--vermilion); }
.hero .lead { margin-top: 18px; font-size: 17px; color: var(--ink-soft); max-width: 460px; }
.hero-stats { display: flex; gap: 32px; margin-top: 28px; }
.hero-stats .num { font-family: var(--serif); font-size: 28px; font-weight: 700; color: var(--vermilion); }
.hero-stats .lbl { font-size: 13px; color: var(--muted); }

/* Hero image carousel */
.hero-carousel { position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/3; background: var(--cream); }
.hc-track { position: absolute; inset: 0; }
.hc-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .7s ease; }
.hc-slide.active { opacity: 1; }
.hc-overlay { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 32px 36px;
  background: linear-gradient(to top, rgba(20,8,4,.65) 0%, rgba(20,8,4,.1) 55%, transparent 100%); }
.hc-overlay .hero-badge { margin-bottom: 12px; }
.hc-overlay h1 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hc-overlay .lead { color: rgba(255,255,255,.88); font-size: 15px; max-width: 400px; }
.hc-overlay .hero-stats { margin-top: 20px; }
.hc-overlay .hero-stats .num { color: #f9d47a; }
.hc-overlay .hero-stats .lbl { color: rgba(255,255,255,.75); }
.hc-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3; }
.hc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45);
  cursor: pointer; transition: .3s; }
.hc-dot.active { background: #fff; transform: scale(1.25); }

/* Hero form card */
.name-card {
  position: relative; overflow: hidden;
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 18px 20px 16px; border: 1px solid var(--line);
}
.name-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--vermilion), var(--gold)); }
.name-card h3 { font-family: var(--serif); font-size: 16px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.name-card h3::before { content: "名"; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 4px 10px rgba(192, 57, 43, .28); }
.name-card .sub { font-size: 11px; color: var(--muted); margin-bottom: 11px; }
/* The form inside the home page card is more compact (scoped to .name-card alone, leaving inner-page forms untouched) */
.name-card .field { margin-bottom: 8px; }
.name-card .field label { margin-bottom: 3px; font-size: 11px; }
.name-card .field input, .name-card .field select { padding: 7px 10px; font-size: 12px; }
.name-card .seg-item { padding: 7px; font-size: 12px; }
.name-card .name-status-row { grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; color: var(--ink); background: var(--cream); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:hover:not(:focus), .field select:hover:not(:focus) { border-color: #dcccae; }
.field input:focus, .field select:focus { outline: none; border-color: var(--vermilion); box-shadow: 0 0 0 3px var(--vermilion-soft); background-color: #fff; }
/* Selects: one custom arrow throughout (the native arrow differs from browser to browser) */
.field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a8496' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; }
.field select:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c0392b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Native date inputs: iOS Safari centres the value by default, so it is forced left to match the desktop and the selects beside it (date and datetime-local are handled together) */
.field input[type="date"], .field input[type="datetime-local"] { text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value, .field input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-datetime-edit, .field input[type="datetime-local"]::-webkit-datetime-edit { text-align: left; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.seg { display: flex; gap: 8px; }
.seg-item {
  flex: 1; padding: 11px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--cream); transition: all .2s; cursor: pointer;
}
.seg-item:not(.active):hover { border-color: var(--gold); color: var(--ink); }
.seg-item.active { border-color: var(--vermilion); background: var(--vermilion-soft); color: var(--vermilion); box-shadow: inset 0 0 0 1px var(--vermilion); }
.name-card .btn-primary { width: 100%; margin-top: 5px; padding: 9px; font-size: 13px; letter-spacing: 1px; }
.name-card .tip { text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ---------- Name tabs + cards ---------- */
.ntabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--cream-mid); }
.ntab { padding: 7px 18px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; font-size: 14px; color: var(--ink-soft); cursor: pointer;
  transition: .18s; font-family: var(--serif); }
.ntab:hover { border-color: var(--vermilion); color: var(--vermilion); }
.ntab.active { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.ncards { position: relative; }
.ncard { display: none; text-decoration: none; color: inherit; }
.ncard.active { display: block; }
/* header: glyphs + score + button */
.nc-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line); background: var(--paper); }
.nc-chars { display: flex; gap: 6px; flex-shrink: 0; }
.nc-char { display: flex; flex-direction: column; align-items: center;
  width: 64px; height: 64px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 6px;
  justify-content: center; background: #fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cline x1='0' y1='32' x2='64' y2='32' stroke='%23ddd' stroke-width='0.6' stroke-dasharray='3,3'/%3E%3Cline x1='32' y1='0' x2='32' y2='64' stroke='%23ddd' stroke-width='0.6' stroke-dasharray='3,3'/%3E%3Cline x1='0' y1='0' x2='64' y2='64' stroke='%23ddd' stroke-width='0.6' stroke-dasharray='3,3'/%3E%3Cline x1='64' y1='0' x2='0' y2='64' stroke='%23ddd' stroke-width='0.6' stroke-dasharray='3,3'/%3E%3C/svg%3E")
  no-repeat center/100% 100%; }
.nc-py { display: none; }
.nc-hz { font-size: 32px; font-family: var(--serif); color: var(--ink); line-height: 1; font-weight: 700; }
.nc-score-block { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  background: var(--vermilion-soft); border-radius: 8px; padding: 8px 10px; min-height: 52px; flex-shrink: 0; }
.nc-score { font-size: 28px; font-weight: 700; color: var(--vermilion); font-family: var(--serif); line-height: 1; }
.nc-score-unit { font-size: 13px; color: var(--vermilion); }
.nc-score-info { display: flex; flex-direction: column; font-size: 11px; line-height: 1.4;
  color: var(--ink-soft); }
.nc-score-info b { font-size: 12px; color: var(--ink); }
.nc-btn { display: none; }
/* The three analysis boxes */
.nc-boxes { display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  border-bottom: 1px solid var(--line); }
.nc-box { padding: 10px 10px 8px; border-right: 1px solid var(--line);
  background: #fffdf9; }
.nc-box:last-child { border-right: none; }
.nc-box-num { font-size: 16px; font-weight: 700; color: var(--vermilion); font-family: var(--serif); display: block; line-height: 1; }
.nc-box-label { font-size: 11px; color: var(--muted); display: block; margin: 2px 0 6px; }
.nc-box-val { font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--serif); }
.nc-box-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
/* The gloss row */
.nc-meanings { padding: 0; }
.nc-row { display: flex; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.nc-row-last { border-bottom: none; }
.nc-row-label { flex-shrink: 0; font-size: 11.5px; font-weight: 600;
  color: var(--vermilion); background: var(--vermilion-soft); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap; margin-top: 1px; }
.nc-row-val { font-size: 12px; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Dictionary tabs + cards ---------- */
.ztabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: var(--cream-mid); }
.ztab { padding: 7px 18px; border-radius: 6px; border: 1px solid var(--line);
  background: #fff; font-size: 14px; color: var(--ink-soft); cursor: pointer;
  transition: .18s; font-family: var(--serif); font-weight: 700; }
.ztab:hover { border-color: var(--vermilion); color: var(--vermilion); }
.ztab.active { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.zcards { position: relative; }
.zcard { display: none; }
.zcard.active { display: block; }
.zc-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line); background: var(--paper); }
.zc-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; height: 64px; }
.zc-cell { padding: 0 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: row; align-items: center; gap: 4px; background: #fffdf9; }
.zc-cell:nth-child(4n) { border-right: none; }
.zc-cell:nth-child(n+5) { border-bottom: none; }
.zc-label { font-size: 10px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.zc-label::after { content: '：'; }
.zc-val { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-py-val { font-style: italic; color: var(--vermilion); }
.zc-big { font-size: 14px; font-family: var(--serif); }
.zc-num { font-size: 14px; font-family: var(--serif); color: var(--vermilion); }
.zc-desc { margin: 0; padding: 10px 16px 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.65; }
.zc-etym { padding: 10px 16px 14px; border-top: 1px dashed var(--line); margin-top: 8px; }
.zc-quote { font-size: 12.5px; color: var(--ink); background: var(--cream);
  padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; line-height: 1.7; }
.zc-src { font-size: 11px; color: var(--muted); margin-left: 8px; }
.zc-pt { margin-bottom: 8px; }
.zc-pt:last-child { margin-bottom: 0; }
.zc-ph { font-size: 12px; font-weight: 700; color: var(--vermilion); display: block; margin-bottom: 3px; }
.zc-pt p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 640px) {
  .hero-carousel { aspect-ratio: 4/2.6; }
  .ztabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 12px; }
  .ztabs::-webkit-scrollbar { display: none; }
  .ztab { flex-shrink: 0; }
  /* The dictionary card on a phone: grid box + pinyin + tone share one row, with the 6 cells as 3x2 below */
  .zc-header { display: grid; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 44px auto auto; gap: 6px; padding: 10px 12px 8px; align-items: stretch; }
  .zc-header .nc-chars { grid-column: 1; grid-row: 1; display: flex; justify-content: center; align-items: center; }
  .zc-grid { display: contents; }
  .zc-cell { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 6px;
    justify-content: center; background: #fffdf9; border: 1px solid var(--line); border-radius: 4px; }
  /* Reset the desktop rule that strips the border */
  .zc-cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .zc-cell:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  /* Exact placement: cells 1-2 on row 1, cells 3-8 on rows 2-3 */
  .zc-grid .zc-cell:nth-child(1) { grid-column: 2; grid-row: 1; }
  .zc-grid .zc-cell:nth-child(2) { grid-column: 3; grid-row: 1; }
  .zc-grid .zc-cell:nth-child(3) { grid-column: 1; grid-row: 2; }
  .zc-grid .zc-cell:nth-child(4) { grid-column: 2; grid-row: 2; }
  .zc-grid .zc-cell:nth-child(5) { grid-column: 3; grid-row: 2; }
  .zc-grid .zc-cell:nth-child(6) { grid-column: 1; grid-row: 3; }
  .zc-grid .zc-cell:nth-child(7) { grid-column: 2; grid-row: 3; }
  .zc-grid .zc-cell:nth-child(8) { grid-column: 3; grid-row: 3; }
}

/* ---------- Three-column content nav ---------- */
.nav3-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.nav3-col { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.nav3-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  background: var(--cream-mid); border-bottom: 1px solid var(--line); }
.nav3-icon { font-size: 22px; flex-shrink: 0; }
.nav3-head h3 { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--ink); flex: 1; margin: 0; }
.nav3-more { font-size: 12px; color: var(--vermilion); text-decoration: none; white-space: nowrap; }
.nav3-more:hover { text-decoration: underline; }
.name-detail-link, .zi-detail-link { padding: 9px 14px; border-radius: 6px; background: var(--vermilion);
  color: #fff; font-weight: 700; line-height: 1; transition: background .18s, transform .18s; }
.name-detail-link:hover, .zi-detail-link:hover { background: var(--vermilion-dark); color: #fff;
  text-decoration: none; transform: translateY(-1px); }
.nav3-list { list-style: none; padding: 0; margin: 0; }
.nav3-list li { border-bottom: 1px solid var(--line); }
.nav3-list li:last-child { border-bottom: none; }
.nav3-list a { display: block; padding: 11px 18px 11px 32px; font-size: 13.5px; color: var(--ink-soft);
  text-decoration: none; transition: background .18s, color .18s; line-height: 1.5; position: relative; }
.nav3-list a::before { content: '\25B6'; font-size: 9px; color: var(--vermilion);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.nav3-list a:hover { background: var(--cream); color: var(--vermilion); }

/* ---------- Trust bar ---------- */
.trust-strip { background: linear-gradient(90deg, var(--vermilion) 0%, #a93226 100%); padding: 14px 0; }
.trust-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 8px; }
.trust-item { text-align: center; color: #fff; }
.trust-num { display: block; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.2; }
.trust-lbl { font-size: 12px; opacity: .82; }

/* ---------- Tool pill grid ---------- */
.tool-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tool-pill { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); text-decoration: none;
  transition: transform .2s, box-shadow .2s; }
.tool-pill:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-pill-ic { font-size: 26px; flex-shrink: 0; }
.tool-pill-t { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink); display: block; }
.tool-pill-s { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; }
.tool-pill.t-red  { border-left: 3px solid var(--vermilion); }
.tool-pill.t-gold { border-left: 3px solid var(--gold); }
.tool-pill.t-blue { border-left: 3px solid #4a7fc1; }
.tool-pill.t-green { border-left: 3px solid #4caf50; }
.tool-pill.t-orange { border-left: 3px solid #e08e2c; }
.tool-pill.t-purple { border-left: 3px solid #9c6db9; }
.tool-pill.t-pink  { border-left: 3px solid #e05c8a; }
.tool-pill.t-teal  { border-left: 3px solid #2e9e91; }
.tool-pill.t-gray  { border-left: 3px solid #7a8694; }

/* ---------- Three-step flow ---------- */
.steps-sec { background: var(--cream); }
.steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: start; }
.step-item { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; text-align: center; }
.step-num { font-family: var(--serif); font-size: 40px; font-weight: 700;
  background: linear-gradient(135deg, var(--vermilion), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 12px; line-height: 1; }
.step-body h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.step-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.step-arrow { font-size: 24px; color: var(--gold); padding: 0 16px; display: flex; align-items: center; margin-top: 40px; }

/* ---------- Score bar ---------- */
.score-bars { margin: 14px 0; }
.sb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; }
.sb-row span { width: 64px; color: var(--muted); flex-shrink: 0; }
.sb-track { flex: 1; height: 6px; background: var(--line); border-radius: 4px; overflow: hidden; }
.sb-fill { height: 100%; background: linear-gradient(90deg, var(--vermilion), var(--gold)); border-radius: 4px; }
.sb-row b { width: 26px; text-align: right; font-size: 12px; color: var(--vermilion); font-weight: 700; }
.score-total .of { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* ---------- Divination cards, upgraded ---------- */
.xuan-card { position: relative; overflow: hidden; }
.xuan-icon { font-size: 32px; margin-bottom: 12px; display: block; }

/* ---------- Tools, three columns ---------- */
.tools-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tt-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 0;
  transition: transform .25s, box-shadow .25s, border-color .25s; }
.tt-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(185,56,37,.1); border-color: var(--vermilion); }
.tt-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); flex: 1 1 auto; }
.tt-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 24px;
  display: grid; place-items: center; flex-shrink: 0; }
.tt-icon--red  { background: var(--vermilion-soft); }
.tt-icon--gold { background: var(--gold-soft); }
.tt-icon--blue { background: #e8f0fe; }
.tt-head h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.tt-head p  { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.4; }
.tt-list { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.tt-list li { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.tt-list li:last-child { border-bottom: none; }
.tt-list a { font-size: 14px; color: var(--vermilion); font-weight: 600;
  text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.tt-list a:hover { text-decoration: underline; }
.tt-list span { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.4; }
.tt-btn { display: inline-block; padding: 9px 20px; background: var(--vermilion);
  color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600;
  text-decoration: none; text-align: center; transition: opacity .18s; }
.tt-btn:hover { opacity: .85; }
@media (max-width: 900px) { .tools-trio { grid-template-columns: 1fr; } }
.dual-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dual-block { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.dual-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.dual-icon { font-size: 36px; flex-shrink: 0; }
.dual-head h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 4px; color: var(--ink); }
.dual-head p { font-size: 13px; color: var(--muted); }
.dual-list { list-style: none; padding: 0; margin: 0 0 4px; }
.dual-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dual-list li:last-child { border-bottom: none; }
.dual-list a { font-weight: 600; color: var(--vermilion); text-decoration: none; white-space: nowrap; }
.dual-list a:hover { text-decoration: underline; }
.dual-list span { color: var(--muted); font-size: 13px; }

/* ---------- Resources, two columns ---------- */
.resource-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.resource-block {  }
.res-title { font-family: var(--serif); font-size: 18px; margin-bottom: 16px; color: var(--ink); }
.dict-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dict-mini { display: flex; align-items: center; gap: 6px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  font-size: 13.5px; color: var(--ink); text-decoration: none; transition: .2s; }
.dict-mini:hover { background: var(--cream); border-color: var(--gold); color: var(--vermilion); }

/* ---------- CTA, upgraded ---------- */
.cta-sec { background: linear-gradient(135deg, #1a0a06 0%, #2c1006 100%); }
.cta-sec .cta-band { background: transparent; border: none; padding: 48px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 100%; border-radius: 0; }
.cta-left h3 { font-family: var(--serif); font-size: 28px; color: #fff; margin-bottom: 10px; }
.cta-left p { font-size: 15px; color: rgba(255,255,255,.72); margin-bottom: 24px; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-main { font-size: 15px; padding: 12px 28px; }
.cta-tags { display: flex; flex-direction: column; gap: 10px; }
.cta-tags span { color: rgba(255,255,255,.75); font-size: 14px; white-space: nowrap; }

/* ---------- Article cards, upgraded ---------- */
.article-card { position: relative; overflow: hidden; }
.ac-cat { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--vermilion), var(--gold)); }
.article-card .body { padding-top: 8px; }

/* ---------- Feature matrix ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative; overflow: hidden;
}
.feature-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--vermilion), var(--gold)); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; font-size: 27px; background: var(--gold-soft); }
.feature-card:nth-child(2n) .ic { background: var(--vermilion-soft); }
/* One consistent line-icon set */
.ic svg { width: 1em; height: 1em; display: block; margin: 0 auto; color: var(--vermilion); }
.xuan-card .ic { display: grid; place-items: center; height: 1em; }
.feature-card h4 { font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.feature-card p { font-size: 13px; color: var(--muted); }

/* ---------- Sample card: the six-axis score ---------- */
.demo { background: var(--cream); }
.score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.score-card {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 22px; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s;
}
.score-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.score-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.score-name { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 4px; color: var(--ink); }
.score-tag { font-size: 12px; color: var(--jade); background: rgba(63, 125, 110, .1); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.score-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.score-total .val { font-family: var(--serif); font-size: 44px; font-weight: 700; color: var(--vermilion); line-height: 1; }
.score-total .of { font-size: 13px; color: var(--muted); }
.score-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.score-dim { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.score-dim .k { color: var(--ink-soft); }
.score-dim .v { font-weight: 700; color: var(--gold); font-family: var(--serif); }
.score-card .more { display: block; text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 600; color: var(--vermilion); }

/* ---------- Divination, brought together ---------- */
.xuan { background: var(--cream); }
.xuan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.xuan-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; }
.xuan-card .ic { font-size: 30px; margin-bottom: 12px; }
.xuan-card h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 6px; }
.xuan-card p { font-size: 12.5px; color: var(--muted); }

/* ---------- Surnames / dictionary entry points ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pill { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-family: var(--serif); font-weight: 600; transition: all .2s; }
.pill:hover { background: var(--vermilion); color: #fff; border-color: var(--vermilion); transform: translateY(-2px); }
.pill.more { color: var(--vermilion); border-style: dashed; }
.pill.more:hover { color: #fff; border-style: solid; }

.dict-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dict-card { display: flex; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform .2s, box-shadow .2s; }
.dict-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dict-card .ic { width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--gold-soft); display: grid; place-items: center; font-size: 24px; }
.dict-card h4 { font-family: var(--serif); font-size: 17px; }
.dict-card p { font-size: 12.5px; color: var(--muted); }

/* ---------- Academy / articles ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Guide list page outer card (the one with article-grid) gets left/right padding narrowed like other cards */
@media (max-width: 900px) {
  .card:has(>.article-grid) { padding-left: 12px; padding-right: 12px; }
}
.article-switch-group { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.article-switch-group:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(185,56,37,.1); border-color: var(--vermilion); }
.article-switch-tabs { display: flex; justify-content: stretch; gap: 10px; padding: 16px 0 13px;
  border-bottom: 1px dashed var(--line); margin: 0 20px; }
.article-switch-tab { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--vermilion-soft); border-radius: 6px;
  background: var(--vermilion-soft); color: var(--vermilion); font-size: 12px; line-height: 1; font-weight: 700; cursor: pointer; }
.article-switch-tab.active { border-color: var(--vermilion); background: var(--vermilion); color: #fff; }
.article-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.article-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(185,56,37,.1); border-color: var(--vermilion); }
/* The card on the academy listing page: kept apart from the home page's .ac-body/.ac-tag, so the global link hover does not turn the whole card's text red */
.article-grid .article-card > .body { padding: 20px 12px; flex: 1; display: flex; flex-direction: column; }
.article-grid .article-card .cat { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 20px;
  color: var(--vermilion); background: var(--vermilion-soft); font-size: 11px; font-weight: 700; margin-bottom: 10px; }
.article-grid .article-card h4,
.article-grid .article-card h2 { color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.45; margin-bottom: 10px; }
.article-grid .article-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.65; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.article-grid .article-card:hover h4,
.article-grid .article-card:hover h2 { color: var(--vermilion); }
.article-grid .article-card:hover p { color: var(--ink-soft); }
.article-grid .article-card:hover .date { color: var(--muted); }
/* The academy switcher card on the home page: the outer element owns the border, and one column only ever shows a single piece from the current category */
.article-switch-group .article-switch-panel { display: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.article-switch-group .article-switch-panel.active { display: flex; }
.article-switch-group .article-switch-panel:hover { transform: none; box-shadow: none; border-color: transparent; }
.article-switch-group .article-switch-panel .ac-tag { display: none; }
.article-related-list { margin: 0 22px 18px; padding-top: 5px; border-top: 1px dashed var(--line); display: grid; }
.article-related-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 0; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line); font-size: 12px; line-height: 1.35; cursor: pointer; }
.article-related-item:last-child { border-bottom: 0; }
.article-related-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.article-related-date { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.article-related-item:hover .article-related-title { color: var(--vermilion); }
.article-related-badge { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: #f1f1f1; color: #888; font-size: 11px; font-weight: 700; }
.article-related-badge.hot { background: #f04b3e; color: #fff; }
.article-related-badge.recommend { background: #18b86b; color: #fff; }
.article-related-badge.rank3 { background: #159fd3; color: #fff; }
.article-related-badge.rank4 { background: #8b6fc2; color: #fff; }
.article-related-badge.rank5 { background: #d89524; color: #fff; }
.ac-stripe { display: none; }
.ac-stripe--gold { display: none; }
.ac-body { padding: 20px 22px 18px; flex: 1; display: flex; flex-direction: column; }
.ac-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 20px; font-size: 11px;
  font-weight: 700; color: var(--vermilion); background: var(--vermilion-soft); margin-bottom: 10px; }
.ac-tag--gold { color: #8a5c00; background: var(--gold-soft); }
.ac-body h4 { font-family: var(--serif); font-size: 17px; line-height: 1.45; margin-bottom: 10px; color: var(--ink); }
.ac-body h4 a { color: inherit; text-decoration: none; cursor: pointer; }
.ac-body h4 a:hover { color: var(--vermilion); }
.ac-body p { font-size: 13px; color: var(--muted); line-height: 1.65; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-read { display: block; margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line); font-size: 13px; color: var(--vermilion); font-weight: 600; }
.article-card .date { display: block; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
/* Paging on the listing (academy): page-hidden and the filter's art-hidden are independent, and a card shows only when it carries neither */
.page-hidden { display: none !important; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 26px; }
.pager button { min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; font-size: 14px; color: var(--ink-soft); cursor: pointer; transition: all .2s; }
.pager button:hover:not(:disabled) { border-color: var(--vermilion); color: var(--vermilion); }
.pager button.pg-num.active { background: var(--vermilion); border-color: var(--vermilion); color: #fff; font-weight: 700; }
.pager button:disabled { opacity: .45; cursor: not-allowed; }
.pager .pg-dot { color: var(--muted); padding: 0 2px; font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); border-radius: var(--radius); padding: 46px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: "吉"; position: absolute; right: 20px; bottom: -40px; font-family: var(--serif); font-size: 200px; color: rgba(255,255,255,.08); }
.cta-band h3 { font-family: var(--serif); font-size: 28px; margin-bottom: 10px; position: relative; }
.cta-band p { opacity: .9; margin-bottom: 24px; position: relative; }
.cta-band .btn { background: #fff; color: var(--vermilion); position: relative; }
.cta-band .btn:hover { transform: translateY(-2px); }

/* ---------- The ad slot on article pages (four in one, switchable, four colours and four icons, height aligned with .cta-band) ---------- */
/* Every tab and panel carries --c (primary), --c2 (dark) and --c3 (pale ground) inline; all have fallbacks, so a missing one will not break it */
.ad-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.ad-box .ad-tabs { display: flex; background: var(--cream-deep); }
.ad-box .ad-tab { flex: 1; padding: 14px 8px; text-align: center; cursor: pointer; font-size: 14px; color: var(--ink-soft); -webkit-user-select: none; user-select: none; border-bottom: 2px solid transparent; transition: color .2s ease, background .2s ease; }
.ad-box .ad-tab:hover { color: var(--c, var(--vermilion)); }
.ad-box .ad-tab.active { background: var(--paper); color: var(--c, var(--vermilion)); border-bottom-color: var(--c, var(--vermilion)); font-weight: 700; }
.ad-box .ad-panel { display: none; align-items: center; gap: 22px; flex-wrap: wrap; padding: 34px 30px; background: var(--c3, var(--cream)); }
.ad-box .ad-panel.active { display: flex; }
.ad-box .ico { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 27px; box-shadow: var(--shadow-sm); }
.ad-box .txt { flex: 1; min-width: 200px; }
.ad-box .txt h4 { font-family: var(--serif); font-size: 19px; color: var(--c, var(--vermilion)); margin-bottom: 7px; }
.ad-box .txt p { font-size: 13px; color: var(--ink-soft); line-height: 1.8; }
.ad-box .tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ad-box .tags span { font-size: 12px; padding: 5px 11px; border-radius: 4px; color: var(--c2, var(--vermilion-dark)); background: var(--paper); }
.ad-box .go { text-align: center; }
.ad-box .go .tip { display: block; font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.ad-box .go a { display: inline-block; padding: 12px 28px; border-radius: 24px; font-size: 14px; font-weight: 700; color: #fff; background: var(--c, var(--vermilion)); background: linear-gradient(135deg, var(--c, var(--vermilion)), var(--c2, var(--vermilion-dark))); box-shadow: 0 6px 16px rgba(32,29,43,.16); }
.ad-box .go a:hover { transform: translateY(-2px); }
@media (max-width: 860px) {
  .ad-box .ad-panel { padding: 22px 18px; gap: 14px; }
  .ad-box .ad-tab { font-size: 12px; padding: 11px 4px; }
  .ad-box .tags, .ad-box .go { justify-content: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  /* The ad slot on a phone: everything scales down; icon + copy share one row (the blurb pinned to two lines), the prompt is hidden, the button becomes a small rectangle and the tags turn into three small cards at the bottom */
  .ad-box .ad-tab { font-size: 11px; padding: 9px 3px; gap: 2px; }
  .ad-box .ad-panel { padding: 15px 14px; gap: 10px 12px; align-items: center; }
  .ad-box .ico { width: 42px; height: 42px; font-size: 21px; }
  .ad-box .txt { min-width: 0; }
  .ad-box .txt h4 { font-size: 15.5px; margin-bottom: 3px; }
  .ad-box .txt p { font-size: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Icon + copy sit on the same row as the button, copy to the left and button hard right */
  .ad-box .go { order: 1; flex: none; display: flex; align-items: center; margin-left: auto; transform: translateX(6px); }
  .ad-box .go .tip { display: none; }
  .ad-box .go a { padding: 8px 18px; font-size: 12.5px; border-radius: 4px; white-space: nowrap; box-shadow: 0 4px 12px rgba(32,29,43,.14); }
  /* The three tags become one row of three small cards at the very bottom; long copy shrinks its type rather than wrapping */
  .ad-box .tags { order: 2; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ad-box .tags span { text-align: center; white-space: nowrap; overflow: hidden; font-size: clamp(9px, 2.6vw, 11px); letter-spacing: -.2px; padding: 8px 2px; border: 1px solid var(--line); background: var(--paper); border-radius: 6px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #b8b3c4; padding: 50px 0 24px; margin-top: 40px; }
/* Footer: one brand column plus three evenly spaced link columns across the full wrapper. */
.footer-top { display: grid; grid-template-columns: minmax(280px, 360px) repeat(3, minmax(0, 1fr)); gap: 32px clamp(36px, 5vw, 76px); padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-top > :nth-child(n + 2) { justify-self: stretch; margin-left: 0; }
.footer .logo { color: #fff; margin-bottom: 14px; }
.footer .desc { font-size: 13px; line-height: 1.8; max-width: 300px; }
.footer h5 { color: #fff; font-size: 15px; margin-bottom: 16px; font-family: var(--serif); }
.footer li { margin-bottom: 10px; font-size: 13.5px; }
.footer li a:hover { color: var(--gold); }
.footer-bottom { text-align: center; font-size: 12.5px; color: #6f6a7d; padding-top: 22px; }
.footer-bottom a { color: #8a8496; }

/* ---------- Footer share ---------- */
.footer-share { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 0 18px; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); margin-top: 8px; flex-wrap: wrap; }
.footer-share-label { font-size: 13px; color: #a8a2b8; letter-spacing: .04em; margin-right: 4px; }
.footer-share-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; padding: 0; }
.footer-share-btn:hover { background: rgba(195,155,82,.18); border-color: var(--gold); transform: translateY(-1px); }
.footer-share-btn:active { transform: translateY(0); }
.footer-share-btn svg { width: 24px; height: 24px; fill: currentColor; transition: color .2s ease; }
.footer-share-btn[data-net="copy"] svg { stroke: currentColor; fill: none; stroke-width: 2; }
.footer-share-btn[data-net="wx"]   { color: #07C160; }
.footer-share-btn[data-net="wb"]   { color: #E6162D; }
.footer-share-btn[data-net="qq"]   { color: #12B7F5; }
.footer-share-btn[data-net="fb"]   { color: #1877F2; }
.footer-share-btn[data-net="x"]    { color: #FFFFFF; }
.footer-share-btn[data-net="wa"]   { color: #25D366; }
.footer-share-btn[data-net="copy"] { color: #a8a2b8; }
.footer-share-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); filter: brightness(1.18); }
.footer-share-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(0,0,0,.86); color: #fff; padding: 10px 20px; border-radius: 22px; font-size: 14px; opacity: 0; transition: all .25s ease; pointer-events: none; z-index: 9999; }
.footer-share-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Inline variant: tucked under the brand description in the first footer column.
   No borders, no centering; hugs the text above it like a part of the same block. */
.footer-share-inline { display: flex; align-items: center; gap: 12px; padding: 0; margin-top: 18px; border: 0; flex-wrap: wrap; justify-content: flex-start; }
.footer-share-inline .footer-share-label { font-size: 13px; color: #a8a2b8; margin-right: 2px; }
.footer-share-inline .footer-share-btn { width: 34px; height: 34px; border-color: rgba(255,255,255,.18); }
.footer-share-inline .footer-share-btn svg { width: 22px; height: 22px; }
/* Facebook f 字符在 24×24 viewBox 里只占约 15×17 的子块(约 65% 宽高),自然就显得小,
  用 transform:scale(1.25) 让 f 的视觉面积贴近其他三枚 logo,圆圈和 svg 容器都不动。 */
.footer-share-inline .footer-share-btn[data-net="fb"] svg { transform: scale(1.25); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero::after { font-size: 300px; }
  .feature-grid, .xuan-grid { grid-template-columns: repeat(2, 1fr); }
  .score-grid, .dict-grid, .article-grid { grid-template-columns: 1fr; }
  /* Tablet: the brand spans the first row and the three link columns share the second row evenly. */
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-top > :nth-child(n + 2) { justify-self: start; margin-left: 0; }
  .tool-band { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .dual-modules { grid-template-columns: 1fr; }
  .resource-row { grid-template-columns: 1fr; }
  .nav3-grid { grid-template-columns: 1fr; }
  .cta-sec .cta-band { flex-direction: column; text-align: center; }
  .cta-tags { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 640px) {
  .ntabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 12px; }
  .ntabs::-webkit-scrollbar { display: none; }
  .ntab { flex-shrink: 0; }
  .nav3-grid { grid-template-columns: 1fr; }
  .nc-char { width: 44px; height: 44px; }
  .nc-hz { font-size: 22px; }
  .nc-header { padding: 10px 12px 8px; gap: 8px; }
  .nc-score-block { padding: 6px 8px; min-height: 40px; gap: 4px; }
  .nc-score { font-size: 20px; }
  .nc-score-unit { font-size: 11px; }
  .nc-score-info b { font-size: 11px; }
  .nc-score-info span { font-size: 10px; }
  /* A four-glyph name shows its full grid box first on a phone, so the whole overall score block is hidden; desktop is untouched */
  .ncard.name-four-char .nc-score-block { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 12px; }
  /* The hamburger nav rules have moved up into @media(max-width:1024px), shared by iPad and phones */
  .hero { padding: 56px 0 44px; }
  .hero h1 { font-size: 28px; line-height: 1.3; }
  .hero .lead { font-size: 13px; line-height: 1.6; margin-top: 10px; }
  .hero-stats { gap: 16px; margin-top: 16px; }
  .hero-stats .num { font-size: 20px; }
  .hero-stats .lbl { font-size: 11px; }
  .btn-primary { padding: 11px 22px; font-size: 14px; margin-top: 18px; }
  .feature-grid, .xuan-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 20px; }
  .tool-band { grid-template-columns: 1fr; }
  .trust-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 0; }
  .trust-item { flex: unset; }
  /* Row one, two items: 3 columns each */
  .trust-item:nth-child(1) { grid-column: 1 / 4; }
  .trust-item:nth-child(2) { grid-column: 4 / 7; }
  /* Row two, three items: 2 columns each */
  .trust-item:nth-child(3) { grid-column: 1 / 3; }
  .trust-item:nth-child(4) { grid-column: 3 / 5; }
  .trust-item:nth-child(5) { grid-column: 5 / 7; }
  .dict-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 44px 0; }
  /* Mobile: center the brand and all three equal columns so both sides stay symmetrical. */
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; padding-bottom: 26px; }
  .footer-top > :first-child { grid-column: 1 / -1; text-align: center; }
  .footer-top > :first-child .logo { justify-content: center; }
  .footer-top > :nth-child(n + 2) { justify-self: stretch; min-width: 0; text-align: center; }
  .footer .desc { max-width: none; margin-inline: auto; }
  .footer h5 { font-size: 14px; margin-bottom: 12px; }
  .footer li { font-size: 12.5px; margin-bottom: 9px; }
}

/* ==========================================================================
   Inner-page components (category pages / surnames / dictionary / academy)
   ========================================================================== */

/* ---------- Inner-page banner ---------- */
.subhero {
  background:
    radial-gradient(700px 300px at 85% -20%, rgba(195,155,82,.18), transparent 60%),
    linear-gradient(135deg, var(--cream), var(--cream-deep));
  padding: 40px 0 44px; position: relative; overflow: hidden;
}
.subhero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../img/hero-bg.webp') center / cover no-repeat;
  opacity: .28; pointer-events: none;
}
/* The soft fade-out at the bottom of subhero */
.subhero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 64px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--cream)); pointer-events: none; }
.subhero h1 { font-family: var(--serif); font-size: 34px; font-weight: 700; margin-bottom: 10px; position: relative; z-index: 2; }
.subhero p { color: var(--ink-soft); max-width: 820px; position: relative; z-index: 2; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--vermilion); }
.crumb .sep { margin: 0 8px; opacity: .5; }

/* ---------- Two-column layout ---------- */
/* minmax(0,1fr) stops the left column's min-content from stretching the grid and causing horizontal overflow */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.layout .side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; }

/* Generic content card */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.card > h2 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
.card > .card-sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
/* .block-title is semantically an h2; .card > h2.block-title is spelled out in full to beat the type size and spacing of the .card > h2 rule above */
/* display:flex + gap is kept: some headings still hold a <span> inside (the star sign dates, the name being tested) that gap separates */
.block-title,
.card > h2.block-title { font-family: var(--serif); font-size: 20px; font-weight: 400; margin: 6px 0 18px; display: flex; align-items: center; gap: 10px; }

/* Sidebar card */
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.side-card h4 { font-family: var(--serif); font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.side-card ul li { padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; display: flex; justify-content: space-between; }
.side-card ul li:last-child { border-bottom: none; }
.side-card .rank { color: var(--gold); font-family: var(--serif); font-weight: 700; margin-right: 8px; }
.side-hot { display: flex; flex-wrap: wrap; gap: 8px; }
.side-hot a { font-size: 13px; padding: 5px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; }
.side-hot a:hover { background: var(--vermilion-soft); border-color: var(--vermilion); color: var(--vermilion); }
/* Sidebar - the "good day to name" card */
.today-card .today-date { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.today-card .today-sub { font-size: 13px; color: var(--vermilion); margin-top: 5px; }
.today-card .today-almanac { margin-top: 12px; padding: 10px 12px; background: linear-gradient(135deg, #fffdf7, var(--gold-soft)); border: 1px solid var(--gold); border-radius: var(--radius-sm); }
.today-card .ta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.9; }
.today-card .ta-k { color: var(--muted); }
.today-card .ta-v { color: var(--ink); font-weight: 600; }
.today-card .ta-favor { display: inline-flex; gap: 5px; }
.today-card .ta-favor .rwx { line-height: 18px; }
.today-card .today-tip-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 7px; padding-top: 13px; border-top: 1px dashed var(--line); }
.today-card .today-tip { font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.today-card .today-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
/* Sidebar - the reading promo card */
.ad-card { padding: 0; overflow: hidden; }
.ad-card .ad-tabs { display: flex; background: var(--cream-deep); border-bottom: 1px solid var(--line); }
.ad-card .ad-tab { flex: 1; text-align: center; font-size: 12px; padding: 9px 2px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, background .15s; }
.ad-card .ad-tab.on { color: var(--vermilion); background: var(--paper); border-bottom-color: var(--vermilion); font-weight: 700; }
.ad-card .ad-body { padding: 18px 18px 20px; text-align: center; }
.ad-card .ad-icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.ad-card .ad-title { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ad-card .ad-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 13px; }
.ad-card .ad-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.ad-card .ad-tags span { font-size: 12px; padding: 3px 9px; border-radius: 4px; }
.ad-card .ad-old { color: var(--muted); background: var(--cream-deep); text-decoration: line-through; }
.ad-card .ad-now { color: #fff; background: var(--vermilion); font-weight: 700; }
.ad-card .ad-acc { color: #a9791a; background: var(--gold-soft); }
.ad-card .ad-good { color: var(--vermilion); background: var(--vermilion-soft); }
.ad-card .ad-count { font-size: 12px; color: var(--muted); margin-bottom: 13px; }
.ad-card .ad-count b { color: var(--vermilion); font-family: var(--serif); font-size: 14px; }
.ad-card .ad-btn { display: block; width: 100%; padding: 11px; border-radius: 999px; background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); color: #fff; font-size: 15px; font-weight: 700; text-align: center; box-shadow: 0 6px 16px rgba(192, 57, 43, .28); transition: transform .15s; }
.ad-card .ad-btn:hover { transform: translateY(-1px); }

/* ---------- Filter tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.tab { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all .2s; }
.tab.active, .tab:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
/* The affiliate ad's tag buttons also use .tab and were turned into ovals by the 999px radius above; inside the ad container (J_ggw_*) they go back to rectangles, which leaves the page's own filter tabs alone */
[class*="J_ggw_"] .tab { border-radius: 4px; }

/* ---------- Name list ---------- */
.name-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.name-item { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; text-align: center; transition: all .2s; }
.name-item:hover { background: #fff; border-color: var(--vermilion); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.name-item .nm { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: 2px; }
.name-item .mean { font-size: 12px; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.name-item .wx { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--jade); background: rgba(63,125,110,.1); padding: 1px 8px; border-radius: 999px; }

/* ---------- Recommended names for today - the score card (refreshed daily, rendered by JS) ---------- */
.rec-sub { font-size: 13px; color: var(--muted); margin: -4px 0 16px; }
.rec-sub #recDate { color: var(--vermilion); font-weight: 700; }
.rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rec-card { position: relative; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 14px 12px; transition: all .2s; }
.rec-card:hover { background: #fff; border-color: var(--vermilion); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.rec-hd { display: flex; align-items: flex-start; justify-content: space-between; }
.rec-tag { font-size: 11px; font-weight: 600; color: #97701f; background: var(--gold-soft); padding: 2px 9px; border-radius: 999px; }
.rec-zong { text-align: right; line-height: 1; }
.rec-zong b { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--vermilion); }
.rec-zong span { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.rec-name { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: 3px; margin: 8px 0 3px; }
.rec-py { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-wx { display: inline-flex; gap: 4px; }
.rwx { font-size: 10px; padding: 0 6px; border-radius: 999px; line-height: 16px; font-weight: 600; }
.w-金 { color:#9a7d2e; background:rgba(195,155,82,.18); }
.w-木 { color:#3f7d6e; background:rgba(63,125,110,.14); }
.w-水 { color:#2f6f9f; background:rgba(47,111,159,.14); }
.w-火 { color:#c0392b; background:rgba(192,57,43,.12); }
.w-土 { color:#9c6b34; background:rgba(156,107,52,.14); }
.rec-mean { font-size: 12px; color: var(--ink-soft); margin: 9px 0 10px; line-height: 1.6; min-height: 34px; }
.rec-src { display: inline-block; margin-left: 5px; color: var(--gold); }
.rec-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px 4px; border-top: 1px dashed var(--line); padding-top: 10px; }
.rec-dims .rd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rec-dims .rd i { font-style: normal; font-size: 9.5px; color: var(--muted); }
.rec-dims .rd em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--jade); font-family: var(--serif); }
.rec-dims .rd em.rd-hi { color: var(--vermilion); }
.rec-dims .rd em.rd-lo { color: var(--muted); font-weight: 600; }

/* The theme bar for today (almanac stems and branches / na-yin / the element in favour, all linked) */
.rec-theme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-soft); background: linear-gradient(135deg, #fffdf7, var(--gold-soft)); border: 1px solid var(--gold); border-radius: var(--radius-sm); }
.rec-theme .rt-k { font-weight: 700; color: #97701f; }
.rec-theme .rt-i b { color: var(--vermilion); font-family: var(--serif); font-weight: 700; }
.rec-theme .rt-fav { display: inline-flex; align-items: center; gap: 5px; }
.rec-theme .rt-fav .rwx { line-height: 18px; }
.rec-theme .rt-tip { color: var(--muted); font-size: 11.5px; }
/* Star of the day (the first name is highlighted) */
.rec-card.star { border-color: var(--gold); background: linear-gradient(160deg, #fffdf7, var(--gold-soft)); box-shadow: 0 4px 18px rgba(195,155,82,.18); }
.rec-card .star-badge { position: absolute; top: -9px; left: 12px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--gold), var(--vermilion)); border-radius: 999px; box-shadow: var(--shadow-sm); }
/* "Test this name" - the CTA that funnels through */
.rec-cta { display: block; width: 100%; margin-top: 11px; padding: 6px 0; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; color: #97701f; background: #fff; border: 1px solid var(--gold); border-radius: 999px; cursor: pointer; transition: all .18s; }
.rec-cta:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fff; transform: translateY(-1px); }
/* The form flashes as a hint once the CTA is clicked */
.tool-box.flash { animation: toolFlash 1.3s ease; }
@keyframes toolFlash { 0% { box-shadow: 0 0 0 3px rgba(192,57,43,.45); } 100% { box-shadow: var(--shadow-sm); } }

/* ---------- Inner-page tool card (horizontal form) ---------- */
.tool-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.tool-row { display: grid; grid-template-columns: 160px auto auto 240px; gap: 16px; align-items: end; justify-content: start; }
.tool-row .field { margin-bottom: 0; }
.tool-row .btn-primary { padding: 12px; }
/* ---- The smart naming tool (compact, pro) ---- */
.tool-box { padding: 22px 24px; }
.tool-row { gap: 14px; }
.tool-box .field label { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.tool-row .seg-item { flex: 0 0 auto; padding: 7px 13px; font-size: 12.5px; }
/* The left column narrows under the two-column layout, so the pill group is allowed to wrap and avoid overflow */
.tool-row .seg { flex-wrap: wrap; }
/* Baby naming: the surname column is shortened so the four fields fit on one row */
#nameForm .tool-row { grid-template-columns: 120px auto auto 240px; }
.tool-row .field input { padding: 8px 12px; font-size: 13.5px; }
.tool-row .field select { padding: 8px 34px 8px 12px; font-size: 13.5px; background-position: right 11px center; }
/* Multi-select pill groups (element / style / source) */
.segm { display: flex; flex-wrap: wrap; gap: 8px; }
/* The naming-preference disclosure area (compact) */
.tool-adv { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.tool-adv .block-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; letter-spacing: .3px; }
/* Each row: a fixed label on the left + pills filling the rest of the row */
.adv-line { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 13px; }
.adv-line > label { flex: 0 0 60px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 30px; margin: 0; }
.adv-line .seg, .adv-line .segm { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.adv-line .seg-item { flex: 0 0 auto; padding: 6px 16px; font-size: 12.5px; font-weight: 600; line-height: 18px; cursor: pointer; }
/* Glyphs to include / glyphs to avoid: two input columns */
.tool-adv .field-row { margin-top: 4px; gap: 20px; }
.tool-adv .field-row .field { margin-bottom: 0; }
.tool-adv .field label { margin-bottom: 6px; }
.tool-adv .field input { padding: 9px 12px; font-size: 13.5px; }
/* Bottom: include/avoid glyphs (left) + the primary button (right) on one row */
.tool-submit { display: flex; align-items: flex-end; gap: 20px; margin-top: 4px; }
.tool-submit .field-row { flex: 0 0 auto; grid-template-columns: 180px 210px; margin-top: 0; }
.tool-submit .field-row .field { margin-bottom: 0; }
.tool-submit .btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 40px; font-size: 15px; }
@media (max-width: 640px) {
  .adv-line { flex-direction: column; gap: 6px; }
  .adv-line > label { flex: none; text-align: left; line-height: 1.4; }
  .tool-adv .field-row { grid-template-columns: 1fr; gap: 0; }
  .tool-submit { flex-direction: column; align-items: stretch; gap: 12px; }
  .tool-submit .field-row { flex: 0 0 auto; grid-template-columns: 1fr 1fr; gap: 10px; }
  .tool-submit .btn { width: 100%; }
  /* Phone: controls, type size and spacing all come down one notch */
  .tool-box { padding: 16px 14px; }
  .tool-box .field label { font-size: 11.5px; margin-bottom: 4px; }
  .tool-row { gap: 10px; }
  .tool-row .seg-item { flex: 1; padding: 6px 4px; font-size: 11.5px; }
  /* Stop the iPhone zooming into inputs: every input, select and textarea is pinned to 16px -- iOS Safari zooms in whenever it sees anything under 16px, and 16px flat keeps it still */
  .tool-box .field input, .tool-box .field select, .field textarea { font-size: 16px !important; }
  .tool-box .field input { padding: 7px 10px; }
  .tool-box .field select { padding: 7px 32px 7px 10px; }
  /* Phone: every form control on the site comes down one notch (the fertility / company forms outside .tool-box line up with the baby naming standard too) */
  .field input, .field select,
  .tool-row .field input, .tool-row .field select { padding: 7px 10px; font-size: 16px !important; }
  .field select, .tool-row .field select { padding-right: 32px; background-position: right 11px center; }
  /* iOS Safari date fields: the native appearance is dropped on a phone so the date value sits left-aligned; the native datetime-local control (date + hour) has an intrinsic width that bursts the card, so once the appearance is gone min-width:0 / max-width:100% catch the overflow; without the appearance iOS also loses the control's intrinsic height and "squashes" it, so min-height pushes the height back and lines it up with the inputs and selects on the same row (desktop never enters this breakpoint) */
  .field input[type="date"], .field input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-height: 33px; min-width: 0; max-width: 100%; }
  .tool-adv { margin-top: 14px; padding-top: 14px; }
  .tool-adv .block-sub { font-size: 11.5px; margin-bottom: 10px; }
  .adv-line { margin-bottom: 10px; }
  .adv-line > label { font-size: 11.5px; }
  .adv-line .seg-item { padding: 5px 12px; font-size: 11.5px; }
  .adv-line .seg, .adv-line .segm, .segm { gap: 6px; }
  .tool-submit .btn { padding: 10px 24px; font-size: 14px; }
}

/* ==========================================================================
   The big surnames page
   ========================================================================== */
.bjx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 8px; }
.bjx-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.bjx-stat .num { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--vermilion); line-height: 1.1; }
.bjx-stat .lbl { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Surname quick-find: the input and the "Look up" button share a height (the same box size) */
#bjxForm .field input, #bjxForm .btn { height: 46px; box-sizing: border-box; }

/* Surname grid + hover layer */
.sname-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; }
.sname {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: all .2s;
}
.sname:hover { background: var(--vermilion); color: #fff; border-color: var(--vermilion); transform: translateY(-3px); box-shadow: var(--shadow); z-index: 20; }
.sname .rk { position: absolute; top: 4px; left: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--gold); }
.sname:hover .rk { color: rgba(255,255,255,.7); }

/* The hover info layer */
.sname-pop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: 210px; background: var(--ink); color: #fff; border-radius: 12px; padding: 14px 16px;
  opacity: 0; visibility: hidden; transition: all .22s; z-index: 50; box-shadow: var(--shadow-lg); pointer-events: none;
}
.sname:hover .sname-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sname-pop::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--ink); }
.sname-pop .pop-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; font-family: var(--serif); color: var(--gold); }
.sname-pop .pop-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: #c9c4d4; }
.sname-pop .pop-row b { color: #fff; font-weight: 600; }
.sname-pop .pop-link { display: block; margin-top: 10px; text-align: center; font-size: 12px; color: var(--gold); border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }

/* The surname explainer copy */
.prose { color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
.prose p { margin-bottom: 14px; }
.prose h3 { font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 20px 0 10px; }
.prose strong { color: var(--vermilion); }

/* ---------- Category nav pills ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.subnav a { padding: 9px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.subnav a.on, .subnav a:hover { background: var(--gold-soft); border-color: var(--gold); color: #97701f; }

/* ---------- Responsive (inner pages) ---------- */
/* When the left column of the two-column layout is too narrow to lay the horizontal form out, it becomes two columns */
@media (max-width: 1208px) {
  .tool-row, #nameForm .tool-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout .side { position: static; flex-direction: column; }
  .layout .side > * { flex: 1 1 auto; }
  .tool-row { grid-template-columns: 1fr 1fr; }
  .name-list { grid-template-columns: repeat(3, 1fr); }
  .rec-grid { grid-template-columns: repeat(2, 1fr); }
  .bjx-stats { grid-template-columns: 1fr 1fr; }
  .sname-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 640px) {
  .subhero h1 { font-size: 26px; }
  .tool-row { grid-template-columns: 1fr 1fr; }
  .tool-row .field:nth-child(3), .tool-row .field:nth-child(4) { grid-column: 1 / -1; }
  .name-list { grid-template-columns: repeat(2, 1fr); }
  .sname-grid { grid-template-columns: repeat(6, 1fr); }
  .sname { font-size: 20px; }
  #bjxForm .field input, #bjxForm .btn { height: 36px; font-size: 13px; }
  #bjxForm .btn { padding: 4px 12px; white-space: nowrap; }
  /* The six assessment axes: two per row on a phone */
  #dimGrid { grid-template-columns: 1fr 1fr !important; }
  /* The dictionary's element filter: the 6 tags do not wrap on a phone and split one row evenly */
  .tabs[data-filter="ziWx"] { flex-wrap: nowrap; gap: 6px; }
  .tabs[data-filter="ziWx"] .tab { flex: 1; padding: 7px 2px; font-size: 12px; text-align: center; white-space: nowrap; }
}

/* ==========================================================================
   Signature components (each one belongs to a single category page)
   ========================================================================== */

/* ---------- Generic sub-heading / two columns ---------- */
.h3 { font-family: var(--serif); font-size: 17px; margin: 22px 0 12px; display: flex; align-items: center; gap: 8px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.muted { color: var(--muted); font-size: 13px; }

/* ---------- The five-element bars (strength made visible) ---------- */
.wx-bars { display: flex; flex-direction: column; gap: 10px; }
.wx-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.wx-bar .k { width: 34px; font-weight: 700; font-family: var(--serif); }
.wx-bar .track { flex: 1; height: 10px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.wx-bar .fill { height: 100%; border-radius: 999px; }
.wx-bar .v { width: 34px; text-align: right; color: var(--muted); }
.wx-jin .fill { background: linear-gradient(90deg,#caa24a,#e2c268); } .wx-jin .k{color:#b8860b}
.wx-mu  .fill { background: linear-gradient(90deg,#3f7d6e,#5aa392); } .wx-mu .k{color:#3f7d6e}
.wx-shui.fill, .wx-shui .fill { background: linear-gradient(90deg,#2f6f9f,#5b9bc7); } .wx-shui .k{color:#2f6f9f}
.wx-huo .fill { background: linear-gradient(90deg,#c0392b,#e0655a); } .wx-huo .k{color:#c0392b}
.wx-tu  .fill { background: linear-gradient(90deg,#8d6e63,#b79583); } .wx-tu .k{color:#8d6e63}

/* ---------- The four-pillar chart ---------- */
.pillar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pillar { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 10px; text-align: center; }
.pillar .cap { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pillar .gz { font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 4px; line-height: 1.1; }
.pillar .wx { margin-top: 8px; font-size: 12px; color: var(--jade); }
.pillar .cg { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pillar.day .gz { color: var(--vermilion); }

/* ---------- Six-axis radar + per-axis bars ---------- */
.score-flex { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
.radar svg { width: 100%; height: auto; display: block; }
.radar-total { text-align: center; }
.radar-total .val { font-family: var(--serif); font-size: 46px; font-weight: 700; color: var(--vermilion); line-height: 1; }
.radar-total .of { font-size: 12px; color: var(--muted); }
.dim-bars { display: flex; flex-direction: column; gap: 12px; }
.dim-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.dim-bar .k { width: 70px; color: var(--ink-soft); }
.dim-bar .track { flex: 1; height: 8px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.dim-bar .fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--vermilion)); border-radius: 999px; }
.dim-bar .v { width: 30px; text-align: right; font-weight: 700; color: var(--gold); font-family: var(--serif); }

/* ---------- The five-grid table ---------- */
.wuge-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wuge-table th, .wuge-table td { border: 1px solid var(--line); padding: 9px 10px; text-align: center; }
.wuge-table th { background: var(--cream); font-family: var(--serif); color: var(--ink); }
.wuge-table .good { color: var(--jade); font-weight: 700; }
.wuge-table .mid { color: var(--gold); font-weight: 700; }
.wuge-table .bad { color: var(--vermilion); font-weight: 700; }
.wuge-table .ge { font-family: var(--serif); font-weight: 700; }
/* Phone: the five-grid table stays on one row without compressing, and the outer container slides sideways */
@media (max-width: 640px) { #wugeTable { min-width: 440px; } }

/* ---------- Name testing: the overall grade / the sample marks / the one-line verdict ---------- */
.grade-badge { display: inline-block; margin-top: 8px; padding: 3px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: var(--serif); }
.g-ex { color: #fff; background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); }
.g-good { color: #fff; background: linear-gradient(135deg, var(--jade), #5aa392); }
.g-mid { color: #97701f; background: var(--gold-soft); }
.g-low { color: var(--muted); background: var(--cream-deep); }
.demo-tag { margin-left: 10px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--cream-deep); border: 1px dashed var(--line); vertical-align: middle; }
.rec-summary { margin-top: 16px; padding: 12px 16px; background: var(--cream); border-left: 3px solid var(--gold); border-radius: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.rec-summary:empty { display: none; }
.rec-summary b { color: var(--vermilion); font-weight: 700; }

/* ---------- Name testing: the hook that funnels into the deep report ---------- */
.deep-hook { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #2a2735, var(--ink)); color: #efeaf6; border-radius: var(--radius); padding: 22px 26px; margin-bottom: 24px; position: relative; overflow: hidden; }
.deep-hook::after { content: "卦"; position: absolute; right: 18px; bottom: -34px; font-family: var(--serif); font-size: 150px; color: rgba(255,255,255,.05); pointer-events: none; line-height: 1; }
.deep-hook .dh-ic { font-size: 34px; flex: none; position: relative; z-index: 2; }
.deep-hook .dh-body { flex: 1; position: relative; z-index: 2; }
.deep-hook h4 { font-family: var(--serif); font-size: 18px; color: #fff; margin-bottom: 6px; }
.deep-hook .dh-text { font-size: 13.5px; line-height: 1.8; color: #cfc9db; }
.deep-hook .dh-text b { color: var(--gold); font-weight: 600; }
.deep-hook .dh-cta { flex: none; white-space: nowrap; position: relative; z-index: 2; }
@media (max-width: 640px) {
  .deep-hook { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .deep-hook .dh-cta { width: 100%; }
}

/* ---------- The zodiac's favoured-glyph board ---------- */
.sx-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sx-cell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 6px; text-align: center; cursor: pointer; transition: all .2s; }
.sx-cell .z { font-size: 22px; }
.sx-cell .n { font-family: var(--serif); font-size: 15px; font-weight: 700; margin-top: 4px; }
.sx-cell.active, .sx-cell:hover { border-color: var(--vermilion); background: var(--vermilion-soft); transform: translateY(-3px); }
.sx-detail { margin-top: 16px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { font-size: 13px; padding: 5px 12px; border-radius: 999px; font-family: var(--serif); }
.chip.yi { background: rgba(63,125,110,.12); color: var(--jade); border: 1px solid rgba(63,125,110,.25); }
.chip.ji { background: rgba(192,57,43,.1); color: var(--vermilion); border: 1px solid rgba(192,57,43,.22); }
.chip.plain { background: var(--cream); border: 1px solid var(--line); color: var(--ink-soft); }

/* ---------- Funnelling: a clickable name / a whole line of verse / a favoured glyph -> test this name in one tap ---------- */
.ex-name { cursor: pointer; color: var(--vermilion); border-bottom: 1px dashed var(--gold); transition: all .15s; }
.ex-name:hover { color: #fff; background: var(--vermilion); border-bottom-color: var(--vermilion); border-radius: 4px; padding: 0 4px; }
[data-fillsrc] .src-name { cursor: pointer; }
[data-fillsrc] .src-name:hover { border-color: var(--gold); background: linear-gradient(135deg, #fffdf7, var(--gold-soft)); transform: translateX(2px); }
[data-panels="wxSel"] .chip.plain { cursor: pointer; }
[data-panels="wxSel"] .chip.plain:hover { color: #fff; background: var(--vermilion); border-color: var(--vermilion); transform: translateY(-1px); }

/* ---------- Kangxi glyph cards / glyph detail ---------- */
.char-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.char-cell { aspect-ratio: 1/1; display: grid; place-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--serif); font-size: 24px; font-weight: 700; cursor: pointer; transition: all .2s; position: relative; }
.char-cell:hover { background: var(--vermilion); color: #fff; border-color: var(--vermilion); transform: translateY(-3px); }
.char-cell .wx-dot { position: absolute; top: 4px; right: 6px; font-size: 10px; font-family: var(--sans); color: var(--jade); font-weight: 600; }
.char-cell:hover .wx-dot { color: rgba(255,255,255,.8); }
.char-detail { margin-top: 18px; background: var(--cream); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 18px; display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.char-detail .big { font-family: var(--serif); font-size: 66px; font-weight: 700; color: var(--vermilion); line-height: 1; text-align: center; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: 8px; }
.char-detail .meta { font-size: 13.5px; }
.char-detail .meta .row { display: flex; gap: 14px; padding: 4px 0; flex-wrap: wrap; }
.char-detail .meta .row b { color: var(--ink); }
.char-detail .mean { margin-top: 6px; color: var(--ink-soft); line-height: 1.8; }

/* ---------- Industry naming cards ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ind-cell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 10px; text-align: center; cursor: pointer; transition: all .2s; }
.ind-cell .ic { font-size: 26px; }
.ind-cell .n { font-family: var(--serif); font-weight: 700; margin-top: 6px; font-size: 15px; }
.ind-cell.active, .ind-cell:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-3px); }

/* ---------- Ranking rows ---------- */
.rank-bars { display: flex; flex-direction: column; gap: 9px; }
.rank-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.rank-bar .rk { width: 22px; font-family: var(--serif); font-weight: 700; color: var(--gold); }
.rank-bar .nm { width: 26px; font-family: var(--serif); font-weight: 700; }
.rank-bar .track { flex: 1; height: 12px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.rank-bar .fill { height: 100%; background: linear-gradient(90deg, var(--vermilion), var(--gold)); border-radius: 999px; }
.rank-bar .v { width: 62px; text-align: right; color: var(--muted); }

/* ---------- The surname focus card ---------- */
.spot-card { display: grid; grid-template-columns: 130px 1fr; gap: 22px; background: linear-gradient(135deg,#fff, var(--cream)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.spot-card .big { font-family: var(--serif); font-size: 88px; font-weight: 700; color: var(--vermilion); text-align: center; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); display: grid; place-items: center; }
.spot-card .rows .r { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed var(--line); }
.spot-card .rows .r:last-child { border: none; }
.spot-card .rows .k { width: 76px; color: var(--muted); flex: none; }
.spot-card .rows .val { color: var(--ink); }

/* ---------- Lead article ---------- */
.feature-article { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.feature-article .body { padding: 24px; }
.feature-article .cat { color: var(--vermilion); font-size: 12px; font-weight: 700; }
.feature-article h3 { font-family: var(--serif); font-size: 22px; margin: 8px 0 10px; }
.feature-article p { color: var(--ink-soft); font-size: 14px; }

/* ---------- Name card (with its source) ---------- */
.src-name { display: flex; justify-content: space-between; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 10px; transition: all .2s; }
.src-name:hover { background:#fff; border-color: var(--gold); }
.src-name .l .nm { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 2px; }
.src-name .l .from { font-size: 12px; color: var(--muted); margin-top: 2px; }
.src-name .wx { font-size: 11px; color: var(--jade); background: rgba(63,125,110,.1); padding: 2px 10px; border-radius: 999px; }

/* ---------- Responsive (signature components) ---------- */
@media (max-width: 900px) {
  .score-flex, .two-col, .char-detail, .spot-card, .feature-article { grid-template-columns: 1fr; }
  .feature-article .body { padding: 20px; }
  .feature-article .thumb { height: 130px; }
  .pillar-row { grid-template-columns: repeat(4, 1fr); }
  .sx-grid { grid-template-columns: repeat(4, 1fr); }
  .char-grid { grid-template-columns: repeat(5, 1fr); }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pillar-row { grid-template-columns: repeat(2, 1fr); }
  .sx-grid { grid-template-columns: repeat(3, 1fr); }
  .char-grid { grid-template-columns: repeat(4, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   SEO-friendly interactive components
   Every piece of content is written into the static HTML (a crawler can read it) and JS only toggles
   .active to show or hide, which serves indexing and interaction at once
   ========================================================================== */

/* ---------- Generic panel show/hide ---------- */
.panel { display: none; }
.panel.active { display: block; }

/* ---------- Filtering: the items that do not match are hidden (the content is still in the HTML source) ---------- */
.filter-grid [data-cat] { display: none; }        /* JS controls what shows; the fallback below covers a JS-less browser */
.filter-grid.f-all [data-cat],
.filter-grid.f-金 [data-cat="金"], .filter-grid.f-木 [data-cat="木"],
.filter-grid.f-水 [data-cat="水"], .filter-grid.f-火 [data-cat="火"],
.filter-grid.f-土 [data-cat="土"] { display: grid; }
/* JS-less fallback: everything shows by default */
.filter-grid:not([class*="f-"]) [data-cat] { display: grid; }

/* ---------- The Kangxi glyph explainer card (visible, kind to long-tail keywords) ---------- */
.zi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.zi-card { display: grid !important; grid-template-columns: 58px 1fr; gap: 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; transition: all .2s; }
.zi-card:hover { background: #fff; border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.zi-card .zi { font-family: var(--serif); font-size: 40px; font-weight: 700; color: var(--vermilion); text-align: center; align-self: center; position: relative; }
.zi-card .zi .wxb { position: absolute; top: -6px; right: -6px; font-family: var(--sans); font-size: 10px; font-weight: 600; color: #fff; background: var(--jade); border-radius: 999px; padding: 1px 6px; }
.zi-card .zt .top { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.zi-card .zt .top b { color: var(--ink); font-weight: 600; }
.zi-card .zt .mn { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.zi-card .zt .eg { font-size: 12px; color: var(--jade); margin-top: 4px; }
/* Glyph search + the no-results notice + the conversion link */
.zi-search { position: relative; margin-bottom: 14px; }
.zi-search input { width: 100%; padding: 12px 40px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15px; font-family: inherit; color: var(--ink); background: var(--cream); transition: border .2s, box-shadow .2s; box-sizing: border-box; }
.zi-search input:focus { outline: none; border-color: var(--vermilion); box-shadow: 0 0 0 3px var(--vermilion-soft); background: #fff; }
.zi-search .zi-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--muted); font-size: 13px; display: none; }
.zi-search .zi-clear.on { display: block; }
.zi-card.zs-hide { display: none !important; }
.zi-card .zt-cta { margin-top: 6px; }
.zi-card .zt-cta a { font-size: 12.5px; font-weight: 600; color: var(--vermilion); }
.zi-card .zt-cta a:hover { text-decoration: underline; }
.zi-nores { text-align: center; color: var(--muted); font-size: 14px; padding: 26px 0; display: none; }
.zi-nores.on { display: block; }
.zi-nores a { color: var(--vermilion); font-weight: 600; }
/* The dictionary filter hides things in pure CSS (everything shows when there is no JS) */
.zi-grid.zf-金 .zi-card:not([data-w="金"]),
.zi-grid.zf-木 .zi-card:not([data-w="木"]),
.zi-grid.zf-水 .zi-card:not([data-w="水"]),
.zi-grid.zf-火 .zi-card:not([data-w="火"]),
.zi-grid.zf-土 .zi-card:not([data-w="土"]) { display: none !important; }
/* Glyph library paging */
.zi-card.pg-hide { display: none !important; }
.zi-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.zi-pager .pg-btn { padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--cream); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: all .15s; }
.zi-pager .pg-btn:hover:not(:disabled) { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.zi-pager .pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.zi-pager .pg-num { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: all .15s; }
.zi-pager .pg-num:hover { border-color: var(--vermilion); color: var(--vermilion); }
.zi-pager .pg-num.on { background: var(--vermilion); color: #fff; border-color: var(--vermilion); }
.zi-pager .pg-dot { color: var(--muted); font-size: 14px; padding: 0 2px; }

/* ---------- Article card filtering (academy) ---------- */
/* ---------- Article card filtering (academy) ---------- */
.art-hidden, .art-search-hidden { display: none !important; }

/* ---------- Article search highlight styles
   Matched cards: vermilion soft background + vermilion border to distinguish from white cards;
   Keywords: <mark> wrapped by JS in title/summary, override browser's default yellow */
.article-card.article-match { background: var(--vermilion-soft); border-color: var(--vermilion); }
.article-card mark { background: var(--vermilion); color: #fff; padding: 0 2px; border-radius: 3px; font-weight: 700; }

/* ---------- The surname explainer table (surnames page, visible long copy) ---------- */
.surname-detail { display: flex; flex-direction: column; gap: 0; }
.surname-row { display: grid; grid-template-columns: 54px 88px 108px 1fr; gap: 14px; align-items: center; padding: 11px 6px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.surname-row:last-child { border-bottom: none; }
.surname-row:hover { background: var(--cream); }
.surname-row .s { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--vermilion); text-align: center; }
.surname-row .p { color: var(--ink); font-weight: 600; }
.surname-row .p small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.surname-row .d { color: var(--ink-soft); }
.surname-row .o { color: var(--muted); line-height: 1.6; }
@media (max-width: 640px) {
  .zi-grid { grid-template-columns: 1fr; }
  /* Phone: keep the glyph search input at 16px to stop iOS Safari auto-zoom */
  .zi-search input { padding: 8px 34px 8px 12px; font-size: 16px !important; }
  .surname-row { grid-template-columns: 40px 1fr; grid-auto-flow: row; }
  .surname-row .d, .surname-row .p { font-size: 12px; }
  .surname-row .o { grid-column: 1 / -1; }
}

/* ==========================================================================
   Reading landing pages - one shared framework (.bz-, an academy-lecture two-column layout; only the copy and the hero image differ page to page)
   ========================================================================== */
.bz-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: center;
  background: linear-gradient(135deg, var(--cream-deep), var(--cream)); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 34px 34px; margin: 20px 0 26px; }
.bz-hero .txt h1 { font-family: var(--serif); font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: 2px; }
.bz-hero .txt .sub { color: var(--vermilion); font-size: 15px; font-weight: 700; margin: 10px 0 12px; letter-spacing: 1px; }
.bz-hero .txt p { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); margin-bottom: 18px; }
/* The publication line a article page carries inside its hero (the reading landing pages do not use it) */
.bz-hero .txt .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; font-size: 12.5px; color: var(--muted); margin: 0 0 13px; }
.bz-hero .txt .meta .dot { color: var(--line); }
.bz-hero .act a { display: inline-block; padding: 13px 34px; border-radius: 8px; font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 1px;
  background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); color: #fff; box-shadow: 0 8px 20px rgba(192,57,43,.28); transition: transform .18s, box-shadow .18s; }
.bz-hero .act a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(192,57,43,.42); }
.bz-hero .act .tip { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }

.bz-layout { display: grid; grid-template-columns: 196px 1fr; gap: 26px; align-items: start; }
.bz-toc { position: sticky; top: 78px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 14px; }
.bz-toc h4 { font-family: var(--serif); font-size: 13px; color: var(--muted); letter-spacing: 3px; margin-bottom: 12px; padding-left: 10px; }
.bz-toc a { display: block; font-size: 13.5px; color: var(--ink-soft); padding: 7px 10px; border-radius: 8px; transition: all .15s; }
.bz-toc a:hover { background: var(--cream); color: var(--vermilion); }

.bz-main { min-width: 0; }
.bz-sec { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 30px 28px; margin-bottom: 20px; }
.bz-sec > h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 11px; }
.bz-sec > h2 .vol { flex: none; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dark)); color: #fff; font-family: var(--serif); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.bz-sec p { font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); margin-bottom: 12px; }
.bz-sec p:last-child { margin-bottom: 0; }
.bz-sec ul { margin: 6px 0 12px; padding-left: 20px; }
.bz-sec li { font-size: 14.5px; line-height: 1.9; color: var(--ink-soft); margin-bottom: 6px; }
.bz-sec li b { color: var(--ink); }

.bz-table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; font-size: 13.5px; }
.bz-table th, .bz-table td { border: 1px solid var(--line); padding: 10px 6px; text-align: center; }
.bz-table thead th { background: var(--cream-deep); color: var(--ink); font-family: var(--serif); }
.bz-table tbody td { color: var(--ink-soft); }
.bz-table tbody th { background: var(--cream); font-weight: 700; color: var(--ink); font-family: var(--serif); }
.bz-table .gz { font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--vermilion); }
.bz-cap { font-size: 12px; color: var(--muted); margin-top: 4px; }
.bz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bz-dl { border-top: 1px solid var(--line); margin-top: 4px; }
.bz-dl .row { display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.bz-dl .row dt { font-family: var(--serif); font-weight: 700; color: var(--vermilion); font-size: 15px; }
.bz-dl .row dd { font-size: 14px; line-height: 1.85; color: var(--ink-soft); }

.bz-link { background: linear-gradient(135deg, var(--vermilion-soft), var(--cream)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 20px; }
.bz-link h3 { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.bz-link p { font-size: 14px; color: var(--ink-soft); line-height: 1.85; margin-bottom: 14px; }
.bz-link a { display: inline-block; padding: 11px 26px; border-radius: 8px; background: var(--vermilion); color: #fff; font-weight: 700; font-family: var(--serif); transition: all .18s; }
.bz-link a:hover { background: var(--vermilion-dark); transform: translateY(-2px); }

.bz-faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--cream); overflow: hidden; }
.bz-faq details:last-child { margin-bottom: 0; }
.bz-faq summary { cursor: pointer; padding: 14px 44px 14px 18px; font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); list-style: none; position: relative; }
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--vermilion); font-size: 20px; line-height: 1; }
.bz-faq details[open] summary { background: var(--paper); }
.bz-faq details[open] summary::after { content: '\2212'; }
.bz-faq .ans { padding: 0 18px 16px; font-size: 14px; line-height: 1.85; color: var(--ink-soft); }
/* FAQ card left/right padding narrowed (only .card.bz-faq; home .hp-faq and other .card unaffected) */
.card.bz-faq { padding-left: 12px; padding-right: 12px; }

.bz-rel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 30px 26px; margin-top: 4px; }
.bz-rel h2 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.bz-rel .tags { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-rel .tags a { padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font-size: 14px; font-family: var(--serif); font-weight: 600; color: var(--ink-soft); transition: all .18s; }
.bz-rel .tags a:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fff; transform: translateY(-2px); }

@media (max-width: 860px) {
  .bz-hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 20px; }
  .bz-layout { grid-template-columns: 1fr; gap: 0; }
  .bz-toc { display: none; }
}
@media (max-width: 640px) {
  .crumb { padding-left: 6px; }
  .bz-hero { border-radius: 14px; margin: 16px 0 22px; }
  .bz-hero .txt h1 { font-size: 25px; }
  .bz-hero .act a { width: 100%; max-width: 320px; text-align: center; }
  .bz-sec { padding: 20px 18px 22px; border-radius: 14px; }
  .bz-sec > h2 { font-size: 18px; }
  .bz-dl .row { grid-template-columns: 1fr; gap: 3px; padding: 12px 2px; }
  .bz-table { font-size: 12px; }
  .bz-table th, .bz-table td { padding: 9px 12px; }
  /* A table inside a scrolling wrapper: cells do not wrap, they open out to their content width and slide sideways */
  .bz-table-wrap .bz-table { min-width: 100%; }
  .bz-table-wrap .bz-table th, .bz-table-wrap .bz-table td { white-space: nowrap; }
  .bz-rel { padding: 18px 16px 22px; border-radius: 14px; }
}

/* ==========================================================================
   Smart naming - the result state (form -> generating -> result, three mutually exclusive states inside the tool area)
   The progress bar uses the site-wide 50ms even-pace smoothing, driven by js/qiming-ai.js.
   ========================================================================== */

/* ---------- Generating ---------- */
.ai-loading { padding: 46px 20px 50px; text-align: center; }
.ai-step { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--vermilion); letter-spacing: 1px; margin-bottom: 18px; }
.ai-bar { max-width: 420px; height: 8px; margin: 0 auto; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.ai-bar > i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--vermilion)); transition: width .12s linear; }
.ai-hint { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ---------- Result header - a summary of what was asked ---------- */
.ai-rhd { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ai-rhd .block-title { margin: 0; }
.ai-edit { flex: 0 0 auto; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--vermilion); background: #fff; border: 1px solid var(--vermilion); border-radius: 999px; cursor: pointer; transition: all .18s; }
.ai-edit:hover { background: var(--vermilion); color: #fff; }
.ai-cond { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 12px 14px; background: var(--cream); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.ai-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink); }
.ai-chip + .ai-chip { padding-left: 8px; border-left: 1px solid var(--line); }
.ai-chip i { font-style: normal; color: var(--muted); }
.ai-note { margin-top: 12px; padding: 9px 14px; font-size: 12px; line-height: 1.7; color: #97701f; background: var(--gold-soft); border-radius: var(--radius-sm); }

/* ---------- Result sections ---------- */
.ai-sec { margin-top: 24px; }
.ai-sec > h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.ai-name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ai-why { font-size: 12px; line-height: 1.7; color: var(--jade); margin: 0 0 11px; padding: 8px 10px; background: rgba(63, 125, 110, .07); border-radius: 8px; }

/* ---------- The generated rich text ---------- */
.ai-rich { font-size: 14px; line-height: 1.95; color: var(--ink-soft); }
.ai-rich .rich-p { margin: 0 0 9px; }
.ai-rich .rich-p:last-child { margin-bottom: 0; }
.ai-rich .rich-ol, .ai-rich .rich-ul { margin: 0 0 9px; padding-left: 22px; }
.ai-rich .rich-ol li, .ai-rich .rich-ul li { margin-bottom: 5px; }
.ai-rich .rich-b { color: var(--vermilion); font-weight: 700; }
.ai-rich .rich-hl { color: #97701f; background: var(--gold-soft); padding: 0 3px; border-radius: 3px; }

/* ---------- Actions at the foot of the result ---------- */
.ai-acts { display: flex; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); }
.ai-acts .btn { padding: 9px 22px; font-size: 13.5px; }

@media (max-width: 820px) {
  .ai-name-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ai-name-grid { grid-template-columns: 1fr; }
  .ai-rhd { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ai-chip + .ai-chip { padding-left: 0; border-left: 0; }
  .ai-acts { flex-direction: column; }
  .ai-acts .btn { width: 100%; text-align: center; }
}
@media print {
  .ai-edit, .ai-acts, .ai-note { display: none !important; }
}

/* ==========================================================================
   The page loader (an old-fashioned spinner, over the left main column only)
   -- No full-page mask; it only covers the .layout .main area on the left of the two-column layout;
      once the resources are ready js/main.js adds .qm-loaded to <html> and it fades out smoothly.
      Safety net: a CSS animation forces it hidden after 6s, so it can never stick.
   ========================================================================== */
.layout .main { position: relative; }
.layout .main::before {   /* The translucent ground: it covers the left main column only, hiding the jump as things come in */
  content: ''; position: absolute; inset: 0; z-index: 50;
  background: rgba(251, 246, 238, .82);
  transition: opacity .4s ease, visibility 0s linear .4s;
  animation: qmLoadSafety 0s linear 6s forwards;
}
.layout .main::after {    /* The old-fashioned spinner: a ring with a gap, going round */
  content: ''; position: absolute; z-index: 51;
  top: clamp(72px, 20vh, 240px); left: 50%; margin-left: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--gold-soft); border-top-color: var(--vermilion);
  animation: qmSpin .7s linear infinite, qmLoadSafety 0s linear 6s forwards;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
@keyframes qmSpin { to { transform: rotate(360deg); } }
@keyframes qmLoadSafety { to { opacity: 0; visibility: hidden; } }
/* Loading finished: the mask fades out, the spin stops and clicks are no longer intercepted */
html.qm-loaded .layout .main::before,
html.qm-loaded .layout .main::after {
  opacity: 0; visibility: hidden; pointer-events: none; animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .layout .main::after { animation: qmLoadSafety 0s linear 6s forwards; }
}

/* ==========================================================================
   The recommended-article list in the right column (tab switching)
   -- The "good day to name" card sits at the very top
   -- Below it, dictionary / names / academy are folded into one, and a tab click switches what shows
   ========================================================================== */
.rec-tab-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.rec-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.rec-tab {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: #b22222;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: 1px solid #b22222;
}

.rec-tab:hover {
  background: rgba(178, 34, 34, 0.1);
}

.rec-tab.active {
  background: #b22222;
  color: #fff;
  border-color: #b22222;
}

.rec-panel {
  display: none;
}

.rec-panel.active {
  display: block;
  animation: slideInUp 0.25s ease-out;
}

@keyframes slideInUp {
  from { opacity: 1; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.rec-list-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-column {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}

.column-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0d8cc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rec-list-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-list-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec-list-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 0;
  margin-bottom: 0;
  border-bottom: 1px dashed #e0d8cc;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rec-list-item:last-child {
  border-bottom: none;
}

.rec-list-item:hover {
  transform: translateX(5px);
  box-shadow: none;
}

/* Special list items (they carry a short blurb) */
.rec-list-special .item-title-container {
  display: inline-flex;
  align-items: center;
}

.rec-list-special .item-title-main {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
}

.rec-list-special .item-title-special {
  font-size: 15px;  /* A touch larger, to stand out more */
  font-weight: 700;
  color: #b22222;  /* Cinnabar red */
  line-height: 1.4;
}

.rec-list-special .item-short-desc {
  font-size: 12.5px;
  color: #999;
  background: rgba(249, 243, 235, 0.7);  /* A pale cream ground */
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.rec-list-item .item-no {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* Items 1-6 cycle through 5 colours: red, green, blue, purple, orange */
.rec-panel .rec-list-item:nth-child(1) .item-no { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.rec-panel .rec-list-item:nth-child(2) .item-no { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.rec-panel .rec-list-item:nth-child(3) .item-no { background: linear-gradient(135deg, #3498db, #2980b9); }
.rec-panel .rec-list-item:nth-child(4) .item-no { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.rec-panel .rec-list-item:nth-child(5) .item-no { background: linear-gradient(135deg, #f39c12, #d35400); }
.rec-panel .rec-list-item:nth-child(6) .item-no { background: linear-gradient(135deg, #e74c3c, #c0392b); }

.rec-list-item .item-title {
  flex: 1;
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  min-width: 0;  /* Let the flex child shrink below its content */
}

/* The item-title inside the academy panel is forced not to wrap */
.rec-panel[data-panel="xuetang"] .item-title {
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-text-overflow: ellipsis;
}

.rec-list-item .item-date {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

@media (max-width: 640px) {
  /* The recommended-article tabs */
  .rec-tab-card {
    padding: 8px;
    margin-top: 8px;
  }
  
  .rec-tabs {
    gap: 4px;
    margin-bottom: 8px;
  }
  
  .rec-tab {
    font-size: 13px;
    padding: 5px 10px;
  }
  
  .rec-list-item {
    padding: 8px 6px;
  }
  
  .rec-list-item .item-no {
    font-size: 12px;
    min-width: 28px;
    padding: 3px 6px;
  }
  
  .rec-list-item .item-title {
    font-size: 13px;
  }
  
  .rec-list-item {
    padding: 10px 0;
    border-bottom-width: 1px;
  }
}

@media (max-width: 640px) {
  .rec-item {
    width: 140px;
  }
  
  .rec-tabs .tab {
    font-size: 12px;
    padding: 6px 0;
  }
}