/* ---- layout ---- */
    .author-page .content-area { max-width: 920px; }
    .author-page .site-sidebar { width: 320px; flex-shrink: 0; }

    /* ---- hero ---- */
    .author-page .auth-hero {
      display: flex;
      gap: 32px;
      padding: 40px 0 32px;
      border-bottom: 1px solid var(--border);
      align-items: flex-start;
    }
    @media (max-width: 720px) {
      .author-page .auth-hero { flex-direction: column; align-items: center; text-align: center; }
    }
    .author-page .auth-avatar-wrap {
      position: relative;
      flex-shrink: 0;
    }
    .author-page .auth-avatar-ring {
      width: 132px; height: 132px;
      border-radius: 50%;
      background: conic-gradient(var(--accent), oklch(68% 0.12 255), var(--accent));
      padding: 4px;
      display: grid;
      place-items: center;
    }
    .author-page .auth-avatar-ring .auth-avatar-inner {
      width: 100%; height: 100%;
      border-radius: 50%;
      background: var(--surface);
      overflow: hidden;
    }
    .author-page .auth-avatar-ring .auth-avatar-inner img {
      width: 100%; height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    .author-page .badge-online {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: oklch(55% 0.14 145);
      border: 3px solid var(--surface);
      box-shadow: 0 0 0 2px oklch(55% 0.14 145 / 0.3);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { box-shadow: 0 0 0 2px oklch(55% 0.14 145 / 0.3); }
      50% { box-shadow: 0 0 0 6px oklch(55% 0.14 145 / 0.08); }
    }
    .author-page .auth-info { flex: 1; }
    .author-page .auth-info h1 { font-size: 28px; margin-bottom: 2px; }
    .author-page .auth-info .auth-role {
      font-size: 14px; color: var(--accent); font-weight: 500;
      margin-bottom: 8px;
    }
    .author-page .auth-info .auth-bio {
      color: var(--muted); font-size: 15px; max-width: 56ch;
      line-height: 1.7; margin-bottom: 12px;
    }
    .author-page .auth-info .auth-links {
      display: flex; gap: 8px; flex-wrap: wrap;
    }
    .author-page .auth-info .auth-links a {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 14px; border: 1px solid var(--border);
      border-radius: 999px; font-size: 12px; color: var(--muted);
      text-decoration: none;
      transition: border-color 0.15s, color 0.15s;
    }
    .author-page .auth-info .auth-links a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
    .author-page .auth-info .auth-links a svg { width: 14px; height: 14px; }

    /* ---- dashboard ---- */
    .auth-dashboard {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin: 24px 0 20px;
    }
    @media (max-width: 640px) { .auth-dashboard { grid-template-columns: repeat(2, 1fr); } }
    .auth-dashboard .adb-card {
      padding: 18px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .auth-dashboard .adb-card .adb-val {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .auth-dashboard .adb-card .adb-label {
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .auth-dashboard .adb-card .adb-trend {
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 3px;
      color: oklch(55% 0.14 145);
    }
    .auth-dashboard .adb-card .adb-trend.down { color: oklch(55% 0.12 35); }

    /* ---- badges ---- */
    .auth-badges {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .auth-badges .ab-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 11px;
      color: var(--muted);
      letter-spacing: 0.02em;
      background: var(--surface);
    }
    .auth-badges .ab-chip .ab-star {
      color: oklch(72% 0.14 85);
    }
    .auth-badges .ab-chip.ab-gold {
      border-color: oklch(72% 0.14 85 / 0.3);
      background: oklch(72% 0.14 85 / 0.06);
      color: oklch(55% 0.12 75);
    }

    /* ---- featured ---- */
    .auth-featured {
      background: oklch(22% 0.02 240);
      border-radius: var(--radius-md);
      padding: 36px 40px;
      margin-bottom: 28px;
      display: flex;
      gap: 32px;
      align-items: center;
    }
    @media (max-width: 720px) { .auth-featured { flex-direction: column; padding: 28px 24px; text-align: center; } }
    .auth-featured .af-badge {
      display: inline-block;
      padding: 3px 10px;
      background: var(--accent);
      color: #fff;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 10px;
    }
    .auth-featured .af-title {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .auth-featured .af-meta {
      font-size: 13px;
      color: rgba(255,255,255,0.5);
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .auth-featured .af-cta {
      flex-shrink: 0;
      padding: 10px 28px;
      background: #fff;
      color: var(--fg);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: opacity 0.15s;
    }
    .auth-featured .af-cta:hover { opacity: 0.85; text-decoration: none; }

    /* ---- heatmap (JS 53×7) ---- */
    .auth-heatmap-wrap {
      margin-bottom: 28px;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .auth-heatmap-wrap .heatmap-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .auth-heatmap-wrap .heatmap-header h4 {
      font-size: 14px;
      font-weight: 600;
    }
    .auth-heatmap-wrap .heatmap-header .heatmap-total {
      font-size: 12px;
      color: var(--muted);
    }

    /* ---- filter ---- */
    .auth-filter {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .auth-filter .af-tab {
      padding: 5px 16px;
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
      background: transparent;
      transition: all 0.15s;
    }
    .auth-filter .af-tab:hover { border-color: var(--accent); color: var(--fg); }
    .auth-filter .af-tab.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
    }
    .auth-filter .af-divider {
      width: 1px;
      height: 20px;
      background: var(--border);
    }
    .auth-filter select {
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      background: var(--surface);
      color: var(--fg);
    }

    /* ---- post list enhanced ---- */
    .auth-post-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .auth-post-list .post-card {
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 20px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 20px;
      transition: box-shadow 0.2s, transform 0.2s;
      align-items: start;
    }
    .auth-post-list .post-card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }
    .auth-post-list .post-card > div:first-child {
      min-width: 0;
    }
    .auth-post-list .post-card .post-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .auth-post-list .post-card .post-meta .cat-tag {
      background: oklch(95% 0.02 250);
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent);
      text-decoration: none;
    }
    .auth-post-list .post-card h2 {
      font-size: 16px;
      font-weight: 700;
      margin: 0 0 8px;
      line-height: 1.4;
    }
    .auth-post-list .post-card h2 a {
      color: var(--text);
      text-decoration: none;
    }
    .auth-post-list .post-card h2 a:hover {
      color: var(--accent);
    }
    .auth-post-list .post-card .post-excerpt {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin: 0 0 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .auth-post-list .post-card .post-author-row {
      display: none;
    }
    .auth-post-list .post-card .post-thumb {
      width: 180px;
      height: 120px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: oklch(96% 0.005 250);
      order: 1;
    }
    .auth-post-list .post-card .post-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    @media (max-width: 640px) {
      .auth-post-list .post-card {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .auth-post-list .post-card .post-thumb {
        width: 100%;
        height: 180px;
        order: -1;
      }
    }
    .auth-recent-comments {
      margin-bottom: 32px;
    }
    .auth-recent-comments h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .auth-recent-comments .arc-item {
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 12px;
    }
    .auth-recent-comments .arc-item:last-child { border-bottom: none; }
    .auth-recent-comments .arc-item .arc-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: oklch(92% 0.006 250);
      flex-shrink: 0;
      display: grid;
      place-items: center;
      font-size: 11px;
      color: var(--muted);
    }
    .auth-recent-comments .arc-item .arc-body .arc-text {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 2px;
    }
    .auth-recent-comments .arc-item .arc-body .arc-text a { color: var(--fg); font-weight: 500; }
    .auth-recent-comments .arc-item .arc-body .arc-text a:hover { color: var(--accent); }
    .auth-recent-comments .arc-item .arc-body .arc-meta {
      font-size: 12px;
      color: var(--muted);
    }

    /* ---- columns/series ---- */
    .auth-series {
      margin-bottom: 32px;
    }

    /* ---- testimonials ---- */
    .auth-testimonials {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 32px;
      margin-bottom: 32px;
    }
    @media (max-width: 640px) { .auth-testimonials { padding: 24px 18px; } }
    .auth-testimonials .test-header {
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .auth-testimonials .test-header h3 {
      font-size: 16px;
      font-weight: 600;
    }
    .auth-testimonials .test-header p {
      font-size: 13px;
      color: var(--muted);
    }
    .auth-testimonials .test-header .test-score {
      text-align: right;
    }
    .auth-testimonials .test-header .test-score .ts-val {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .auth-testimonials .test-header .test-score .ts-label {
      font-size: 11px;
      color: var(--muted);
    }

    /* ---- courses ---- */
    .auth-courses {
      margin-bottom: 32px;
    }
    .auth-courses h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    /* ---- related authors ---- */
    .auth-related {
      margin-bottom: 32px;
    }
    .auth-related h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
    }
    .auth-related .ra-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    @media (max-width: 720px) { .auth-related .ra-grid { grid-template-columns: repeat(2, 1fr); } }
    .auth-related .ra-card {
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      text-align: center;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .auth-related .ra-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
    .auth-related .ra-card .ra-avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      margin: 0 auto 10px;
      background: oklch(92% 0.006 250);
      display: grid;
      place-items: center;
      font-size: 16px;
      color: var(--muted);
    }
    .auth-related .ra-card h4 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
    .auth-related .ra-card .ra-role { font-size: 11px; color: var(--muted); }
    .auth-related .ra-card .ra-stat {
      font-size: 11px;
      color: var(--accent);
      margin-top: 6px;
    }

    /* ---- widget extras ---- */
    .widget .ws-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      font-size: 13px;
    }
    .widget .ws-row .ws-label { color: var(--muted); }
    .widget .ws-row .ws-val { font-weight: 600; }
    .widget .ws-row .ws-val.ws-accent { color: var(--accent); }
    .widget .ws-row + .ws-row { border-top: 1px solid var(--border); }

    .widget .w-tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .widget .w-tag-cloud a {
      padding: 2px 8px;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 11px;
      color: var(--muted);
      text-decoration: none;
      transition: border-color 0.15s;
    }
    .widget .w-tag-cloud a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
    .widget .w-tag-cloud a.sz-lg { font-size: 13px; }
    .widget .w-tag-cloud a.sz-md { font-size: 12px; }
    .widget .w-tag-cloud a.hot { border-color: var(--accent); color: var(--accent); }

    .widget .w-archive {
      display: flex;
      flex-direction: column;
    }
    .widget .w-archive a {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      font-size: 13px;
      color: var(--muted);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
    }
    .widget .w-archive a:hover { color: var(--accent); text-decoration: none; }
    .widget .w-archive a:last-child { border-bottom: none; }
    .widget .w-archive a .arc-count { color: var(--border); font-size: 12px; }

    .widget .w-bookmarks {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .widget .w-bookmarks a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      font-size: 13px;
      color: var(--fg);
      text-decoration: none;
      border-bottom: 1px solid var(--border);
    }
    .widget .w-bookmarks a:last-child { border-bottom: none; }
    .widget .w-bookmarks a:hover { color: var(--accent); text-decoration: none; }
    .widget .w-bookmarks a svg { width: 14px; height: 14px; opacity: 0.4; flex-shrink: 0; }

    .widget .w-comment-feed {
      display: flex;
      flex-direction: column;
    }
    .widget .w-comment-feed .wcf-item {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }
    .widget .w-comment-feed .wcf-item:last-child { border-bottom: none; }
    .widget .w-comment-feed .wcf-item .wcf-avatar {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: oklch(92% 0.006 250);
      flex-shrink: 0;
    }
    .widget .w-comment-feed .wcf-item .wcf-text {
      font-size: 13px;
      line-height: 1.5;
    }
    .widget .w-comment-feed .wcf-item .wcf-text a { color: var(--fg); font-weight: 500; }
    .widget .w-comment-feed .wcf-item .wcf-text .wcf-meta { font-size: 11px; color: var(--muted); }

    /* ---- floating follow ---- */
    .auth-follow-float {
      position: fixed;
      bottom: 100px;
      right: 32px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    @media (max-width: 720px) { .auth-follow-float { display: none; } }
    .auth-follow-float .aff-btn {
      width: 52px; height: 52px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      cursor: pointer;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 20px oklch(58% 0.18 255 / 0.3);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .auth-follow-float .aff-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px oklch(58% 0.18 255 / 0.45);
    }
    .auth-follow-float .aff-btn svg { width: 22px; height: 22px; }
    .auth-follow-float .aff-label {
      font-size: 10px;
      color: var(--accent);
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .auth-follow-float .aff-count {
      font-size: 11px;
      color: var(--muted);
    }

    /* ---- sidebar social stats ---- */
    .widget .w-social-stats {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .widget .w-social-stats .wss-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      font-size: 13px;
    }
    .widget .w-social-stats .wss-item .wss-icon {
      width: 16px; height: 16px;
      color: var(--muted);
      opacity: 0.5;
      flex-shrink: 0;
    }
    .widget .w-social-stats .wss-item .wss-label { color: var(--muted); flex: 1; }
    .widget .w-social-stats .wss-item .wss-val { font-weight: 600; }

    /* ══════════════════════════════════
       Fix 1 — content area widened to 920px ✓
       Fix 5 — code overflow hidden ✓
       ══════════════════════════════════ */

    /* ── Fix 7: Scroll reveal ── */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* ── Fix 2: Heatmap row labels ── */
    .heatmap-wrap { display: flex; gap: 6px; }
    .heatmap-labels { display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; font-size: 9px; color: var(--muted); line-height: 1; padding-top: 2px; }
    .heatmap-labels span { height: 12px; display: flex; align-items: center; }
    .heatmap-grid-wrap { flex: 1; overflow-x: auto; }
    .heatmap-grid { display: grid; grid-template-columns: repeat(53, 12px); gap: 2px; }
    .heatmap-grid .hm-col { display: grid; grid-template-rows: repeat(7, 12px); gap: 2px; }
    .heatmap-grid .hm-cell { width: 12px; height: 12px; border-radius: 2px; background: oklch(94% 0.004 250); }
    .heatmap-grid .hm-cell.l1 { background: oklch(90% 0.008 250); }
    .heatmap-grid .hm-cell.l2 { background: oklch(82% 0.02 250); }
    .heatmap-grid .hm-cell.l3 { background: oklch(68% 0.06 250); }
    .heatmap-grid .hm-cell.l4 { background: oklch(52% 0.10 250); }
    .heatmap-grid .hm-cell.l5 { background: var(--accent); }

    /* ── Fix 3: Series timeline variant ── */
    .series-timeline { display: flex; flex-direction: column; gap: 0; }
    .series-timeline .st-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
    .series-timeline .st-item:last-child { border-bottom: none; }
    .series-timeline .st-item .st-marker { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 48px; flex-shrink: 0; }
    .series-timeline .st-item .st-marker .st-dot { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); flex-shrink: 0; }
    .series-timeline .st-item .st-marker .st-dot.active { background: var(--accent); }
    .series-timeline .st-item .st-marker .st-line { width: 2px; flex: 1; background: var(--border); }
    .series-timeline .st-item:last-child .st-marker .st-line { display: none; }
    .series-timeline .st-item .st-body { flex: 1; }
    .series-timeline .st-item .st-body .st-label { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 2px; }
    .series-timeline .st-item .st-body h4 { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
    .series-timeline .st-item .st-body .st-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

    /* ── Fix 3: Testimonials horizontal scroll ── */
    .test-scroll-wrap { position: relative; }
    .test-scroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: thin; }
    .test-scroll .test-card { flex: 0 0 340px; scroll-snap-align: start; }
    @media (max-width: 720px) { .test-scroll .test-card { flex: 0 0 280px; } }
    .test-scroll .test-card .stars { display: flex; gap: 2px; margin-bottom: 10px; }
    .test-scroll .test-card .stars svg { width: 14px; height: 14px; }
    .test-scroll .test-card .stars .filled { color: oklch(72% 0.14 85); }
    .test-scroll .test-card .stars .empty { color: var(--border); }
    .test-scroll .test-card .test-text { font-size: 14px; line-height: 1.6; color: var(--fg); flex: 1; }
    .test-scroll .test-card .test-author { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
    .test-scroll .test-card .test-author .ta-avatar { width: 32px; height: 32px; border-radius: 50%; background: oklch(92% 0.006 250); flex-shrink: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
    .test-scroll .test-card .test-author .ta-info .ta-name { font-size: 13px; font-weight: 500; }
    .test-scroll .test-card .test-author .ta-info .ta-role { font-size: 11px; color: var(--muted); }
    .test-scroll::-webkit-scrollbar { height: 4px; }
    .test-scroll::-webkit-scrollbar-track { background: transparent; }
    .test-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .test-scroll-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
    .test-scroll-dots .ts-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background 0.2s; }
    .test-scroll-dots .ts-dot.active { background: var(--accent); }

    /* ── Fix 3: Courses with progress bars ── */
    .course-progress .cp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    @media (max-width: 720px) { .course-progress .cp-row { grid-template-columns: 1fr; } }
    .course-progress .cp-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; }
    .course-progress .cp-card .cp-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .course-progress .cp-card .cp-top .cp-label { font-size: 11px; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }
    .course-progress .cp-card .cp-top .cp-label.price { color: var(--fg); }
    .course-progress .cp-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
    .course-progress .cp-card .cp-desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; margin-bottom: 16px; }
    .course-progress .cp-card .cp-bar-wrap { margin-bottom: 6px; }
    .course-progress .cp-card .cp-bar-wrap .cp-bar { height: 4px; border-radius: 4px; background: oklch(92% 0.006 250); overflow: hidden; }
    .course-progress .cp-card .cp-bar-wrap .cp-bar .cp-fill { height: 100%; border-radius: 4px; background: var(--accent); width: 0%; transition: width 1s ease; }
    .course-progress .cp-card .cp-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

    /* ── Fix 4: Creation timeline ── */
    .auth-timeline { padding: 32px 0; margin-bottom: 28px; }
    .auth-timeline .tl-header { margin-bottom: 24px; }
    .auth-timeline .tl-header h3 { font-size: 16px; font-weight: 600; }
    .auth-timeline .tl-header .tl-sub { font-size: 13px; color: var(--muted); }
    .auth-timeline .tl-items { display: flex; flex-direction: column; gap: 0; position: relative; }
    .auth-timeline .tl-items::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--border); }
    .auth-timeline .tl-item { display: flex; gap: 16px; padding: 12px 0; position: relative; }
    .auth-timeline .tl-item .tl-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); flex-shrink: 0; z-index: 1; display: grid; place-items: center; font-size: 10px; color: var(--accent); }
    .auth-timeline .tl-item .tl-dot.major { background: var(--accent); color: #fff; }
    .auth-timeline .tl-item .tl-body { flex: 1; padding-bottom: 8px; }
    .auth-timeline .tl-item .tl-body .tl-year { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.04em; }
    .auth-timeline .tl-item .tl-body h4 { font-size: 15px; font-weight: 600; margin: 2px 0; }
    .auth-timeline .tl-item .tl-body .tl-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }

    /* ── Fix 8: Integrated follow button ── */
    .auth-follow-row { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
    .auth-follow-row .af-integrated { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.15s; }
    .auth-follow-row .af-integrated:hover { opacity: 0.85; transform: translateY(-1px); }
    .auth-follow-row .af-integrated svg { width: 16px; height: 16px; }
    .auth-follow-row .af-integrated .af-count { font-weight: 400; opacity: 0.8; }
    .auth-count-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; color: var(--muted); }
    .auth-count-chip svg { width: 14px; height: 14px; opacity: 0.4; }