* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #428bca;
      --primary-dark: #2d6ca2;
      --primary-border: #357ebd;
      --primary-top-border: #2b669a;
      --text-on-primary: #ffffff;
      --bg-page: #f7f8fa;
      --text-main: #1f3a5e;
      --text-light: #6f7e91;
    }

    body {
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background-color: var(--bg-page);
      color: var(--text-main);
      line-height: 1.4;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-left: 20%;
      padding-right: 20%;
      padding-bottom: 24px;
    }

    /* ===== 顶部灰色栏（与主体同宽） ===== */
    .top-bar {
      background-image: linear-gradient(to bottom, #f0f2f5 0%, #e6e9ee 100%);
      border: 1px solid #d5dae0;
      border-radius: 4px;
      padding: 10px 14px 6px;
      margin-bottom: 16px;
    }

    .top-bar img {
      width: 180px;
      height: auto;
      display: block;
    }

    /* =====x智慧学习工具风格面板 ===== */
    .panel-primary {
      border: 1px solid var(--primary-border);
      border-radius: 4px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      overflow: hidden;
    }

    .panel-primary > .panel-body {
      padding: 15px;
    }

    /* ===== 主体内所有链接统一效果 ===== */
    .panel-primary a {
      color: #337ab7;
      text-decoration: none;
      background: transparent;
      transition: none;
      border: none;
      box-shadow: none;
      transform: none;
      cursor: pointer;
    }

    .panel-primary a:hover {
      text-decoration: underline;
      color: #337ab7;
      background: transparent;
      border: none;
      box-shadow: none;
      transform: none;
    }

    /* 面包屑 */
    .breadcrumb {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      margin-bottom: 14px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 0.82rem;
      color: #777;
    }
    .breadcrumb li.active {
      color: #555;
    }
    .breadcrumb li + li::before {
      content: "/";
      margin: 0 4px;
      color: #ccc;
    }

    /* 大标题 */
    .main-title {
      text-align: center;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--primary-dark);
      margin: 10px 0 14px;
    }

    /* 简介灰底条 */
    .intro-bar {
      background: #f5f5f5;
      border: 1px solid #ffffff;
      padding: 8px 12px;
      font-size: 0.85rem;
      color: #555;
      margin-bottom: 16px;
      border-radius: 3px;
    }

    /* 内层面板 panel-default */
    .panel-default {
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-bottom: 14px;
      overflow: hidden;
    }

    .panel-heading {
      padding: 8px 14px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
      font-size: 0.9rem;
      font-weight: 600;
      color: #333;
    }

    .panel-heading .V-text {
      color: var(--primary-dark);
    }

    .panel-default > .panel-body {
      padding: 12px 14px;
    }

    /* V-item 网格 */
    .V-item {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 6px;
    }

    .V-item .x10 {
      display: inline-block;
      font-size: 0.78rem;
      line-height: 1.6;
      padding: 3px 10px;
      border-radius: 3px;
      white-space: nowrap;
      list-style: none;
    }

    /* 简介面板里的图片与段落 */
    .intro-panel .panel-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .intro-panel img {
      width: 120px;
      height: auto;
      border-radius: 4px;
      align-self: flex-start;
    }
    .intro-panel p {
      font-size: 0.85rem;
      color: #555;
      line-height: 1.7;
    }

    /* ===== 友情链接区域 ===== */
    .friend-links {
      margin-top: 18px;
      padding: 10px 12px;
      background: #fafcfe;
      border: 1px solid rgba(53, 126, 189, 0.18);
      border-radius: 4px;
    }

    .friend-links .links-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--primary-dark);
      margin-bottom: 6px;
      padding-bottom: 5px;
      border-bottom: 1px dashed rgba(53, 126, 189, 0.25);
    }

    .friend-links .links-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      list-style: none;
    }

    .friend-links .links-list li {
      list-style: none;
    }

    .friend-links .links-list a {
      display: inline-block;
      font-size: 0.74rem;
      line-height: 1.5;
      color: #222;
      text-decoration: none;
      background: transparent;
      padding: 2px 0;
      border-radius: 20px;
      white-space: nowrap;
      transition: none;
      border: 1px solid transparent;
    }

    .friend-links .links-list a:hover {
      text-decoration: underline;
      color: #222;
      background: transparent;
      transform: none;
      box-shadow: none;
    }

    /* ===== 底部版权 ===== */
    .footer-copyright {
      margin-top: 20px;
      padding-top: 14px;
      border-top: 2px solid var(--primary-border);
      text-align: center;
      font-size: 0.82rem;
      color: var(--text-light);
      letter-spacing: 0.3px;
      line-height: 1.9;
    }

    .footer-copyright p {
      margin: 0;
    }

    .footer-copyright a {
      color: #337ab7;
      text-decoration: none;
    }

    .footer-copyright a:hover {
      text-decoration: underline;
    }

    .footer-copyright .sep {
      margin: 0 8px;
      color: #ccc;
    }

    /* ===== 小屏幕适配 ===== */
    @media (max-width: 1024px) {
      body { padding-left: 12%; padding-right: 12%; }
      .top-bar img { width: 150px; }
      .V-item .x10 { font-size: 0.72rem; padding: 2px 8px; }
      .friend-links .links-list a { font-size: 0.7rem; }
    }

    @media (max-width: 768px) {
      body { padding-left: 6%; padding-right: 6%; }
      .top-bar { padding: 8px 10px 5px; }
      .top-bar img { width: 120px; }
      .V-item .x10 { font-size: 0.68rem; padding: 2px 7px; }
      .panel-primary > .panel-body { padding: 12px; }
      .main-title { font-size: 1.35rem; }
      .friend-links { padding: 8px 10px; }
      .friend-links .links-list { gap: 5px; }
      .friend-links .links-list a { font-size: 0.66rem; }
      .footer-copyright { font-size: 0.75rem; }
    }

    @media (max-width: 480px) {
      body { padding-left: 3%; padding-right: 3%; padding-bottom: 16px; }
      .top-bar { padding: 6px 8px 4px; margin-bottom: 12px; }
      .top-bar img { width: 100px; }
      .V-item .x10 { font-size: 0.62rem; padding: 1px 6px; }
      .panel-primary > .panel-body { padding: 10px; }
      .main-title { font-size: 1.15rem; }
      .intro-bar { font-size: 0.75rem; padding: 6px 8px; }
      .breadcrumb { font-size: 0.72rem; padding: 6px 8px; }
      .friend-links { margin-top: 12px; padding: 8px 8px; }
      .friend-links .links-title { font-size: 0.78rem; }
      .friend-links .links-list { gap: 4px; }
      .friend-links .links-list a { font-size: 0.6rem; }
      .footer-copyright { font-size: 0.7rem; }
    }