.site-ops-bar {
    --h: 40px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 12px;
    z-index: 9999;
    background: rgba(20, 22, 25, .92);
    color: #e7eaee;
    border-top: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: saturate(1.2) blur(6px);
    font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.site-ops-bar * {
    box-sizing: border-box
}

.ops-left, .ops-right {
    display: flex;
    align-items: center;
    gap: 8px
}

.ops-logo img {
    height: 24px;
    display: block
}

.bar-btn {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .08s
}

.bar-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px
}

.bar-btn:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .2)
}

.bar-btn:active {
    transform: translateY(1px)
}

.seo-score {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12)
}

.seo-score .ring {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg)
}

.seo-score .ring .track {
    stroke: rgba(255, 255, 255, .15);
    stroke-width: 3;
    fill: none
}

.seo-score .ring .progress {
    stroke: #22c55e;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0 999;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .6s ease, stroke .3s
}

.seo-score .value {
    font-variant-numeric: tabular-nums
}

@media (max-width: 768px) {
    .bar-btn span {
        display: none
    }

    .seo-score {
        padding: 0 6px
    }
}

@media print {
    .site-ops-bar {
        display: none
    }
}

/* Light mode uyumu */
@media (prefers-color-scheme: light) {
    .site-ops-bar {
        background: rgba(250, 250, 252, .92);
        color: #0f172a;
        border-top: 1px solid rgba(2, 6, 23, .08)
    }

    .bar-btn {
        border-color: rgba(2, 6, 23, .12)
    }

    .bar-btn:hover {
        background: rgba(2, 6, 23, .06);
        border-color: rgba(2, 6, 23, .2)
    }

    .seo-score {
        background: rgba(2, 6, 23, .03);
        border-color: rgba(2, 6, 23, .12)
    }

    .seo-score .ring .track {
        stroke: rgba(2, 6, 23, .15)
    }
}

body {
    padding-bottom: var(40px)
}