/* ==========================================================================
   Kaitori Akiba - Modern & Professional Design Polish (2026 Edition)
   ========================================================================== */

/* --- 1. Typography & Global Polish --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #1e293b !important;
  background-color: #f8fafc !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  line-height: 1.6 !important;
}

/* Custom modern scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --- 2. Unified Top Utility Bar (Clean, Sleek & Non-breaking) --- */
.top-utility-bar {
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 8px 0 !important;
  position: relative !important;
  z-index: 101 !important;
}

.top-bar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.top-bar-notice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.badge-official {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  letter-spacing: 0.3px !important;
}

.notice-text {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.top-nav-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.top-nav-links li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

.top-nav-links li a {
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.top-nav-links li a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.top-nav-links li a.link-highlight {
  color: #fca5a5 !important;
  font-weight: 700 !important;
}

.top-nav-links li a.link-highlight:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.2) !important;
}

@media (max-width: 767px) {
  .top-bar-inner {
    justify-content: center !important;
  }
  .top-nav-links {
    gap: 4px !important;
  }
  .top-nav-links li a {
    font-size: 11.5px !important;
    padding: 3px 6px !important;
  }
}

/* --- 3. Main Header (Modern & Resilient Flexbox) --- */
.site-header-modern {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 0 !important;
  position: relative !important;
  z-index: 100 !important;
}

.header-main-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
}

.brand-link {
  display: inline-block !important;
  text-decoration: none !important;
}

.brand-logo-img {
  max-height: 58px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  transition: opacity 0.2s ease !important;
}

.brand-logo-img:hover {
  opacity: 0.9 !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

/* Primary Action CTA */
.header-cta-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header-cta-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}

/* Modern Cart Badge */
.header-cart-badge {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  color: #1e293b !important;
  transition: all 0.2s ease !important;
}

.header-cart-badge:hover {
  background: #ffffff !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  transform: translateY(-1px) !important;
}

.header-cart-badge i {
  font-size: 16px !important;
  color: #64748b !important;
}

.header-cart-badge:hover i {
  color: #ef4444 !important;
}

.header-cart-badge .cart-label {
  font-size: 13px !important;
  font-weight: 700 !important;
}

.header-cart-badge em {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  padding: 1px 7px !important;
  font-style: normal !important;
}

/* Shop Info Block */
.shop-info-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
  transition: all 0.2s ease !important;
}

.shop-info-link:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

.shop-info-link i {
  font-size: 18px !important;
  color: #3b82f6 !important;
}

.shop-info-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

.shop-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

.shop-sub {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

@media (max-width: 767px) {
  .brand-logo-img {
    max-height: 44px !important;
  }
  .header-actions {
    gap: 8px !important;
  }
  .header-cta-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .header-cart-badge {
    padding: 6px 10px !important;
  }
}

/* --- 4. Top 3 Service Feature Cards (.guid) --- */
.guid {
  background: #ffffff !important;
  height: auto !important;
  padding: 20px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.guid .type_1, .guid .type_2, .guid .type_3 {
  height: auto !important;
  margin: 6px 0 !important;
}

.guid .btn {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1.5px solid transparent !important;
}

.guid .btn-orange {
  background: #fff7ed !important;
  color: #c2410c !important;
  border-color: #ffedd5 !important;
}
.guid .btn-orange:hover {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #ea580c !important;
  transform: translateY(-2px) !important;
}

.guid .btn-green {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #dcfce7 !important;
}
.guid .btn-green:hover {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
  transform: translateY(-2px) !important;
}

.guid .btn-blue {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #dbeafe !important;
}
.guid .btn-blue:hover {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  transform: translateY(-2px) !important;
}

/* Hide old absolute icons in top 3 buttons for a modern layout */
.type_1 img, .type_2 img, .type_3 img {
  display: none !important;
}

/* --- 5. Quick Navigation Bar (home_liuxiang) --- */
.home_liuxiang {
  background: #ffffff !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.home_lx_box {
  margin: 0 -6px !important;
}

.home_lx {
  padding: 4px 6px !important;
}

.home_lx_td {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.home_lx_td:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.home_lx_td a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  display: block !important;
}

.home_lx_td:hover a {
  color: #e60012 !important;
}

/* --- 6. Urgent Notices Card --- */
.qingbao {
  height: 200px;
  overflow: hidden;
}

div[style*="background:#feecec"] {
  background: #ffffff !important;
  border: 1px solid #fee2e2 !important;
  border-left: 5px solid #ef4444 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.05) !important;
}

div[style*="border-bottom:1px solid #ccc"] {
  border-bottom: 1px solid #fecaca !important;
  padding-bottom: 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #991b1b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

div[style*="border-bottom:1px solid #ccc"]::before {
  content: "⚠️";
}

.dropdownbutton {
  margin-top: 16px !important;
}

.dropdown {
  background: #fee2e2 !important;
  color: #991b1b !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 20px !important;
  height: auto !important;
  border: 1px solid #fca5a5 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dropdown:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

/* --- 7. Search Boxes & Filter Forms (Modern, Balanced & Crisp) --- */
.search {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px 22px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

/* Custom modern search icon instead of old harsh yellow png */
.search_title {
  background: none !important;
  padding-left: 0 !important;
  min-height: auto !important;
  position: relative !important;
  margin-bottom: 16px !important;
}

.search_title_h2 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.search_title_h2::before {
  content: "" !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

.search_title_h3 {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin: 0 !important;
  padding-left: 32px !important;
}

/* Keyword Search Layout - Clean Grid / Flex */
.search_box {
  margin: 0 !important;
}

.search_box .form-group {
  margin-bottom: 14px !important;
}

.keyword_search {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}

.keyword_search select.fw_cat,
.keyword_search select {
  flex: 0 0 145px !important;
  width: 145px !important;
  height: 44px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  box-shadow: none !important;
  margin: 0 !important;
  margin-right: 10px !important;
}

.keyword_search input.keyword_search_text {
  flex: 1 1 auto !important;
  width: auto !important;
  height: 44px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.keyword_search input.keyword_search_text:focus,
.keyword_search select:focus,
.step_search select:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
  outline: none !important;
}

/* Search Action Buttons Base */
.search_box .btn, 
.search_word,
.step_search_btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 8px !important;
  height: 44px !important;
  line-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

.search_box .btn:hover, 
.search_word:hover, 
.step_search_btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
}

/* User requirement: First column search button has distinct left margin */
.search_box .keyword_search .search_word,
.keyword_search button,
.keyword_search .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 22px !important;
  margin: 0 !important;
  margin-left: 14px !important; /* Distinct space from input box */
}

/* Second Column: Step Search Layout */
.step_search {
  display: block !important;
  width: 100% !important;
}

/* User requirement: Second column filter dropdowns have clear gaps between them */
.step_search_filters {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important; /* 12px clear spacing between each select dropdown */
  width: 100% !important;
}

.step_search_filters select,
.step_search select {
  flex: 1 1 0% !important;
  width: 25% !important;
  min-width: 0 !important;
  height: 44px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* User requirement: Second column search button has distinct top space */
.search_box .step_search .step_search_btn,
.step_search button,
.step_search .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  margin-top: 18px !important; /* Distinct top margin separating button from filters */
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 20px !important;
}

.step_search .step-divider,
.step_search .fa-plus {
  display: none !important;
}

.keyword_search .fa-search,
.step_search .fa-search {
  display: inline-block !important;
  color: #ffffff !important;
  margin-left: 6px !important;
}

.hotword li a {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  margin: 3px 2px !important;
}

.hotword li a:hover {
  background: #e60012 !important;
  color: #ffffff !important;
  border-color: #e60012 !important;
}

/* --- 8. Product Grid & Cards --- */
.sub-pro-box {
  margin: 20px 0 !important;
}

.pro_list {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 12px !important;
  margin-bottom: 20px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: none !important;
  position: relative !important;
}

.pro_list:hover {
  transform: translateY(-3px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
}

.pro_list .collect {
  top: 10px !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  transition: transform 0.2s ease !important;
}

.pro_list .collect:hover {
  transform: scale(1.15) !important;
}

.pro_list img {
  border-radius: 8px !important;
  transition: transform 0.3s ease !important;
  max-height: 140px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

.pro_list:hover img {
  transform: scale(1.04) !important;
}

.sub-pro-name a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.sub-pro-name a:hover {
  color: #e60012 !important;
}

.sub-pro-career a {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.sub-pro-jia {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin: 10px 0 8px 0 !important;
  text-align: center !important;
}

.sub-pro-jia span {
  color: #dc2626 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  display: block !important;
}

.btn-pro {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.25) !important;
  transition: all 0.2s ease !important;
}

.btn-pro:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(217, 119, 6, 0.35) !important;
}

/* --- 9. Left Sidebar & Navigation Box (Flat & Minimal) --- */
.navigation-box, .navigation-box2 {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.navigation-h2 {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.navigation-h2 a, .navigation-h2 span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.navigation-h3 li a {
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

.navigation-h3 li a:hover {
  background: #f8fafc !important;
  color: #e60012 !important;
  padding-left: 20px !important;
}

/* Brand & Carrier Logo Grid - Full Width without margin: auto */
.navigation-box ul li {
  padding: 4px 6px !important;
  list-style: none !important;
  float: none !important;
  width: 100% !important;
}

.navigation-box ul li a {
  display: block !important;
  width: 100% !important;
}

.navigation-box ul li a img,
.navigation-box ul li img,
.navigation-box .img-responsive,
.navigation-box .mcenter {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navigation-box ul li a:hover img {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  opacity: 0.95 !important;
}

.btn-more img {
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: opacity 0.2s ease !important;
}

.btn-more:hover img {
  opacity: 0.85 !important;
}

/* Email Newsletter widget */
.email {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15) !important;
}

.email .header img {
  border-radius: 8px !important;
}

.email .info {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #cbd5e1 !important;
  margin-top: 10px !important;
}

.email .msg {
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
}

.email .btn-ys {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

/* --- 10. What's News & Topics --- */
.topicInner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.topicHeader {
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}

.topicTtl {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.topicCategory li span {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.topicCategory li.cur span {
  background: #e60012 !important;
  color: #ffffff !important;
}

.topicList .layout_cell .date {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.topicList .layout_cell .title a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  transition: color 0.2s ease !important;
}

.topicList .layout_cell .title a:hover {
  color: #e60012 !important;
}

.topicList .layout_cell .msg a {
  font-size: 13px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

.topicList .mThumbnail img {
  border-radius: 8px !important;
}

/* --- 11. Section Cards & Process --- */
.mainpage-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px 20px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.mainpage-title h2 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 10px !important;
}

.liucheng-box {
  margin-top: 20px !important;
}

.liucheng-dian-box, .liucheng-youji-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-top: 12px !important;
}

.btn-faren {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 10px 28px !important;
  border: none !important;
  margin-top: 20px !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.3) !important;
  transition: all 0.2s ease !important;
}

.btn-faren:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.4) !important;
}

/* --- 12. Footer Polish --- */
.footer-bar {
  background: #0f172a !important;
  border-top: 1px solid #1e293b !important;
  padding: 14px 0 !important;
}

.footer-bar ul li a {
  color: #cbd5e1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.footer-bar ul li a:hover {
  color: #ffffff !important;
}

footer {
  background: #0b1120 !important;
  color: #94a3b8 !important;
  border-top: 1px solid #1e293b !important;
  padding-top: 20px !important;
}

.footer_sitemap {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}

.footer_sitemap ul p {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

.footer_sitemap ul li a {
  font-size: 13px !important;
  color: #475569 !important;
  transition: color 0.2s ease !important;
}

.footer_sitemap ul li a:hover {
  color: #e60012 !important;
}

.footer p {
  color: #94a3b8 !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

.footer .ssl {
  color: #cbd5e1 !important;
}

.footer .cell_text p {
  color: #cbd5e1 !important;
  font-size: 12px !important;
}

/* Back to Top Floating Button */
.page-top {
  background: #e60012 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  box-shadow: 0 4px 14px rgba(230, 0, 18, 0.4) !important;
  transition: all 0.2s ease !important;
}

.page-top:hover {
  background: #b91c1c !important;
  transform: translateY(-3px) !important;
}

/* Share button floating */
.page-share {
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

/* ====================== Accessibility (C3) ====================== */
/* Visible keyboard focus for interactive, click-driven widgets. */
.radio-card:focus-visible,
.color-swatch-item:focus-visible,
.collect:focus-visible,
.kaitori-faq-q:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #2563eb !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}
/* Selected state reinforced beyond colour alone (checkmark) for radio cards. */
.radio-card.selected { position: relative; }
.radio-card.selected::after {
  content: "\2713";
  position: absolute;
  top: 6px;
  right: 8px;
  font-weight: 900;
  color: #ef4444;
  font-size: 13px;
}
/* Favorite star keyboard affordance. */
.collect { cursor: pointer; }

/* ============================================================
   Auth portal (register / login) — mobile responsiveness.
   The register/login markup carries heavy inline styles, so the
   mobile overrides below need !important to take effect.
   ============================================================ */
.auth-container,
.auth-container * { box-sizing: border-box; }

/* Inputs are already width:100% inline; this just makes them wrap safely. */
.auth-container .form-control-custom { max-width: 100% !important; }

@media (max-width: 575px) {
  .auth-container {
    padding: 22px 16px !important;
    border-radius: 12px !important;
    max-width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  }
  .auth-container .auth-header h2 { font-size: 18px !important; }
  .auth-container .auth-header p { font-size: 13px !important; }
  /* 16px font on inputs stops iOS Safari from auto-zooming on focus. */
  .auth-container .form-control-custom {
    height: 44px !important;
    font-size: 16px !important;
  }
  .auth-container button[type="submit"],
  .auth-container .btn-block {
    font-size: 15px !important;
    padding: 13px !important;
  }
  /* Register first/last-name columns: keep comfortable spacing when stacked. */
  .auth-container .row > [class*="col-"] { margin-bottom: 0 !important; }
}

/* Safety net: prevent accidental horizontal scrolling on phones. */
@media (max-width: 575px) {
  body { overflow-x: hidden; }
}

/* ============================================================
   Modal popup — replaces native alert() for all form responses
   (success / error). Driven by kaitoriPopup() in theme-app.js.
   ============================================================ */
.kaitori-popup-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  opacity: 0;
  transition: opacity 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.kaitori-popup-overlay.kaitori-popup-shown { opacity: 1; }
.kaitori-popup-overlay.kaitori-popup-closing { opacity: 0; }

.kaitori-popup-card {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.kaitori-popup-shown .kaitori-popup-card { transform: translateY(0) scale(1); }

.kaitori-popup-icon {
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}
.kaitori-popup-success .kaitori-popup-icon { background: #16a34a; }
.kaitori-popup-error .kaitori-popup-icon { background: #ef4444; }

.kaitori-popup-msg {
  font-size: 15px;
  line-height: 1.7;
  color: #0f172a;
  margin-bottom: 22px;
  white-space: pre-line;
  word-break: break-word;
}

.kaitori-popup-ok {
  min-width: 130px;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.kaitori-popup-success .kaitori-popup-ok { background: #16a34a; }
.kaitori-popup-error .kaitori-popup-ok { background: #ef4444; }
.kaitori-popup-ok:hover { opacity: 0.92; }

@media (max-width: 575px) {
  .kaitori-popup-card { padding: 22px 18px; border-radius: 14px; }
  .kaitori-popup-icon { width: 54px; height: 54px; font-size: 27px; }
}