/* Beta layer added to the live tool pages by _wrap.php: account bar (with the theme toggle),
   members-only locks, ad slots. Color themes: beta_themes.css and themes/. Every rule is scoped to bk-* classes so nothing of the live page changes. */

.bk-bar {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 16px;
    background: #0b1f44;
    color: #fff;
    font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.bk-bar-tag { margin-right: auto; padding: 2px 9px; border-radius: 999px; background: #fff; color: #0a7afc; font-size: 12px; font-weight: 800; }
.bk-bar a { color: #cfe0ff; }
.bk-bar form { display: flex; gap: 6px; align-items: center; margin: 0; }
.bk-bar input[type=text] { width: 190px; max-width: 46vw; padding: 6px 10px; border: 0; border-radius: 8px; font-size: 14px; }
.bk-bar button, .bk-bar .bk-bar-btn { padding: 6px 12px; border: 0; border-radius: 8px; background: #0a7afc; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; }
.bk-bar .bk-bar-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); }
.bk-bar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bk-bar .bk-theme { position: relative; display: inline-flex; }
.bk-bar .bk-theme-toggle { min-width: 34px; padding: 4px 8px; line-height: 1; }
.bk-bar .bk-theme-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; display: flex; flex-direction: column;
                         min-width: 150px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.bk-bar .bk-theme-menu[hidden] { display: none; }
.bk-bar .bk-theme-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
                                background: none; color: #26303f; font-weight: 600; text-align: left; }
.bk-bar .bk-theme-menu button:hover { background: #f2f4f8; }
.bk-bar .bk-theme-menu button[aria-pressed="true"] { background: #eef2f8; }
.bk-bar .bk-theme-menu .bk-swatch { border-color: #fff; }
.bk-bar .bk-bar-me { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 600; }
.bk-bar .bk-bar-me:hover span { text-decoration: underline; }
.bk-bar .bk-plan { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); font-size: 12px; font-weight: 700; }
.bk-bar .bk-plan-premium { background: #ffd56b; color: #4a3200; }

/* Members-only: locked buttons and the note that replaces locked content */
.bk-locked { opacity: 0.85; }
.bk-teaser {
    margin: 10px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff8ec;
    border: 1px solid #f3dfb8;
    color: #4a3a1a;
    font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: left;
}
.bk-teaser strong { color: #26303f; }
.bk-teaser-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bk-teaser a.bk-cta, .bk-teaser button.bk-cta {
    display: inline-block; padding: 7px 14px; border: 0; border-radius: 999px;
    background: #0a7afc; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
}
.bk-teaser .bk-cta-ghost { background: #fff !important; color: #2f5fd0 !important; border: 1px solid #d5dce8 !important; }

/* The history card's members-only state keeps the card's own look (check_history.css) */
.bk-history-lock .ch-head p { margin-bottom: 0; }

/* Ads, for visitors who are not logged in */
.bk-ad { margin: 0 0 24px; padding: 10px 14px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); }
.bk-ad[hidden] { display: none; }
.bk-ad.bk-ad-page { margin: 20px 0; flex-shrink: 0; }   /* under the sub-menu row of each page */
.bk-ad-label { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7a8496; margin-bottom: 6px; }
.bk-ad-placeholder { padding: 22px; border: 2px dashed #c9d1dd; border-radius: 10px; text-align: center; color: #7a8496; font-size: 14px; line-height: 1.5; }

@media (max-width: 576px) {
    .bk-bar { justify-content: space-between; }
    .bk-bar input[type=text] { width: 150px; }
    .bk-bar .bk-bar-account { display: none; }   /* the handle links to the account page */
}

/* Counts shown in place of a locked list */
.bk-factor-count { margin: 0 0 6px; font-weight: 700; color: #26303f; }

/* Bot Check, members: the extra details under each factor, and how the score is built */
.bk-factor-more { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #f6f8fc; border: 1px solid #e3e8f1;
                  font-size: 13px; line-height: 1.5; color: #4a5568; }
.bk-factor-more p { margin: 0 0 4px; }
.bk-factor-more p:last-child { margin-bottom: 0; }
.bk-factor-summary { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #fff8ec; border: 1px solid #f3dfb8;
                     font-size: 13px; line-height: 1.5; color: #4a3a1a; }

/* Likes, logged in: the three best posting slots above the blurred heatmap */
.bk-best-slots { margin: 6px 0 12px; padding-left: 22px; font-size: 14px; line-height: 1.7; }

/* The support card added to pages without one (home, Stats, Lists...): the live tools' card
   (.support-bar in follower_stats_style.css), repeated for pages that don't load that sheet */
.bk-support { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0; padding: 13px 16px; flex-shrink: 0;
              border: 1px solid #d6e4ff; border-radius: 12px; background: linear-gradient(90deg, #f2f7ff, #fbfdff);
              font-family: inherit; text-align: left; }
.bk-support .support-bar-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.bk-support .support-bar-text { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.4; }
.bk-support .support-bar-text strong { display: block; color: #18181b; }
.bk-support .support-bar-text span { color: #5b6b7c; font-size: 13px; }
.bk-support .support-bar-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 10px 18px;
              border-radius: 999px; background-color: #ff5e5b; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.bk-support .support-bar-button:hover { background-color: #f04b48; color: #fff; }

/* Follower Tracker, audience quality for logged-in non-members: the extra tiles are blurred
   (with placeholder numbers), and tiles don't open their list */
#quality-card .bk-q-tile { cursor: default; }
/* Anything shown blurred to non-members holds placeholders, never the real values */
.bk-blurred { filter: blur(5px); opacity: 0.75; pointer-events: none; user-select: none; }

/* The "free and ad-free, supported by its users" line in the tools' progress view */
.support-note { display: none !important; }

/* Logged-out bar on phones: one compact "Log in" button (to the account page) instead of the
   inline form, which took ~95px of every page */
.bk-bar .bk-bar-login-link { display: none; padding: 6px 14px; border-radius: 8px; background: #0a7afc; color: #fff;
                             font-weight: 700; font-size: 13px; text-decoration: none; }
@media (max-width: 576px) {
    .bk-bar form { display: none; }
    .bk-bar .bk-bar-login-link { display: inline-block; }
}

/* The daily limit: the live error box becomes a friendly card (gate.js friendlyLimits) */
.bk-limit { background: none !important; border: 0 !important; padding: 0 !important; margin: 12px 0 !important;
            color: inherit !important; display: block !important; text-align: left !important; box-shadow: none !important; }
.bk-limit-card { padding: 14px 16px; border-radius: 12px; background: #eef4ff; border: 1px solid #cddcff; color: #26303f;
                 font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bk-limit-card strong { display: block; font-size: 15px; }
.bk-limit-card p { margin: 6px 0 0; }
.bk-limit-card .bk-cta { display: inline-block; padding: 7px 14px; border: 0; border-radius: 999px; background: #0a7afc; color: #fff;
                         font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; }
.bk-limit-card .bk-cta-ghost { background: #fff; color: #2f5fd0; border: 1px solid #d5dce8; }

/* The theme button: its swatch and a "Theme" label (no hover tooltip on phones); logged in on a
   narrow phone, the swatch alone, to keep the bar on one row */
.bk-bar .bk-theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
.bk-bar .bk-theme-label { font-size: 12px; font-weight: 600; }
@media (max-width: 420px) { .bk-bar.bk-bar-in .bk-theme-label { display: none; } }

/* Home: "New accounts across the Atmosphere" (gate.js atmosphereCard) */
/* Card subtitles (both home cards): one line, so the two headers keep the same height */
.bk-card-sub { margin: 4px 0 0; font-size: 13px; color: #6b7686; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-counter .counter-value.tooltip-element:hover::after { white-space: pre-line; text-align: left; font-size: 13px; line-height: 1.5;
                                                          width: max-content; max-width: 260px; }
.bk-host { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
           vertical-align: 1px; background: #eef0f3; color: #4a5568; }
.bk-host-eurosky { background: #e6ecfb; color: #1f3f9a; }
.bk-host-w { background: #e8f6ef; color: #1f6b47; }
.bk-host-blacksky { background: #26303f; color: #fff; }
.bk-host-bridgy { background: #f2ebfc; color: #5b2a99; }
.bk-host-custom { background: #fff; color: #6b7686; border: 1px solid #d5dce8; }
.bk-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff3c4; color: #7a5a00;
          border: 1px solid #f1d675; font-size: 10px; font-weight: 700; line-height: 1.3; vertical-align: 1px; }
.bk-host-filter { display: flex; gap: 6px; margin: 4px 15px 8px; }
.bk-host-filter button { padding: 5px 12px; border: 1px solid #d5dce8; border-radius: 999px; background: #fff; color: #4a5568;
                         font-size: 12px; font-weight: 700; cursor: pointer; }
.bk-host-filter button[aria-pressed="true"] { background: #0a7afc; border-color: #0a7afc; color: #fff; }
.bk-only-bluesky .realtime-table tr[data-host="other"] { display: none; }
.bk-other-list { flex: 1; min-height: 0; padding: 0 15px 15px; overflow-y: auto; }
.bk-other-list[hidden], .realtime-table-container[hidden] { display: none; }
.bk-other-empty { margin: 8px 0; font-size: 13px; color: #6b7686; }

/* Home card: hover pause, call to action, milestones */
.realtime-table-container.bk-paused { position: relative; }
.realtime-table-container.bk-paused::before { content: "Paused while your pointer is on the list"; position: sticky; top: 0; z-index: 2; display: block;
    margin: 0 0 4px; padding: 3px 8px; border-radius: 6px; background: #fff8e1; color: #5a4300; font-size: 11px; font-weight: 600; text-align: center; }
.bk-card-cta { display: block; flex-shrink: 0; margin: 0 15px 15px; padding: 10px 12px; border-radius: 10px; background: #f2f6ff;
               color: #0a4fb0; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
.bk-card-cta:hover { background: #e6efff; }
.bk-milestone { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: #fff8e1; color: #5a4300; font-size: 13px; line-height: 1.45; }
.bk-milestone[hidden] { display: none; }
.bk-milestone-when { margin-left: 4px; color: #8a7a50; font-size: 12px; }

/* Home, right card (gate.js domainsCard): on top, per hour today and the network total with
   the next milestone; then the live controls and the list, filling the card on desktop (phones keep the
   live 6 rows); at the bottom, a quick account check. The dropdown's tooltip describes each type.
   Blocks share one look: a small title row, the same inner padding as the lists. */
@media (min-width: 577px) {
    /* the list fills the card's height (matched to the left card), at least ~10 rows */
    .bk-domains .domains-table-container { flex: 1 1 0; min-height: 420px; max-height: none; overflow-y: auto; }
}
.bk-domains .domain-select.bk-has-tip { cursor: help; }
/* Its "Last 24h / Avg /h" figures overflowed the card: they are in the dropdown's tooltip */
.bk-domains .domains-stats { display: none; }
.bk-dom-extra { display: flex; flex-direction: column; gap: 12px; padding: 4px 15px 15px; }
.bk-dom-top { padding: 15px 15px 4px; flex-shrink: 0; }
.bk-dom-bottom { flex-shrink: 0; }
.bk-block { padding: 12px 14px; border-radius: 10px; background: var(--section-bg, #f8f9fa); border: 1px solid var(--card-border, #e6e6e6); }
.bk-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bk-block-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary-dark, #0862ca); }
.bk-block-head a { font-size: 12px; font-weight: 600; color: var(--primary-color, #0a7afc); text-decoration: none; }
.bk-block-note { margin: 6px 0 0; font-size: 12px; color: #6b7686; }
.bk-hourly-chart svg { display: block; width: 100%; height: 54px; }
.bk-hourly-chart rect { fill: var(--primary-color, #0a7afc); }
.bk-hourly-chart rect.bk-bar-now { opacity: 0.45; }
.bk-hourly-chart rect.bk-bar-empty { fill: #d5dce8; }
.bk-now-total { font-size: 26px; font-weight: 800; color: var(--text-dark, #222); line-height: 1.2; }
.bk-now-total span { font-size: 12px; font-weight: 500; color: #6b7686; }
.bk-progress { height: 8px; margin-top: 8px; border-radius: 999px; background: #e3e8f0; overflow: hidden; }
.bk-progress span { display: block; height: 100%; border-radius: 999px; background: var(--primary-color, #0a7afc); }
.bk-quick-form { display: flex; flex-direction: column; gap: 8px; }
.bk-quick-form input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #d5dce8; border-radius: 8px; font-size: 14px; }
.bk-quick-buttons { display: flex; gap: 6px; }
.bk-quick-buttons button { flex: 1; padding: 8px 6px; border: 0; border-radius: 8px; background: var(--primary-color, #0a7afc); color: #fff;
                           font-size: 13px; font-weight: 700; cursor: pointer; }
.bk-quick-buttons button:hover { background: var(--primary-dark, #0862ca); }

/* Stats page (gate.js statsPage): one row of tabs under the Registration trends / Live count
   switch, lighter than the switch; the content of the open tab directly under it */
.bk-stats .bk-stats-tabs { padding: 6px; gap: 6px; }
.bk-stats .bk-stats-tabs .section-toggle-btn[data-section] { padding: 9px 14px; font-size: 13.5px; }
.bk-stats .bk-stats-tabs .section-toggle-btn[data-section]::after { content: none; }
.bk-stats .stats-section-group.active { margin-top: 0; }
.bk-stats .current-users { flex: 1; min-width: 0; }
.bk-users-next p { margin: 6px 0 0; font-size: 12px; color: #6b7686; }
/* The live page shows icons only under 768px: the labels stay, on both rows */
@media (max-width: 768px) {
    .bk-stats .section-toggle-container .section-toggle-btn span { display: inline; }
    .bk-stats .section-toggle-container .section-toggle-btn { gap: 6px; font-size: 13px; padding: 9px 10px; }
    .bk-stats .bk-stats-switch { flex-direction: row; flex-wrap: nowrap; }
    .bk-stats .bk-stats-switch .section-toggle-btn { flex: 1 1 0; min-width: 0; width: auto; }
    .bk-stats .bk-stats-tabs { flex-wrap: wrap; justify-content: flex-start; }
    .bk-stats .bk-stats-tabs .section-toggle-btn[data-section] { padding: 8px 10px; }
    .bk-stats .bk-stats-tabs .section-toggle-btn[data-section] { flex: 1 1 auto; min-width: 0; border-radius: 8px; }
}

/* Home: the sign-up surge indicator's tooltip, on several lines (gate.js atmosphereCard) */
.bot-detection:hover::after { white-space: normal; width: 240px; line-height: 1.35; }
/* Phones: the robot at the right end of the line (as on desktop), a bigger tap target, and the
   tooltip under it, aligned right (to its left it went off the screen) */
@media (max-width: 576px) {
    .bot-detection { margin-left: auto; padding: 4px; margin-right: -4px; }
    .bot-icon { width: 18px; height: 18px; }
    .bot-detection:hover::after { right: 0; top: calc(100% + 6px); transform: none; margin-right: 0; width: 220px; }
    .bot-detection:hover::before { right: 8px; top: calc(100% - 4px); transform: none; margin-right: 0;
        border-left-color: transparent; border-bottom-color: var(--text-dark); }
}