/* 分类筛选、资源卡片、详情弹窗及组件交互视觉。 */
/* 资源总览分类导航 */

    .resource-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0 0 24px;
    }

    .filter-tab {
      flex: 0 0 auto;
      padding: 10px 17px;
      background: white;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: #66667d;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
    }

    .filter-tab:hover {
      color: var(--primary);
      border-color: #c9c0ff;
      transform: translateY(-1px);
    }

    .filter-tab.active,
    .filter-tab[aria-pressed="true"] {
      color: white;
      background: linear-gradient(135deg, var(--primary), #826eff);
      border-color: transparent;
      box-shadow: 0 6px 14px rgba(109, 93, 252, 0.14);
    }

    .resource-empty[hidden] {
      display: none !important;
    }

    .resource-empty {
      border: 1px dashed #d9d5ee;
      background: #fff;
      border-radius: 18px;
      padding: 48px 24px;
      text-align: center;
    }

    .empty-icon {
      color: var(--primary);
      font-size: 35px;
      margin-bottom: 4px;
    }

    .resource-empty h3 {
      font-size: 19px;
      margin-bottom: 6px;
    }

    .resource-empty p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 17px;
    }

    .filter-reset {
      color: var(--primary);
      border: 0;
      background: none;
      cursor: pointer;
      font-weight: 600;
    }

    /* 资源列表 */

    .resource-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .resource-card {
      cursor: pointer;
      overflow: hidden;
      background: white;
      border: 1px solid var(--border);
      border-radius: 18px;
      transition: 0.25s;
    }

    .resource-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }

    .resource-cover {
      height: 170px;
      padding: 22px;
      position: relative;
      overflow: hidden;
    }

    .cover-purple {
      background: linear-gradient(135deg, #e9e5ff, #d8d1ff);
    }

    .cover-blue {
      background: linear-gradient(135deg, #e0f1ff, #c8e4ff);
    }

    .cover-pink {
      background: linear-gradient(135deg, #ffe5ef, #ffcbdd);
    }

    .cover-green {
      background: linear-gradient(135deg, #dcf8ed, #c4eddb);
    }

    .cover-orange {
      background: linear-gradient(135deg, #fff0dc, #ffdeb1);
    }

    .cover-yellow {
      background: linear-gradient(135deg, #fff8d9, #ffeaaa);
    }

    .cover-cyan {
      background: linear-gradient(135deg, #dcf8fa, #bcecf0);
    }

    .cover-dark {
      background: linear-gradient(135deg, #29293d, #51516d);
    }

    .resource-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 3;
      padding: 5px 10px;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.92);
      color: #55556a;
      font-size: 11px;
    }

    .mock-window {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.92);
      padding: 14px;
      border-radius: 11px;
      box-shadow: 0 10px 30px rgba(48, 48, 70, 0.12);
      transform: rotate(-2deg);
    }

    .mock-title {
      width: 45%;
      height: 9px;
      margin-bottom: 11px;
      border-radius: 10px;
      background: #dcdce7;
    }

    .mock-block {
      height: 42px;
      margin-bottom: 8px;
      border-radius: 8px;
      background: rgba(109, 93, 252, 0.13);
    }

    .mock-line {
      height: 7px;
      margin-top: 6px;
      border-radius: 10px;
      background: #eeeeF4;
    }

    .resource-body {
      padding: 18px;
    }

    .resource-meta {
      display: flex;
      justify-content: space-between;
      color: #9a9aaa;
      font-size: 12px;
      margin-bottom: 8px;
    }

    .resource-title {
      min-height: 48px;
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 0;
    }

    .resource-card:focus-visible {
      outline: 3px solid #8878ff;
      outline-offset: 3px;
      box-shadow: var(--shadow);
    }
    /* 资源总览右侧复用「资源分类」区域的文字链接样式。 */
    .section-head #viewAllResources:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 5px;
      border-radius: 3px;
    }

    /* 原生 dialog：可按 Esc 关闭，点击遮罩区域关闭 */
    .resource-dialog {
      width: min(740px, calc(100% - 28px));
      max-height: min(90vh, 900px);
      margin: auto;
      padding: 0;
      border: 1px solid #eae7f6;
      border-radius: 22px;
      color: var(--text);
      background: #fff;
      overflow-y: auto;
      box-shadow: 0 30px 90px rgba(24, 19, 68, .24);
    }
    .resource-dialog::backdrop {
      background: rgba(21, 21, 41, .58);
      backdrop-filter: blur(4px);
    }
    .dialog-shell { padding: 34px 40px 34px; }
    .dialog-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .dialog-eyebrow { font-size: 13px; color: #8c829d; font-weight: 650; }
    .dialog-close {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      border: 1px solid #eeebf5;
      background: #f8f7fc;
      color: #716d82;
      font-size: 23px;
      line-height: 1;
      cursor: pointer;
    }
    .dialog-close:hover { color: #5140c8; background: #f0edff; }
    .dialog-close:focus-visible { outline: 3px solid #8878ff; outline-offset: 2px; }
    .dialog-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; }
    .dialog-category { display: inline-block; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; color: #6f54df; background: #f2eeff; }
    .dialog-subcategory { font-size: 12px; color: #87869b; }
    /* 弹窗封面复用所点击资源卡片的封面，确保两处视觉内容一致。 */
    .dialog-cover {
      height: 252px;
      margin: 5px 0 23px;
      border-radius: 16px;
      overflow: hidden;
      background: #f3f1fc;
    }
    .dialog-cover .resource-cover {
      width: 100%;
      height: 100%;
      padding: 26px 38px;
    }
    .dialog-cover .resource-tag { display: none; }
    .dialog-cover .mock-window {
      max-width: 420px;
      margin: 0 auto;
      transform: rotate(-1.5deg);
    }
    .dialog-shell h2 { font-size: clamp(22px, 3.5vw, 30px); line-height: 1.35; margin-bottom: 15px; }
    .dialog-lead { font-size: 15px; line-height: 1.85; color: #616176; }
    .dialog-info { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--border); }
    .dialog-info h3 { font-size: 15px; margin: 0 0 11px; }
    .dialog-info p { color: #77768b; font-size: 13px; margin-bottom: 13px; line-height: 1.8; }
    .dialog-info ul { padding-left: 19px; color: #77768b; font-size: 13px; line-height: 1.9; }
    .dialog-info li + li { margin-top: 4px; }
    .dialog-action-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px;
      margin-top: 22px;
    }
    .dialog-action-panel {
      padding: 16px;
      border: 1px solid #eae8f5;
      border-radius: 14px;
      background: #fcfbff;
    }
    .dialog-action-panel h3 { margin-bottom: 13px; }
    .dialog-action-button {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 41px;
      border: 0;
      border-radius: 10px;
      background: #f0edff;
      color: #5e4ad9;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }
    .dialog-action-button:hover { background: #e7e1ff; transform: translateY(-1px); }
    .dialog-action-button:focus-visible { outline: 3px solid #8878ff; outline-offset: 2px; }
    .dialog-action-button--primary { color: white; background: #7868ea; }
    .dialog-action-button--primary:hover { background: #6454d8; }
    .dialog-action-caption { font-size: 12px !important; line-height: 1.6 !important; margin: 9px 0 0 !important; }
    .dialog-note { margin-top: 19px; padding: 12px 14px; border-radius: 10px; background: #f8f8fc; font-size: 12px; line-height: 1.7; color: #9796a6; }

/* 可选的真实资源封面图；未配置图片时保留原有示意封面。 */
.resource-cover-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dialog-cover .resource-cover-image { border-radius: 10px; }