/* ── Version-check page overrides ── */
   :root {
       --status-latest: #16a34a;
       --status-update: #d97706;
       --status-critical: #dc2626;
       --status-unknown: #6b7280;
       --card-radius: 20px;
       --card-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
   }

   /* hero strip */
   .vc-hero {
       padding: 80px 0 48px;
       text-align: center;
   }

   .vc-hero .section-label {
       margin-bottom: 12px;
   }

   .vc-hero h1 {
       font-family: "Fraunces", serif;
       font-size: clamp(2rem, 5vw, 3.2rem);
       font-weight: 700;
       line-height: 1.15;
       margin: 0 0 12px;
   }

   .vc-hero p {
       font-size: 1.05rem;
       color: var(--text-muted, #666);
       margin: 0;
   }

   /* status card */
   .vc-card {
       max-width: 560px;
       margin: 0 auto 60px;
       background: #fff;
       border-radius: var(--card-radius);
       box-shadow: var(--card-shadow);
       padding: 40px 44px;
       text-align: center;
       border-top: 5px solid var(--status-color, #6b7280);
       transition: border-color 0.3s;
   }

   .vc-status-icon {
       width: 72px;
       height: 72px;
       border-radius: 50%;
       background: color-mix(in srgb,
               var(--status-color, #6b7280) 12%,
               transparent);
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       font-size: 2.2rem;
   }

   .vc-status-label {
       display: inline-block;
       padding: 4px 14px;
       border-radius: 999px;
       font-size: 0.78rem;
       font-weight: 700;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       background: color-mix(in srgb,
               var(--status-color, #6b7280) 15%,
               transparent);
       color: var(--status-color, #6b7280);
       margin-bottom: 16px;
   }

   .vc-title {
       font-family: "Fraunces", serif;
       font-size: 1.75rem;
       font-weight: 700;
       margin: 0 0 8px;
   }

   .vc-desc {
       color: var(--text-muted, #666);
       line-height: 1.6;
       font-size: 0.97rem;
       margin: 0 0 28px;
   }

   /* version badge row */
   .vc-versions {
       display: flex;
       gap: 12px;
       justify-content: center;
       flex-wrap: wrap;
       margin-bottom: 28px;
   }

   .vc-ver-chip {
       background: #f3f4f6;
       border-radius: 10px;
       padding: 10px 18px;
       font-size: 0.87rem;
       line-height: 1.3;
   }

   .vc-ver-chip strong {
       display: block;
       font-size: 1.1rem;
   }

   .vc-ver-chip span {
       color: var(--text-muted, #888);
       font-size: 0.78rem;
   }

   /* action buttons */
   .vc-actions {
       display: flex;
       gap: 10px;
       justify-content: center;
       flex-wrap: wrap;
   }

   .vc-actions .btn {
       min-width: 150px;
   }

   /* platform note */
   .vc-platform-note {
       font-size: 0.8rem;
       color: var(--text-muted, #999);
       margin-top: 24px;
   }

   /* changelog strip */
   .vc-changelog {
       max-width: 560px;
       margin: 0 auto 80px;
   }

   .vc-changelog h3 {
       font-family: "Fraunces", serif;
       font-size: 1.2rem;
       margin: 0 0 16px;
   }

   .vc-changelog-list {
       list-style: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .vc-changelog-list li {
       display: flex;
       gap: 12px;
       background: #fff;
       border-radius: 12px;
       padding: 14px 18px;
       font-size: 0.92rem;
       box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
   }

   .vc-changelog-list li .tag {
       flex-shrink: 0;
       font-size: 0.72rem;
       font-weight: 700;
       padding: 2px 8px;
       border-radius: 6px;
       align-self: start;
       margin-top: 2px;
       text-transform: uppercase;
       letter-spacing: 0.05em;
   }

   .tag-new {
       background: #dcfce7;
       color: #166534;
   }

   .tag-fix {
       background: #fef3c7;
       color: #92400e;
   }

   .tag-perf {
       background: #dbeafe;
       color: #1e40af;
   }

   .tag-sec {
       background: #fee2e2;
       color: #991b1b;
   }

   /* skeleton / loading */
   .vc-loading {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 14px;
       padding: 60px 0;
       color: var(--text-muted, #888);
       font-size: 0.95rem;
   }

   .spinner {
       width: 40px;
       height: 40px;
       border: 3px solid #e5e7eb;
       border-top-color: var(--accent, #2d6a4f);
       border-radius: 50%;
       animation: spin 0.7s linear infinite;
   }

   @keyframes spin {
       to {
           transform: rotate(360deg);
       }
   }

   /* responsive */
   @media (max-width: 600px) {
       .vc-card {
           padding: 28px 20px;
       }
   }