.preview-notice {
        color: var(--muted);
        border: 1px dashed var(--border-strong);
        border-radius: 8px;
        padding: 8px 10px;
        margin: 10px 0;
        font-size: 12px;
      }
      :root {
        --bg: #f4f5f8;
        --surface: #ffffff;
        --surface-2: #f7f8fa;
        --border: #e7e9ee;
        --border-strong: #d8dce3;
        --text: #16181d;
        --muted: #5f6672;
        --faint: #98a0ac;
        --accent: #2f6bff;
        --ok: #16a34a;
        --down: #ef4444;
        --warn: #f59e0b;
        --glow: radial-gradient(
          900px 480px at 85% -10%,
          rgba(47, 107, 255, 0.14) 0%,
          rgba(47, 107, 255, 0) 60%
        );
        --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        --shadow-hover:
          0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.1);
      }
      :root[data-theme="dark"] {
        --bg: #0d0f14;
        --surface: #151823;
        --surface-2: #191d2a;
        --border: #232734;
        --border-strong: #323848;
        --text: #e8eaef;
        --muted: #9aa3b2;
        --faint: #636b7a;
        --accent: #5b8cff;
        --ok: #34d17b;
        --down: #f25555;
        --warn: #f5b00b;
        --glow: radial-gradient(
          900px 480px at 85% -10%,
          rgba(91, 140, 255, 0.12) 0%,
          rgba(91, 140, 255, 0) 60%
        );
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-hover:
          0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg);
        background-image: var(--glow);
        background-attachment: fixed;
        color: var(--text);
        font-family:
          -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
          "Microsoft YaHei", sans-serif;
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
      }
      .shell {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 40px;
      }

      /* ===== 头部 ===== */
      header {
        padding: 56px 0 0;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .logo-img {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        object-fit: cover;
        flex-shrink: 0;
      }
      .kicker {
        font-size: 12px;
        color: var(--faint);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-weight: 600;
      }
      h1 {
        margin: 3px 0 0;
        font-size: 30px;
        letter-spacing: -0.02em;
      }
      .subtitle {
        color: var(--muted);
        font-size: 15px;
        margin: 14px 0 0;
        max-width: 640px;
      }

      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 28px;
        flex-wrap: wrap;
      }
      .stats {
        font-size: 13px;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 8px;
        font-variant-numeric: tabular-nums;
      }
      .tools-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .tools-right .search {
        flex: 0 1 auto;
      }
      .theme-switch {
        display: flex;
        gap: 2px;
        padding: 3px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: var(--shadow);
      }
      .theme-switch button {
        border: 0;
        background: transparent;
        color: var(--faint);
        font-size: 12px;
        font-family: inherit;
        padding: 5px 10px;
        border-radius: 7px;
        cursor: pointer;
        transition:
          color 0.15s ease,
          background 0.15s ease;
      }
      .theme-switch button:hover {
        color: var(--text);
      }
      .theme-switch button.on {
        background: var(--bg);
        color: var(--text);
        font-weight: 600;
        box-shadow: inset 0 0 0 1px var(--border-strong);
      }
      .search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 14px;
        width: 300px;
        max-width: 100%;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: var(--shadow);
        transition: border-color 0.15s ease;
      }
      .search:focus-within {
        border-color: var(--accent);
      }
      .search svg {
        width: 16px;
        height: 16px;
        color: var(--faint);
        flex-shrink: 0;
      }
      .search input {
        border: 0;
        outline: 0;
        width: 100%;
        font-size: 14px;
        background: transparent;
        color: var(--text);
      }
      .search input::placeholder {
        color: var(--faint);
      }

      /* ===== 视图切换 ===== */
      .tabs {
        display: flex;
        gap: 4px;
        margin-top: 26px;
        padding: 4px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 13px;
        box-shadow: var(--shadow);
        width: fit-content;
      }
      .tabs button {
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 13.5px;
        font-weight: 500;
        font-family: inherit;
        padding: 8px 18px;
        border-radius: 9px;
        cursor: pointer;
        transition:
          color 0.15s ease,
          background 0.15s ease,
          box-shadow 0.15s ease;
        white-space: nowrap;
      }
      .tabs button:hover {
        color: var(--text);
      }
      .tabs button.on {
        background: var(--bg);
        color: var(--text);
        font-weight: 600;
        box-shadow: inset 0 0 0 1px var(--border-strong);
      }
      .tabs button .n {
        font-size: 11px;
        color: var(--faint);
        font-weight: 600;
        margin-left: 6px;
        font-variant-numeric: tabular-nums;
      }

      /* ===== 分组 ===== */
      main {
        padding: 36px 0 40px;
      }
      .group {
        margin-bottom: 40px;
      }
      .group-head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
      }
      .group-title {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
      }
      .interface-head .group-title {
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .group-num {
        font-size: 11px;
        font-weight: 600;
        color: var(--faint);
        background: var(--surface);
        border: 1px solid var(--border);
        padding: 2px 8px;
        border-radius: 20px;
        font-variant-numeric: tabular-nums;
      }
      .group-line {
        flex: 1;
        height: 1px;
        background: var(--border);
      }
      .caps-note {
        margin: -8px 0 16px;
        font-size: 13px;
        color: var(--muted);
      }

      /* ===== 卡片 ===== */
      .grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
      .card-wrap {
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .card {
        position: relative;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--shadow);
        flex: 1;
        cursor: pointer;
        transition:
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }
      .card:hover,
      .card:focus-visible {
        border-color: var(--border-strong);
        box-shadow: var(--shadow-hover);
      }
      .card:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .card-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
      }
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        flex-shrink: 0;
        background: hsl(var(--h, 220 10% 50%) / 0.12);
        color: hsl(var(--h, 220 10% 50%));
      }
      :root[data-theme="dark"] .avatar {
        background: hsl(var(--h, 220 10% 60%) / 0.18);
      }
      .avatar.has-icon {
        background: transparent;
        border-radius: 50%;
        overflow: hidden;
      }
      .avatar.has-icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .card-title {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .name {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .desc {
        font-size: 13px;
        color: var(--muted);
        flex: 1;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
      }
      .tag-chip {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 20px;
        background: hsl(var(--h, 220 10% 50%) / 0.1);
        color: hsl(var(--h, 220 10% 50%));
        white-space: nowrap;
      }
      .entry-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        color: var(--faint);
        white-space: nowrap;
      }
      .entry-hint .go {
        color: var(--accent);
        font-weight: 600;
      }

      /* 目录卡片：封面 + 标题 + 「详情」，只有这三样 */
      .service-card {
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      .service-card-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 10px 4px 16px;
      }
      .service-card .name {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .card-more {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 22px;
        padding: 2px 7px;
        border: 0;
        border-radius: 6px;
        background: none;
        font: inherit;
        font-size: 11.5px;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--muted);
        cursor: pointer;
        transition: color 0.15s ease, background-color 0.15s ease;
      }
      .card-more:hover,
      .card-more:focus-visible {
        color: var(--text);
        background: rgba(255, 255, 255, 0.07);
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .card-more:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
      .service-cover {
        display: block;
        height: 180px;
        background-image: var(--cover, none),
          linear-gradient(135deg, hsl(var(--h, 220 10% 50%) / 0.34), var(--surface-2));
        background-size: cover, cover;
        background-position: var(--cover-pos, 50% 50%);
        background-repeat: no-repeat;
      }
      .service-card .preview-notice.service-badge {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 1;
        margin: 0;
        padding: 3px 8px;
        border: 0;
        border-radius: 4px;
        background: rgba(10, 13, 20, 0.66);
        color: #fff;
        font-size: 11px;
        line-height: 1.25;
        letter-spacing: 0.02em;
        pointer-events: none;
      }
      .service-cover.is-illustration {
        background-size: contain, cover;
        background-position: center, center;
        background-color: var(--surface);
      }
      .service-card:not(.has-entry) {
        cursor: default;
      }
      .service-card-entry {
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
      }
      .service-card-entry:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      /* 能力卡片补充 */
      .cap-scenes {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
      }
      .scene-chip {
        font-size: 11.5px;
        color: var(--muted);
        background: var(--surface-2);
        border: 1px solid var(--border);
        padding: 3px 9px;
        border-radius: 20px;
        white-space: nowrap;
      }

      /* ===== 详情弹层 ===== */
      .modal-mask {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(12, 15, 22, 0.45);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .modal {
        background: var(--surface);
        border: 1px solid var(--border-strong);
        border-radius: 18px;
        box-shadow: var(--shadow-hover);
        width: 100%;
        max-width: 520px;
        max-height: min(84vh, 720px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .sheet-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px 22px 16px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
      }
      .sheet-head .avatar {
        width: 42px;
        height: 42px;
      }
      .avatar.service-avatar {
        width: auto;
        min-width: 42px;
        max-width: 104px;
        height: auto;
        min-height: 42px;
        padding: 8px;
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: anywhere;
        text-align: center;
      }
      .sheet-title {
        flex: 1;
        min-width: 0;
      }
      .sheet-title .name {
        font-size: 16px;
        display: block;
      }
      .sheet-title .sub {
        font-size: 12.5px;
        color: var(--muted);
        margin-top: 2px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .sheet-close {
        border: 1px solid var(--border);
        background: transparent;
        color: var(--faint);
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 14px;
        cursor: pointer;
        flex-shrink: 0;
        line-height: 1;
        transition:
          color 0.15s ease,
          border-color 0.15s ease;
      }
      .sheet-close:hover {
        color: var(--text);
        border-color: var(--border-strong);
      }
      .sheet-body {
        padding: 18px 22px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .modal.is-document {
        width: min(90vw, 1280px);
        max-width: 1280px;
        max-height: min(90vh, 900px);
      }
      .modal.is-document .sheet-head {
        padding: 20px 28px 16px;
      }
      .modal.is-document .sheet-body {
        padding: 26px 36px 36px;
        gap: 0;
        overscroll-behavior: contain;
      }
      .modal.is-document .interface-markdown {
        font-size: 15.5px;
        line-height: 1.75;
      }
      .sec-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--faint);
        margin-bottom: 6px;
      }
      .sec-text {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.65;
        margin: 0;
      }
      .sec-text b,
      .sec-text strong {
        color: var(--text);
      }
      .scene-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 7px;
      }
      .scene-list li {
        font-size: 13.5px;
        color: var(--muted);
        line-height: 1.55;
        padding-left: 16px;
        position: relative;
      }
      .scene-list li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 8px;
        width: 5px;
        height: 5px;
        border-radius: 2px;
        background: hsl(var(--h, 220 10% 50%) / 0.55);
      }
      .entries {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .entry-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border: 1px solid var(--border);
        border-radius: 11px;
        text-decoration: none;
        color: var(--text);
        background: var(--surface-2);
        transition:
          border-color 0.15s ease,
          background 0.15s ease;
      }
      .entry-btn:hover,
      .entry-btn:focus-visible {
        border-color: var(--accent);
        outline: none;
      }
      .entry-btn .opt-type {
        font-size: 12px;
        font-weight: 600;
        padding: 3px 10px;
        border-radius: 8px;
        background: hsl(var(--h, 220 10% 50%) / 0.12);
        color: hsl(var(--h, 220 10% 50%));
        white-space: nowrap;
      }
      .entry-btn .opt-type.plain {
        background: hsl(220 10% 50% / 0.12);
        color: var(--muted);
      }
      .entry-btn .opt-host {
        flex: 1;
        font-size: 12px;
        color: var(--faint);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .entry-btn .opt-arrow {
        color: var(--faint);
        font-size: 13px;
      }
      .entry-btn:hover .opt-arrow {
        color: var(--accent);
      }
      .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .link-chip {
        font-size: 12.5px;
        font-weight: 500;
        padding: 6px 13px;
        border-radius: 20px;
        border: 1px solid var(--border-strong);
        background: transparent;
        color: var(--muted);
        font-family: inherit;
        cursor: pointer;
        transition:
          color 0.15s ease,
          border-color 0.15s ease,
          background 0.15s ease;
        white-space: nowrap;
      }
      .link-chip:hover,
      .link-chip:focus-visible {
        color: var(--accent);
        border-color: var(--accent);
        outline: none;
      }
      .related-projects {
        padding: 14px;
        border: 1px solid var(--border-strong);
        border-radius: 12px;
        background: var(--surface-2);
      }
      .related-projects .sec-label {
        color: var(--accent);
      }
      .related-projects .link-chip {
        color: var(--text);
        background: var(--surface);
      }
      .related-projects .chip-row {
        margin-top: 10px;
      }
      @media (prefers-reduced-motion: no-preference) {
        .modal-mask {
          animation: fade 0.18s ease;
        }
        .modal {
          animation: pop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes fade {
          from {
            opacity: 0;
          }
        }
        @keyframes pop {
          from {
            opacity: 0;
            transform: translateY(8px) scale(0.98);
          }
        }
      }

      /* ===== 入场动画 ===== */
      @media (prefers-reduced-motion: no-preference) {
        .card {
          animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
          animation-delay: calc(var(--i, 0) * 45ms);
        }
        @keyframes rise {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
        }
      }

      .empty,
      .loading {
        text-align: center;
        color: var(--faint);
        padding: 60px 0;
        font-size: 14px;
      }
      footer {
        padding: 24px 0 48px;
        color: var(--faint);
        font-size: 12px;
        text-align: center;
      }
      footer .upd {
        font-variant-numeric: tabular-nums;
      }
      @media (max-width: 640px) {
        .tools-right {
          flex-wrap: nowrap;
          gap: 8px;
          width: 100%;
        }
        .theme-switch {
          flex: 0 0 auto;
        }
        .theme-switch button {
          flex: 0 0 auto;
          padding: 4px 7px;
          font-size: 11px;
          white-space: nowrap;
        }
        .tools-right .search {
          flex: 1 1 auto;
          width: auto;
          min-width: 0;
          padding: 7px 10px;
        }
        .shell {
          padding: 0 20px;
        }
        .grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }
        .service-card-bar {
          padding: 3px 8px 3px 10px;
          gap: 6px;
        }
        .service-card .name {
          font-size: 12.5px;
          line-height: 1.3;
          white-space: normal;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .card-more {
          min-width: 40px;
          min-height: 30px;
          padding: 3px 6px;
          font-size: 10.5px;
        }
        .service-cover {
          height: 112px;
        }
        header {
          padding-top: 36px;
        }
        .search {
          width: 100%;
        }
        .tabs {
          width: 100%;
        }
        .tabs button {
          flex: 1;
          padding: 8px 10px;
        }
        .modal-mask {
          padding: 12px;
        }
        .modal-mask.mask-document {
          padding: 8px;
        }
        .modal-mask.mask-document .modal.is-document {
          width: 100%;
          max-width: none;
          max-height: calc(100vh - 16px);
          max-height: calc(100dvh - 16px);
          border-radius: 14px;
        }
        .modal.is-document .sheet-head {
          padding: 14px 16px;
        }
        .modal.is-document .sheet-head .avatar {
          width: 34px;
          height: 34px;
          font-size: 14px;
        }
        .modal.is-document .sheet-body {
          padding: 18px 18px 26px;
        }
        .modal.is-document .interface-markdown {
          font-size: 15px;
        }
        .modal.is-document .sheet-close {
          width: 36px;
          height: 36px;
        }
        .modal.is-document .interface-markdown th,
        .modal.is-document .interface-markdown td {
          padding: 7px 9px;
          font-size: 13.5px;
        }
      }

.interface-markdown {
  line-height: 1.75;
  overflow-wrap: anywhere;
  color: var(--text);
}
.interface-markdown h1,
.interface-markdown h2,
.interface-markdown h3 {
  line-height: 1.35;
}
.interface-markdown h1 {
  margin: 4px 0 16px;
  font-size: 26px;
}
.interface-markdown h2 {
  margin: 30px 0 12px;
  font-size: 20px;
}
.interface-markdown h3 {
  margin: 22px 0 10px;
  font-size: 17px;
}
.interface-markdown p,
.interface-markdown ul,
.interface-markdown ol {
  margin: 11px 0;
}
.modal.is-document .interface-markdown p,
.modal.is-document .interface-markdown ul,
.modal.is-document .interface-markdown ol,
.modal.is-document .interface-markdown blockquote {
  max-width: 92ch;
}
.interface-markdown ul,
.interface-markdown ol {
  padding-left: 24px;
}
.interface-markdown pre {
  white-space: pre;
  overflow: auto;
  padding: 16px 18px;
  background: var(--surface-2);
  border-radius: 10px;
  max-width: 100%;
}
.interface-markdown code {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--surface-2);
  padding: 2px 4px;
}
.interface-markdown pre code {
  padding: 0;
}
.interface-markdown .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 12px 0;
}
.interface-markdown table {
  border-collapse: collapse;
  width: 100%;
}
.interface-markdown th,
.interface-markdown td {
  border: 1px solid var(--border);
  padding: 9px 14px;
  vertical-align: top;
}
.interface-markdown th:first-child,
.interface-markdown td:first-child,
.interface-markdown td code {
  white-space: nowrap;
}
.interface-markdown a {
  color: var(--accent);
}
.interface-markdown blockquote {
  border-left: 3px solid var(--border);
  padding-left: 12px;
}

/* ===== Skills 页签 ===== */
.skills-filter {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.skills-filter .chip-row {
  flex: 1 1 auto;
}
.skills-filter-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 7px;
}
.skills-filter-count {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.skills-refresh {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.skills-refresh:hover,
.skills-refresh:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-chip.skill-tag.on {
  color: var(--accent);
  border-color: var(--accent);
  background: hsl(217 91% 58% / 0.08);
}
.skills-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
.skill-card {
  gap: 10px;
}
.skill-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skill-card-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.skill-card-title .name {
  font-size: 15px;
}
.skill-slug {
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-version {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.skill-card .desc {
  -webkit-line-clamp: 3;
  margin: 0;
}
.entry-hint .go.is-down {
  color: var(--warn);
}
.skills-notice {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: hsl(40 95% 45% / 0.1);
  color: var(--muted);
  font-size: 12.5px;
}
.skills-error .skills-error-title {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.skills-error .skills-error-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--faint);
}
.skills-manage {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.skills-manage .group-head {
  margin-bottom: 8px;
}
.skills-manage .caps-note {
  margin: 0 0 12px;
}
.skills-manage-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--warn);
}
.skills-grants {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skills-grants input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
}
.skills-grants input:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.skills-grants .caps-note {
  margin: 0;
}
.skills-agent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.skills-agent-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
}
.skills-inline-link {
  color: var(--accent);
  text-decoration: none;
}
.skills-inline-link:hover,
.skills-inline-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 详情弹层 */
.modal.is-skill {
  max-width: 680px;
  max-height: min(88vh, 860px);
}
.modal.is-skill .sheet-body {
  gap: 20px;
}
.skill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.skill-meta span {
  white-space: nowrap;
}
.skills-install {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.skills-install .sec-text {
  margin: 0 0 10px;
}
.skills-install .chip-row {
  margin-bottom: 10px;
}
.skill-command {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 160px;
  overflow-y: auto;
  user-select: all;
}
.skills-install-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--faint);
}
.skill-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.skill-file-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.skill-file-list li:last-child {
  border-bottom: 0;
}
.skill-file-path {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.skill-file-size {
  flex-shrink: 0;
  color: var(--faint);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.text-link {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}
.text-link:hover,
.text-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.skill-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.skill-version-list li {
  padding: 0 0 14px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.skill-version-list li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.skill-version-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.skill-version-head time {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.skill-version-list .sec-text {
  margin: 4px 0 0;
}
.skill-readme {
  font-size: 13.5px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.skill-readme h1 {
  font-size: 20px;
}
.skill-readme h2 {
  font-size: 16px;
  margin: 20px 0 8px;
}
.skill-readme h3 {
  font-size: 14px;
  margin: 16px 0 6px;
}
.skill-readme pre {
  font-size: 12px;
}
.skill-readme code {
  font-size: 12px;
}

.skills-pinned {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
}
.skills-pinned-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.skills-pinned-head strong {
  font-size: 15px;
}
.skills-pinned .desc {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* 中心内 Skills 管理模式 */
.skills-modes {
  margin: 0 0 18px;
}
.link-chip.skill-mode.on,
.link-chip.on {
  color: var(--accent);
  border-color: var(--accent);
  background: hsl(217 91% 58% / 0.08);
}
.skills-mode-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
}
.skills-mode-head .group-title {
  margin: 0;
}
.skills-mode-head .caps-note {
  margin: 0;
}
.skills-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skills-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.skills-row-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.skills-row-title strong {
  font-size: 14px;
}
.skills-row-meta {
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.skills-row .desc {
  margin: 0;
  font-size: 12.5px;
  -webkit-line-clamp: 2;
}
.skills-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.skills-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.skills-field.wide,
.skills-form > .chip-row,
.skills-status {
  grid-column: 1 / -1;
}
.skills-field input,
.skills-field select,
.skills-field textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
}
.skills-field textarea {
  resize: vertical;
}
.skills-field input:focus-visible,
.skills-field select:focus-visible,
.skills-field textarea:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.skills-status {
  margin: 0;
  min-height: 1em;
  font-size: 12.5px;
  color: var(--warn);
}
.skills-primary {
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
}
.skills-primary:disabled {
  opacity: 0.55;
  cursor: default;
}
.skills-receipt {
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--surface-2);
}
.skills-receipt h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.skills-receipt p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}
.skills-space-panel {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.skills-space-panel .skills-mode-head {
  margin-bottom: 12px;
}
.skills-space-panel .skills-rows {
  margin-top: 10px;
}
.skills-space-panel textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  resize: vertical;
}

@media (max-width: 640px) {
  .skills-grid {
    grid-template-columns: 1fr;
  }
  .skills-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .skills-space-panel {
    padding: 14px;
  }
  .skills-modes {
    flex-wrap: wrap;
  }
  .skills-filter {
    align-items: center;
  }
  .skills-filter-meta {
    padding-top: 0;
  }
  .skills-manage {
    padding: 16px;
  }
  .modal-mask.mask-skill {
    padding: 10px;
  }
  .modal-mask.mask-skill .modal.is-skill {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 14px;
  }
  .modal.is-skill .sheet-head {
    padding: 14px 16px;
  }
  .modal.is-skill .sheet-body {
    padding: 16px;
  }
  .skill-meta {
    gap: 4px 12px;
  }
  .skill-file-list li {
    padding: 8px 10px;
  }
  .skill-readme {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}