:root {
    --gs-base-width: 1912;
    --gs-min-scale: 0.45;
    --gs-max-scale: 1.15;
    --gs-px: clamp(calc(100vw / var(--gs-base-width) * var(--gs-min-scale)), calc(100vw / var(--gs-base-width)), calc(100vw / var(--gs-base-width) * var(--gs-max-scale)));
}

.github-status-panel {
    position: fixed;
    top: calc(88 * var(--gs-px));
    right: calc(40 * var(--gs-px));
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: calc(8 * var(--gs-px));
    background: var(--white);
    border: max(1px, calc(1 * var(--gs-px))) solid var(--border);
    border-radius: calc(10 * var(--gs-px));
    padding: calc(8 * var(--gs-px)) calc(14 * var(--gs-px));
    box-shadow: 0 calc(4 * var(--gs-px)) calc(16 * var(--gs-px)) rgba(0,0,0,.25);
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
    min-width: calc(180 * var(--gs-px));
    max-width: calc(260 * var(--gs-px));
}

.github-status-panel:hover {
    transform: translateY(calc(-1 * var(--gs-px)));
    box-shadow: 0 calc(6 * var(--gs-px)) calc(20 * var(--gs-px)) rgba(0,0,0,.32);
    border-color: var(--blue);
}

.github-status-panel.refreshing {
    opacity: 0.7;
    pointer-events: none;
}

.gs-indicator-wrap {
    position: relative;
    flex-shrink: 0;
}

.gs-indicator {
    width: calc(10 * var(--gs-px));
    height: calc(10 * var(--gs-px));
    border-radius: 50%;
    background: var(--text3);
    position: relative;
}

.gs-indicator::after {
    content: '';
    position: absolute;
    inset: calc(-3 * var(--gs-px));
    border-radius: 50%;
    border: max(1px, calc(2 * var(--gs-px))) solid transparent;
}

.gs-indicator.status-unknown {
    background: #fbbf24;
    animation: gs-pulse-yellow 1.5s ease-in-out infinite;
}

.gs-indicator.status-unknown::after {
    border-color: rgba(251, 191, 36, 0.4);
    animation: gs-ring-pulse 1.5s ease-in-out infinite;
}

.gs-indicator.status-online {
    background: #22c55e;
    box-shadow: 0 0 0 max(1px, calc(1 * var(--gs-px))) rgba(34, 197, 94, 0.2);
}

.gs-indicator.status-online::after {
    border-color: rgba(34, 197, 94, 0.35);
    animation: gs-ring-pulse 2s ease-out infinite;
}

.gs-indicator.status-offline {
    background: #ef4444;
}

.gs-indicator.status-offline::after {
    border-color: rgba(239, 68, 68, 0.3);
}

@keyframes gs-pulse-yellow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.88); }
}

@keyframes gs-ring-pulse {
    0% { opacity: 0.9; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(1.9); }
}

.gs-info-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.gs-status-label {
    font-size: calc(13 * var(--gs-px));
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: calc(6 * var(--gs-px));
}

.gs-status-label .status-online-text { color: #22c55e; }
.gs-status-label .status-offline-text { color: #ef4444; }
.gs-status-label .status-unknown-text { color: #fbbf24; }

.gs-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8 * var(--gs-px));
    margin-top: calc(2 * var(--gs-px));
}

.gs-ping-val {
    font-size: calc(11 * var(--gs-px));
    font-weight: 600;
    color: var(--text2);
    font-variant-numeric: tabular-nums;
}

.gs-ping-val.ping-fast { color: #22c55e; }
.gs-ping-val.ping-mid { color: #f59e0b; }
.gs-ping-val.ping-slow { color: #ef4444; }

.gs-refresh-icon {
    width: calc(14 * var(--gs-px));
    height: calc(14 * var(--gs-px));
    fill: var(--text3);
    transition: transform 0.3s ease, fill 0.2s ease;
    flex-shrink: 0;
}

.github-status-panel:hover .gs-refresh-icon {
    fill: var(--blue);
}

.github-status-panel.refreshing .gs-refresh-icon {
    animation: gs-spin 0.8s linear infinite;
    fill: var(--blue);
}

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

/* 详情弹窗 */
.gs-detail-popover {
    position: absolute;
    top: calc(100% + 8 * var(--gs-px));
    right: 0;
    min-width: calc(280 * var(--gs-px));
    background: var(--white);
    border: max(1px, calc(1 * var(--gs-px))) solid var(--border);
    border-radius: calc(10 * var(--gs-px));
    padding: calc(14 * var(--gs-px));
    box-shadow: 0 calc(10 * var(--gs-px)) calc(30 * var(--gs-px)) rgba(0,0,0,.38);
    z-index: 1002;
    display: none;
    animation: gs-fade-in 0.2s ease;
}

.gs-detail-popover.visible {
    display: block;
}

@keyframes gs-fade-in {
    from { opacity: 0; transform: translateY(calc(-4 * var(--gs-px))); }
    to { opacity: 1; transform: translateY(0); }
}

.gs-pop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(12 * var(--gs-px));
    padding-bottom: calc(10 * var(--gs-px));
    border-bottom: max(1px, calc(1 * var(--gs-px))) solid var(--border);
}

.gs-pop-title {
    font-size: calc(13 * var(--gs-px));
    font-weight: 700;
    color: var(--text);
}

.gs-pop-time {
    font-size: calc(11 * var(--gs-px));
    color: var(--text3);
}

.gs-pop-rows {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--gs-px));
}

.gs-pop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(12 * var(--gs-px));
}

.gs-pop-row-label {
    color: var(--text2);
    font-weight: 500;
}

.gs-pop-row-val {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.gs-pop-row-val.ok { color: #22c55e; }
.gs-pop-row-val.err { color: #ef4444; }

.gs-pop-history-list {
    margin-top: calc(10 * var(--gs-px));
    padding-top: calc(10 * var(--gs-px));
    border-top: max(1px, calc(1 * var(--gs-px))) dashed var(--border);
}

.gs-pop-history-title {
    font-size: calc(11 * var(--gs-px));
    color: var(--text3);
    font-weight: 600;
    margin-bottom: calc(6 * var(--gs-px));
}

.gs-history-bars {
    display: flex;
    align-items: flex-end;
    gap: calc(3 * var(--gs-px));
    height: calc(36 * var(--gs-px));
}

.gs-history-bar {
    flex: 1;
    background: var(--border);
    border-radius: calc(2 * var(--gs-px)) calc(2 * var(--gs-px)) 0 0;
    min-height: calc(3 * var(--gs-px));
    position: relative;
    transition: background 0.2s;
}

.gs-history-bar:hover {
    background: var(--blue);
}

.gs-history-bar.bar-ok { background: #22c55e; opacity: 0.7; }
.gs-history-bar.bar-mid { background: #f59e0b; opacity: 0.75; }
.gs-history-bar.bar-slow { background: #ef4444; opacity: 0.75; }
.gs-history-bar.bar-fail { background: #64748b; opacity: 0.6; }

.gs-pop-footer {
    margin-top: calc(12 * var(--gs-px));
    padding-top: calc(10 * var(--gs-px));
    border-top: max(1px, calc(1 * var(--gs-px))) solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: calc(8 * var(--gs-px));
}

.gs-footer-btn {
    flex: 1;
    padding: calc(6 * var(--gs-px));
    background: var(--bg);
    border: max(1px, calc(1 * var(--gs-px))) solid var(--border);
    border-radius: calc(6 * var(--gs-px));
    color: var(--text2);
    font-size: calc(11 * var(--gs-px));
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--gs-px));
}

.gs-footer-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
    background: rgba(64, 176, 255, 0.06);
}

.gs-footer-btn svg {
    width: calc(12 * var(--gs-px));
    height: calc(12 * var(--gs-px));
    fill: currentColor;
}