/* ui-2026.css - 2026-11-04 Claude: small UI fixes layered on top of style.css (remove this file's <link> to roll back) */

/* 1. Desktop sticky header: shrink the logo so it stays inside the 60px bar instead of spilling onto the content */
.header .navigation-bar .logo img { max-width: 100%; height: auto; transition: height .3s ease; }
.sticky .navigation-bar .logo { margin-top: 8px; }
.sticky .navigation-bar .logo img { height: 44px; width: auto; }
/* mobile header: thin shadow so it separates from white content while scrolling */
.chuxin_header { box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }

/* 2. Desktop right-side contact bar: slimmer (118px -> 80px), lower, QQ entry hidden */
.rightwx { width: 80px; right: 12px; top: auto; bottom: 110px; border: 1px solid #f0f0f0; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.rightwx:before, .rightwx:after { display: none; }
.rightwx .wxbox { font-size: 11px; line-height: 1.35; letter-spacing: -.2px; }
.rightwx .wxbox .zxlt, .rightwx .wxbox .zxwx, .rightwx .wxbox .zxqq { height: auto; padding: 10px 2px; }
.rightwx .wxbox .zxqq { display: none; }
.rightwx .imgs { width: 30px; height: 28px; margin: 0 auto 4px; }
.rightwx .imgs img, .rightwx .imgs embed { width: 30px !important; height: 28px !important; }
.rightwx .tel { font-size: 10px; line-height: 1.4; margin: 8px 1px 10px; letter-spacing: -.3px; white-space: nowrap; }
.rightwx .tel .telimg { font-size: 11px; }
.rightwx .wxbox .zxwx .showwxcode { left: -164px; top: -30px; }

/* 3. School-library region tabs: show every region (they were clipped to one row) */
.tabwrap ul.tabheight { height: auto; overflow: visible; margin-bottom: 40px; padding: 8px 10px; background: rgba(255, 255, 255, .72); border-radius: 26px; }
.tabwrap ul.tabheight li { padding: 0 18px; margin: 4px 4px; font-size: 18px; }
@media screen and (max-width: 1024px) {
  /* phone: one row that scrolls sideways instead of hiding regions 7-20 */
  .tabwrap ul.tabheight { height: auto; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; text-align: left; padding: 2px 0 6px; margin-bottom: 1.5rem; background: none; border-radius: 0; }
  .tabwrap ul.tabheight::-webkit-scrollbar { display: none; }
  .tabwrap ul.tabheight li { padding: 0 1.1rem; margin: 0 .35rem 0 0; font-size: 1.05rem; line-height: 2.1rem; }
}

/* 4. Phone floating buttons (WeChat / phone): small round icons on the right above the bottom bar instead of wide labels over the content */
@media screen and (max-width: 1024px) {
  .chuxin_mservices { left: auto; right: 10px; bottom: 80px; }
  .chuxin_mservices .tms_btn { width: 44px; height: 44px; padding: 0; border: 1px solid #eee; border-radius: 50%; font-size: 0; line-height: 42px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .14); }
  .chuxin_mservices .tms_icon { width: 22px; height: 22px; }
}

/* ===================== merged from preview, live 2026-11-04 ===================== */
/* ui-preview.css - changes under review; only loaded for browsers in preview mode (/?uiprev=1)
   Brand palette used throughout: yellow #fcca00 (primary), red #d20709 (accent), ink #222, muted #888, line #f0f0f0 */

/* =====================================================================
   A. NAVIGATION
   ===================================================================== */

/* ---- A1. desktop header: 110px -> 80px, flex alignment, darker text, yellow active marker ---- */
@media screen and (min-width: 1025px) {
  .header { height: 80px; background: #fff; box-shadow: 0 1px 0 #f0f0f0; }
  .header.sticky { height: 64px; box-shadow: 0 4px 18px rgba(0, 0, 0, .06); }
  .header .navigation-bar { display: flex; align-items: center; height: 100%; }
  .header .navigation-bar .logo, .sticky .navigation-bar .logo { float: none; flex: 0 0 auto; width: auto; margin: 0 40px 0 0; }
  .header .navigation-bar .logo img { height: 44px; width: auto; max-width: none; display: block; }
  .sticky .navigation-bar .logo img { height: 36px; }
  .header .navigation-bar .nav-menu, .sticky .navigation-bar .nav-menu { float: none; flex: 1 1 auto; width: auto; margin: 0; display: flex; justify-content: center; }
  .header .navigation-bar .nav-menu > ul { display: flex; align-items: center; gap: 4px; margin: 0; }
  .header .navigation-bar .nav-menu > ul > li { margin: 0; line-height: normal; }
  .header .navigation-bar .nav-menu > ul > li > a { display: block; padding: 8px 16px; font-size: 16px; line-height: 24px; color: #333; transition: color .15s; }
  .header .navigation-bar .nav-menu > ul > li > a:hover { color: #d20709; }
  .header .navigation-bar .nav-menu > ul > li.current > a { color: #222; font-weight: 600; }
  .header .navigation-bar .nav-menu > ul > li > a:after,
  .header .navigation-bar .nav-menu > ul > li.current > a:after,
  .header .navigation-bar .nav-menu > ul > li.drop-down:hover > a:after { content: ""; display: block; width: 20px; height: 3px; margin: 5px auto 0; border-radius: 2px; background: transparent; transition: background .15s; }
  .header .navigation-bar .nav-menu > ul > li.current > a:after { background: #fcca00; }
  .header .navigation-bar .nav-menu > ul > li > a:hover:after { background: #ffe680; }
  .header .navigation-bar .nav-menu > ul > li.current > a:hover:after { background: #fcca00; }
  /* right side: phone + CTA */
  .header .frightbut, .sticky .frightbut { float: none; flex: 0 0 auto; margin: 0; }
  .header .frightbut a { width: auto; height: 40px; line-height: 40px; padding: 0 24px; border-radius: 20px; background: #fcca00; color: #222; font-size: 15px; font-weight: 600; box-shadow: 0 4px 12px rgba(252, 202, 0, .35); }
  .header .frightbut a:hover { background: #f2bd00; box-shadow: 0 6px 16px rgba(252, 202, 0, .45); }
  .cx-tel { flex: 0 0 auto; margin-right: 18px; font-size: 15px; font-weight: 600; color: #222; white-space: nowrap; }
  .cx-tel:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: url(/iTemplet/images/tel.png) no-repeat center / contain; }
  .cx-tel:hover { color: #d20709; }
  .sticky .cx-tel { font-size: 14px; }
  /* 院校库 dropdown: all 20 regions as a tidy grid card (was a 4-item scrolling list with a thick red bar) */
  .nav-menu .drop-down ul, .nav-menu .drop-down ul.menuarea { height: auto; overflow: visible; margin-top: 0; top: 100%; left: 50%; transform: translateX(-50%); padding: 14px; border: none; border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .12); }
  .nav-menu .drop-down:hover > ul { top: 100%; }
  .nav-menu .drop-down ul.menuarea { width: 460px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .nav-menu .drop-down ul.menuarea > li, .nav-menu .drop-down ul li { min-width: 0; margin: 0; border: none; line-height: normal; text-align: center; }
  .nav-menu .drop-down ul a { display: block; min-width: 0; padding: 8px 6px; border-radius: 8px; font-size: 14px; color: #333; }
  .nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul li:hover > a { color: #222; background: #fff6cc; }
  .nav-menu .drop-down ul.menuarea > li:first-child { grid-column: 1 / -1; }
  .nav-menu .drop-down ul.menuarea > li:first-child a { background: #fcca00; color: #222; font-weight: 600; }
  /* page offsets that assumed a 110px header */
  .banner-aad, .top-banner, .zixunbg, .subnavs, .mrgtop110 { margin-top: 80px; }
  .inbox { margin-top: 128px; }
}

/* ---- A2. mobile header: logo no longer clipped, proper side padding, lighter burger ---- */
@media screen and (max-width: 1024px) {
  .chuxin_header { display: flex !important; align-items: center; justify-content: space-between; height: 3.2rem; padding: 0 8px 0 16px; box-sizing: border-box; overflow: visible; box-shadow: 0 1px 0 #f0f0f0; }
  .chuxin_logo { float: none; width: auto; height: auto; padding: 0; }
  .chuxin_logo img { display: block; height: 30px; width: auto; margin: 0; }
  .chuxin_nav { float: none; flex: 0 0 auto; width: 40px; height: 40px; margin: 0; border-radius: 50%; }
  .chuxin_nav span { left: 10px; width: 20px; height: 2px; border-radius: 2px; background: #222; }
  .chuxin_nav span:nth-of-type(1) { top: 13px; }
  .chuxin_nav span:nth-of-type(2) { top: 19px; }
  .chuxin_nav span:nth-of-type(3) { top: 25px; }
  .chuxin_nav_se span:nth-of-type(1) { top: 19px; }
  .chuxin_nav_se span:nth-of-type(3) { top: 19px; }
  /* drawer */
  .chuxinbox_nav { z-index: 1002; padding-bottom: 6rem; box-sizing: border-box; background: #fff; }
  .chuxinbox_nav > ul > li { border-top: none; border-bottom: 1px solid #f3f3f3; padding-left: 0; line-height: normal; font-size: 1rem; }
  .chuxinbox_nav > ul > li > a { display: block; padding: 1rem 1.25rem; color: #222; font-weight: 500; }
  .chuxinbox_nav > ul > li.cx-here > a { color: #222; font-weight: 700; box-shadow: inset 4px 0 0 #fcca00; background: #fffbea; }
  .chuxinbox_nav ul li i { top: 0; right: 4px; height: 3.25rem; width: 3rem; padding: 0; display: flex; align-items: center; justify-content: center; }
  .chuxinbox_nav ul li i svg { width: 16px; height: 16px; }
  .chuxinbox_nav > ul > li > ul { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 1.25rem 1rem; }
  .chuxinbox_nav > ul > li > ul[style*="block"] { display: grid !important; }
  .chuxinbox_nav > ul > li > ul > li { border: none; padding: 0; line-height: normal; }
  .chuxinbox_nav > ul > li > ul > li > a { display: block; padding: .55rem 0; border-radius: 1rem; background: #f6f6f6; color: #333; font-size: .9rem; text-align: center; }
  .cx-drawer-cta { display: flex; gap: 10px; padding: 1.25rem; }
  .cx-drawer-cta a { flex: 1; display: block; padding: .8rem 0; border-radius: 1.5rem; text-align: center; font-size: 1rem; font-weight: 600; border: 1px solid #e3e3e3; color: #222; }
  .cx-drawer-cta a.primary { background: #fcca00; border-color: #fcca00; }
  .cx-drawer-note { padding: 0 1.25rem; font-size: .8rem; color: #999; text-align: center; }
}

/* =====================================================================
   B. SCHOOL LIBRARY FILTER (desktop): radio dots -> chips
   ===================================================================== */
@media screen and (min-width: 1025px) {
  .searchbox.borderbox { padding: 26px 28px 14px; border: 1px solid #f0f0f0; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .05); background: #fff; }
  .searchbox .form-inline .form-group { margin-bottom: 14px; }
  .searchbox .form-control-plaintext { width: 380px; height: 44px; padding: 0 20px; border: 1px solid #e3e3e3; border-right: none; border-radius: 22px 0 0 22px; margin-right: 0; font-size: 15px; outline: none; transition: border-color .15s; }
  .searchbox .form-control-plaintext:focus { border-color: #fcca00; }
  .searchbox .btn-primary { width: 110px; height: 46px; margin-bottom: 14px; border-radius: 0 23px 23px 0; background: #fcca00; color: #222; font-size: 16px; font-weight: 600; letter-spacing: 2px; }
  .searchbox .btn-primary:hover { background: #f2bd00; }
  .searchbox .form-check { position: relative; align-items: flex-start; line-height: normal; margin: 0; padding: 12px 70px 12px 0; border-top: 1px dashed #efefef; }
  .searchbox .sr-tit { flex: 0 0 64px; width: 64px; margin: 0; line-height: 32px; font-size: 14px; font-weight: 600; color: #333; }
  .searchbox .rigarea { flex: 1; width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: relative; }
  .searchbox .rigarea input[type=radio] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .searchbox .rigarea > span:not(.redioText) { display: inline-flex; }
  .searchbox .redioText, .searchbox .rigarea .form-check-label { display: inline-block; height: 32px; margin: 0; padding: 0 14px; line-height: 30px; font-size: 14px; color: #555; white-space: nowrap; background: #fff; border: 1px solid #e6e6e6; border-radius: 16px; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; }
  .searchbox .redioText:hover, .searchbox .rigarea .form-check-label:hover { border-color: #fcca00; color: #222; background: #fffbea; }
  .searchbox .rigarea input[type=radio]:checked + .redioText,
  .searchbox .rigarea input[type=radio]:checked + .form-check-label { background: #fcca00; border-color: #fcca00; color: #222; font-weight: 600; }
  .searchbox .showMore_mobile { position: absolute; right: 0; top: 12px; height: 32px; line-height: 32px; padding: 0 2px 0 10px; font-size: 13px; color: #999; cursor: pointer; white-space: nowrap; }
  .searchbox .showMore_mobile:hover { color: #d20709; }
  .searchbox .showMore_mobile::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
  .searchbox .showMore_mobile.is-open::after { transform: translateY(1px) rotate(-135deg); }
  /* page JS collapses area/region rows to 55px; with chips one row is 34px */
  .searchbox .pcArea[style*="height: 55px"], .searchbox .pcRegion[style*="height: 55px"] { height: 34px !important; overflow: hidden; }
}

/* =====================================================================
   C. ARTICLES: body images were wider (1080px) than the 900px column
   ===================================================================== */
.newsdetail-box img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* =====================================================================
   D. SCHOOL LIST CARDS: no rank number, attributes -> tags (empty hidden), clearer price, hover lift
   ===================================================================== */
.schoolslist > li { transition: box-shadow .2s ease, transform .2s ease; }
.schoolslist > li .sctitle .xuexiao.cx-done { display: none; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.cx-tags span { font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: 10px; background: #fff6cc; color: #8a6d00; white-space: nowrap; }
.schoolslist > li .sctitle .xuefei span { color: #d20709; font-weight: 700; }
@media screen and (min-width: 1025px) {
  .schoolslist > li { border-color: #f0f0f0; border-radius: 12px; padding: 22px 26px; }
  .schoolslist > li:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
  .schoolslist > li .nos { display: none; }
  .schoolslist > li .scimg { border-radius: 10px; }
  .schoolslist > li .sctitle { width: 300px; }
  .schoolslist > li .sctitle .scname { width: auto; font-size: 22px; font-weight: 600; }
  .schoolslist > li .sctitle .xuefei span { font-size: 18px; }
}

/* =====================================================================
   E. APPLY FORMS (desktop modal + mobile page)
   ===================================================================== */
.cx-form-head { text-align: center; margin: 0 0 18px; }
.cx-form-head h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #222; }
.cx-form-head p { margin: 0; font-size: 14px; line-height: 1.7; color: #888; }
.cx-form-msg { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: #d20709; text-align: center; }
.cx-form-note { margin: 6px 0 0; font-size: 12px; color: #aaa; text-align: center; }
.cx-form-ok { text-align: center; padding: 18px 10px 6px; }
.cx-form-ok .ok-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: #fcca00; color: #222; font-size: 30px; line-height: 56px; font-weight: 700; }
.cx-form-ok h3 { margin: 0 0 8px; font-size: 20px; color: #222; }
.cx-form-ok p { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: #777; }
.cx-form-ok .ok-qr { width: 120px; height: 120px; display: block; margin: 0 auto 6px; border-radius: 8px; }
.cx-form-ok .ok-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.cx-form-ok .ok-btns a { display: inline-block; padding: 9px 20px; border-radius: 20px; border: 1px solid #e3e3e3; color: #333; font-size: 14px; }
.cx-form-ok .ok-btns a.primary { background: #fcca00; border-color: #fcca00; font-weight: 600; }
#applyModal .modal-content { border: none; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); }
#applyModal .modal-body { width: 520px; max-width: 92%; padding: 6px 0 26px; }
#applyModal #postApply { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#applyModal #postApply .shenqingschool { display: none; }
#applyModal #postApply #school { grid-column: 1 / -1; padding-left: 14px; }
#applyModal #postApply .form-control { float: none; width: 100% !important; margin: 0 !important; height: 44px; border: 1px solid #e3e3e3; border-radius: 10px; box-shadow: none; transition: border-color .15s; }
#applyModal #postApply .form-control:focus { border-color: #fcca00; outline: none; }
#applyModal .quedingbtn { margin-top: 18px; }
#applyModal .quedingbtn .btn-primary { width: 240px; height: 46px; border-radius: 23px; font-size: 17px; font-weight: 600; }
.msq-box .cx-form-head { margin-top: .5rem; }
.msq-box .msq-school span { font-size: .95rem; }
.msq-box .msq-school .form-control::placeholder { font-size: .95rem; }

/* empty message line takes no space */
.cx-form-msg:empty { display: none; }
#applyModal .modal-body { padding-bottom: 20px; }