/* ============ GitHub live panel ============ */
.gh-panel { margin-top: 40px; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; background: var(--bg-card); }
.gh-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.gh-head-title { font-family: var(--ff-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.gh-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 2s ease-in-out infinite; margin-left: auto; }
.gh-stats { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--ff-mono); font-size: .84rem; color: var(--text-dim); margin-bottom: 18px; }
.gh-stats b { color: var(--text); font-weight: 700; }
.gh-repos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.gh-repo { background: var(--bg); padding: 15px 16px; transition: background var(--transition); }
.gh-repo:hover { background: var(--bg-alt); }
.gh-repo-name { font-family: var(--ff-mono); font-size: .84rem; font-weight: 700; margin-bottom: 5px; display: block; color: var(--text); transition: color var(--transition); }
.gh-repo-name:hover { color: var(--amber); }
.gh-repo-desc { font-size: .8rem; color: var(--text-mute); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-loading, .gh-error { font-family: var(--ff-mono); font-size: .8rem; color: var(--text-mute); padding: 4px 0; }
.gh-activity { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
.gh-activity-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gh-activity-title { font-family: var(--ff-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.gh-activity-total { font-family: var(--ff-mono); font-size: .78rem; color: var(--text-mute); }
.gh-heatmap-wrap { overflow-x: auto; padding-bottom: 6px; }
.gh-heatmap-months { position: relative; height: 16px; margin-left: 26px; }
.gh-month-label { position: absolute; top: 0; font-family: var(--ff-mono); font-size: .62rem; color: var(--text-mute); white-space: nowrap; }
.gh-heatmap-body { display: flex; gap: 6px; width: max-content; }
.gh-heatmap-days { display: grid; grid-template-rows: repeat(7, 10px); gap: 3px; font-family: var(--ff-mono); font-size: .58rem; color: var(--text-mute); width: 20px; flex-shrink: 0; }
.gh-heatmap-days span { display: flex; align-items: center; }
.gh-heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 10px); gap: 3px; }
.gh-cell { width: 10px; height: 10px; border-radius: 2px; background: var(--gh-0); }
.gh-cell-empty { background: transparent; }
.gh-cell[data-level="0"] { background: var(--gh-0); }
.gh-cell[data-level="1"] { background: var(--gh-1); }
.gh-cell[data-level="2"] { background: var(--gh-2); }
.gh-cell[data-level="3"] { background: var(--gh-3); }
.gh-cell[data-level="4"] { background: var(--gh-4); }
.gh-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-family: var(--ff-mono); font-size: .62rem; color: var(--text-mute); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }