/* ====== 北京信息港首页美化 v2.0 ====== */
/* 包含：全局美化 + 便民功能区样式 */

/* --- 全局色彩变量 --- */
:root {
  --bj-red: #C8102E;
  --bj-red-dark: #A00A1E;
  --bj-dark: #333333;
  --bj-text: #666666;
  --bj-light-text: #999999;
  --bj-bg: #F5F5F5;
  --bj-blue-light: #E8F4FF;
  --bj-green-light: #E6F7F0;
  --bj-white: #FFFFFF;
  --bj-border: #EEEEEE;
  --bj-shadow: rgba(0,0,0,0.06);
  --bj-radius: 8px;
}

/* --- 全局字体 --- */
body {
  font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'STHeiti', Tahoma, sans-serif !important;
  background: var(--bj-bg) !important;
  color: var(--bj-dark);
  -webkit-font-smoothing: antialiased;
}

/* --- 顶部工具栏 --- */
#toptb {
  background: var(--bj-white) !important;
  border-bottom: 1px solid var(--bj-border) !important;
  min-width: auto !important;
  font-size: 12px;
}
#toptb a {
  color: var(--bj-text) !important;
  transition: color 0.2s;
}
#toptb a:hover {
  color: var(--bj-red) !important;
}

/* --- 导航栏 --- */
#nv {
  background: var(--bj-red) !important;
  height: 46px !important;
  line-height: 46px !important;
  border-radius: 0 !important;
  border: none !important;
}
#nv ul {
  display: flex;
}
#nv li {
  height: 46px !important;
  line-height: 46px !important;
  background: none !important;
  font-size: 15px !important;
  border: none !important;
}
#nv li a {
  height: 46px !important;
  padding: 0 22px !important;
  color: #fff !important;
  transition: background 0.2s;
  display: block;
  border: none !important;
}
#nv li a:hover {
  background: rgba(255,255,255,0.15) !important;
  text-decoration: none !important;
}
#nv li.a,
#nv li.a a {
  background: var(--bj-red-dark) !important;
  color: #fff !important;
}
#nv #qmenu {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 4px;
  padding: 0 12px;
  height: 30px;
  line-height: 30px;
  margin-top: 8px;
}

/* --- 子导航 --- */
#mu ul {
  background: #f8f8f8 !important;
  border-bottom: 1px solid var(--bj-border) !important;
}
#mu ul li a {
  color: var(--bj-text) !important;
  transition: color 0.2s;
}
#mu ul li a:hover {
  color: var(--bj-red) !important;
}

/* --- 搜索栏 --- */
#scbar {
  background: var(--bj-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--bj-border) !important;
  padding: 10px 0 !important;
}
#scbar_txt {
  width: 460px !important;
  height: 36px !important;
  border: 2px solid #ddd !important;
  border-right: none !important;
  border-radius: 4px 0 0 4px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
#scbar_txt:focus {
  border-color: var(--bj-red) !important;
  box-shadow: none !important;
  outline: none;
}
#scbar_btn {
  background: var(--bj-red) !important;
  border: 2px solid var(--bj-red) !important;
  border-radius: 0 4px 4px 0 !important;
  height: 36px !important;
  width: 80px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: background 0.2s;
}
#scbar_btn:hover {
  background: var(--bj-red-dark) !important;
  border-color: var(--bj-red-dark) !important;
}

/* --- Banner区域 --- */
.bjxxg-banner {
  width: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #1a3a5c 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.bjxxg-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(200,16,46,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(15,52,96,0.3) 0%, transparent 50%);
  pointer-events: none;
}
.bjxxg-banner::after {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}
.bjxxg-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 45px 20px 50px;
  color: #fff;
}
.bjxxg-banner h1 {
  font-size: 34px !important;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: 6px;
  text-shadow: 0 2px 15px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bjxxg-banner p {
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  margin: 0 0 28px;
  letter-spacing: 3px;
  font-weight: 300;
}
.bjxxg-banner-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.bjxxg-banner-btns a {
  display: inline-block;
  padding: 11px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.25s;
  letter-spacing: 1px;
}
.bjxxg-banner-btns .btn-primary {
  background: var(--bj-red);
  color: #fff !important;
  border: 2px solid var(--bj-red);
  box-shadow: 0 4px 15px rgba(200,16,46,0.3);
}
.bjxxg-banner-btns .btn-primary:hover {
  background: var(--bj-red-dark);
  border-color: var(--bj-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,16,46,0.4);
}
.bjxxg-banner-btns .btn-outline {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,0.45);
}
.bjxxg-banner-btns .btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

/* ====== 便民功能区 ====== */
.bjxxg-services {
  padding: 20px 0 8px;
  max-width: 980px;
  margin: 0 auto;
}
.bjxxg-services-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 5px;
}
.bjxxg-services-title h2 {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--bj-dark);
  margin: 0;
}
.bjxxg-services-title .title-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--bj-border) 0%, transparent 100%);
}

.bjxxg-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.bjxxg-service-card {
  background: var(--bj-white);
  border-radius: var(--bj-radius);
  box-shadow: 0 2px 8px var(--bj-shadow);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.bjxxg-service-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* 卡片头部 */
.bjxxg-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bj-dark);
  border-bottom: 1px solid var(--bj-border);
  background: #FAFAFA;
}
.bjxxg-card-icon {
  font-size: 20px;
  line-height: 1;
}

/* 卡片内容 */
.bjxxg-card-body {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--bj-text);
  line-height: 1.7;
  min-height: 120px;
}

/* Loading状态 */
.bjxxg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--bj-light-text);
  font-size: 13px;
}
.bjxxg-loading::before {
  content: '';
  width: 18px; height: 18px;
  border: 2px solid var(--bj-border);
  border-top-color: var(--bj-red);
  border-radius: 50%;
  margin-right: 8px;
  animation: bjxxg-spin 0.8s linear infinite;
}
@keyframes bjxxg-spin {
  to { transform: rotate(360deg); }
}

/* --- 黄历卡片 --- */
.almanac-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--bj-dark);
  margin-bottom: 6px;
}
.almanac-lunar {
  font-size: 14px;
  color: var(--bj-red);
  margin-bottom: 4px;
  font-weight: 500;
}
.almanac-ganzhi {
  font-size: 12px;
  color: var(--bj-light-text);
  margin-bottom: 10px;
}
.almanac-yiji {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}
.almanac-yi, .almanac-ji {
  flex: 1;
}
.almanac-yi .label, .almanac-ji .label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.almanac-yi .label {
  background: #E6F7F0;
  color: #2E8B57;
}
.almanac-ji .label {
  background: #FFF0F0;
  color: #C8102E;
}
.almanac-yi .items, .almanac-ji .items {
  font-size: 12px;
  color: var(--bj-text);
  line-height: 1.8;
}

/* --- 天气卡片 --- */
.weather-today {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}
.weather-temp {
  font-size: 36px;
  font-weight: 700;
  color: var(--bj-dark);
  line-height: 1;
}
.weather-temp .unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--bj-light-text);
}
.weather-desc {
  font-size: 14px;
  color: var(--bj-text);
}
.weather-desc .desc-main {
  font-weight: 500;
  color: var(--bj-dark);
}
.weather-wind {
  font-size: 12px;
  color: var(--bj-light-text);
  margin-top: 2px;
}
.weather-forecast {
  display: flex;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bj-border);
}
.weather-forecast-day {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: #F9FAFB;
  border-radius: 6px;
}
.weather-forecast-day .day-name {
  font-size: 12px;
  color: var(--bj-light-text);
  margin-bottom: 4px;
}
.weather-forecast-day .day-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
.weather-forecast-day .day-temp {
  font-size: 12px;
  color: var(--bj-dark);
  font-weight: 500;
}
.weather-error {
  text-align: center;
  color: var(--bj-light-text);
  padding: 20px 0;
}

/* --- 限行卡片 --- */
.traffic-status {
  text-align: center;
  padding: 5px 0;
}
.traffic-date {
  font-size: 13px;
  color: var(--bj-light-text);
  margin-bottom: 8px;
}
.traffic-numbers {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 12px 0;
}
.traffic-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bj-red) 0%, #e03050 100%);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(200,16,46,0.3);
}
.traffic-note {
  font-size: 12px;
  color: var(--bj-light-text);
  margin-top: 8px;
}
.traffic-free {
  font-size: 18px;
  font-weight: 700;
  color: #2E8B57;
  padding: 15px 0;
}
.traffic-free-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

/* --- 便民电话卡片 --- */
.bjxxg-phone-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bjxxg-phone-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--bj-border);
}
.bjxxg-phone-list li:last-child {
  border-bottom: none;
}
.phone-name {
  font-size: 13px;
  color: var(--bj-text);
}
.phone-number {
  font-size: 16px;
  font-weight: 700;
  color: var(--bj-red);
  letter-spacing: 1px;
}
.phone-icon {
  margin-right: 6px;
  font-size: 14px;
}

/* ====== 原有Discuz样式美化 ====== */

/* --- 统计栏 --- */
#chart {
  background: var(--bj-white) !important;
  padding: 10px 15px !important;
  border-radius: var(--bj-radius) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px var(--bj-shadow);
  border: none !important;
}
#chart .chart {
  color: var(--bj-light-text);
  font-size: 13px;
}
#chart .chart em {
  color: var(--bj-red) !important;
  font-weight: 700;
}

/* --- 板块列表（卡片化）--- */
.bm {
  border: none !important;
  border-radius: var(--bj-radius) !important;
  margin-bottom: 12px !important;
  box-shadow: 0 2px 6px var(--bj-shadow);
  background: var(--bj-white) !important;
  transition: box-shadow 0.25s;
}
.bm:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.bm_h {
  background: var(--bj-white) !important;
  border-bottom: none !important;
  border-left: 4px solid var(--bj-red) !important;
  border-top: none !important;
  height: auto !important;
  line-height: 1.5 !important;
  border-radius: var(--bj-radius) var(--bj-radius) 0 0;
  padding: 12px 16px !important;
}
.bm_h h2, .bm_h h2 a {
  color: var(--bj-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.bmw .bm_h {
  background: var(--bj-white) !important;
  border-left: 4px solid var(--bj-red) !important;
  border-bottom: none !important;
}

/* --- 版块列表行 --- */
.fl .bm {
  border: none !important;
  box-shadow: none !important;
}
.fl .bm_h {
  border-left: 4px solid var(--bj-red) !important;
  border-bottom: none !important;
  background: var(--bj-white) !important;
}
.fl {
  border: none !important;
  border-radius: var(--bj-radius) !important;
  overflow: hidden;
  box-shadow: 0 2px 6px var(--bj-shadow);
}

/* 版块行hover */
.fl_tb td {
  transition: background 0.2s;
}
.fl_tb tr:hover td {
  background: #FAFAFA !important;
}

/* 版块卡片内容区 */
.bm_c {
  padding: 8px 12px;
}

/* --- 帖子列表优化 --- */
.xld dt a, .xl li a {
  color: var(--bj-dark) !important;
  transition: color 0.2s;
}
.xld dt a:hover, .xl li a:hover {
  color: var(--bj-red) !important;
  text-decoration: none !important;
}

/* 链接颜色 */
a.xi2 {
  color: var(--bj-red) !important;
}
a.xi2:hover {
  color: var(--bj-red-dark) !important;
}

/* --- 按钮 --- */
.pnc, a.pnc {
  background: var(--bj-red) !important;
  border-color: var(--bj-red) !important;
  border-radius: 4px !important;
  transition: background 0.2s;
}
.pnc:hover, a.pnc:hover {
  background: var(--bj-red-dark) !important;
}
.pgsbtn {
  background: var(--bj-red) !important;
  border-radius: 6px !important;
  letter-spacing: 2px;
  transition: background 0.2s;
}
.pgsbtn:hover {
  background: var(--bj-red-dark) !important;
}

/* --- 面包屑/路径 --- */
#pt {
  background: transparent !important;
  margin: 5px 0 !important;
  border: none !important;
}

/* --- 标签/Tab --- */
.tb a {
  border-radius: 4px 4px 0 0 !important;
  transition: all 0.2s;
}
.tb .a a, .tb .current a {
  border-bottom: 2px solid var(--bj-red) !important;
  font-weight: 700;
}

/* --- 底部 --- */
#ft {
  background: #2C3038;
  color: #aaa !important;
  padding: 25px 0 30px !important;
  margin-top: 20px;
  border: none !important;
}
#ft a {
  color: #ccc !important;
  transition: color 0.2s;
}
#ft a:hover {
  color: var(--bj-red) !important;
}

/* --- 分页 --- */
.pg a, .pg strong {
  border-radius: 4px !important;
  transition: all 0.2s;
}
.pg strong {
  background: var(--bj-red) !important;
  border-color: var(--bj-red) !important;
  color: #fff !important;
}
.pg a:hover {
  border-color: var(--bj-red) !important;
  color: var(--bj-red) !important;
}

/* --- 头部LOGO区域 --- */
#hd {
  border: none !important;
  background: var(--bj-white);
}
.hdc {
  min-height: 60px !important;
}

/* --- 侧边栏 --- */
.ct2 .sd .bm {
  border-radius: var(--bj-radius) !important;
}

/* --- 公告栏 --- */
#an {
  background: #FFF8E1;
  border-radius: 4px;
  padding: 6px 12px;
}
#an dt {
  color: var(--bj-red) !important;
  font-weight: 700;
}

/* --- 滚动条美化 --- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* ====== 移动端适配 ====== */
@media (max-width: 768px) {
  /* Banner */
  .bjxxg-banner {
    min-height: 150px;
  }
  .bjxxg-banner-content {
    padding: 30px 15px 35px;
  }
  .bjxxg-banner h1 {
    font-size: 22px !important;
    letter-spacing: 3px;
  }
  .bjxxg-banner p {
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
  }
  .bjxxg-banner-btns {
    gap: 10px;
  }
  .bjxxg-banner-btns a {
    padding: 8px 20px;
    font-size: 13px;
  }

  /* 便民功能区 - 手机端每行1个 */
  .bjxxg-services {
    padding: 12px 10px 4px;
  }
  .bjxxg-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bjxxg-card-body {
    min-height: 80px;
  }

  /* 搜索框 */
  #scbar_txt {
    width: 200px !important;
  }

  /* 导航 */
  #nv {
    height: auto !important;
    line-height: normal !important;
    padding: 5px 0 !important;
  }
  #nv ul {
    flex-wrap: wrap;
  }
  #nv li {
    height: auto !important;
    line-height: normal !important;
  }
  #nv li a {
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  /* 限行数字缩小 */
  .traffic-num {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .bjxxg-banner h1 {
    font-size: 20px !important;
  }
  .bjxxg-banner p {
    font-size: 12px;
  }
  .bjxxg-banner-btns a {
    padding: 7px 16px;
    font-size: 12px;
  }
  #scbar_txt {
    width: 150px !important;
  }
  .weather-temp {
    font-size: 28px;
  }
  .weather-forecast {
    gap: 6px;
  }
}