/* --- Глобальні змінні --- */
    .sofzp-dashboard-section {
        --bg-color: #f8f9fa; --card-bg: #ffffff; --text-color: #212529; --secondary-text-color: #6c757d;
        --header-color: #007bff; --border-color: #dee2e6; --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --sparkline-color: #007bff; --sparkline-gradient-start: rgba(0, 123, 255, 0.3); --sparkline-gradient-end: rgba(0, 123, 255, 0);
        --chart-bg-color: rgba(0, 86, 179, 0.04);
        /* Subtle gray bg for logo wrappers in light theme. Pure white blended
           with the white card backgrounds, making white-on-white logos
           invisible. This value gives perceptible texture without looking
           dirty. Variants {name}_light.{ext} take precedence when present. */
        --logo-bg: #f0f4f8;
        --logo-border: rgba(0, 0, 0, 0.12);
        --logo-border-inner: rgba(0, 0, 0, 0.08);
        background-color: var(--bg-color); transition: background-color 0.4s ease; font-family: 'Inter', sans-serif;
        position: relative; /* ⭐ НОВЕ: Для позиціонування оверлея */
    }
    .sofzp-dashboard-section.dark-theme {
        --bg-color: #121212; --card-bg: #1e1e1e; --text-color: #ffffff; --secondary-text-color: #bbbbbb;
        --header-color: #4dabf7; --border-color: #333; --shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        --sparkline-color: #4dabf7; --sparkline-gradient-start: rgba(77, 171, 247, 0.3); --sparkline-gradient-end: rgba(77, 171, 247, 0);
        --chart-bg-color: rgba(77, 171, 247, 0.05);
        /* Темний фон для логотипів у темній темі */
        --logo-bg: #2a2d36;
        --logo-border: rgba(255, 255, 255, 0.15);
        --logo-border-inner: rgba(255, 255, 255, 0.1);
    }

    /* ⭐ НОВЕ: Стилі для індикатора завантаження */
    #sofzp-loader-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(248, 249, 250, 0.85);
        z-index: 10001;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.4s ease;
        backdrop-filter: blur(4px);
    }
    .dark-theme #sofzp-loader-overlay {
        background-color: rgba(18, 18, 18, 0.85);
    }
    #sofzp-loader-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }
    .loader-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .loader-spinner {
        width: 48px;
        height: 48px;
        border: 5px solid var(--border-color);
        border-bottom-color: var(--header-color);
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .loader-text {
        font-size: 16px;
        font-weight: 500;
        color: var(--text-color);
    }
    .sofzp-dashboard-section.is-loading {
        min-height: 85vh;
    }

    .dashboard-content-container { max-width: 1200px; margin: 0 auto; padding: 25px; display: flex; flex-direction: column; gap: 20px; }
    .theme-switcher-container { display: flex; justify-content: flex-end; }

    /* Theme switch */
    .theme-switch { position: relative; display: inline-block; width: 60px; height: 34px; }
    .theme-switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: "☀️"; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    input:checked + .slider { background-color: var(--header-color); }
    input:checked + .slider:before { content: "🌙"; transform: translateX(26px); }

    .sp-block { background-color: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); box-shadow: var(--shadow); color: var(--text-color); padding: 25px; }

	/* --- Controls (Epoch + Theme) --- */
	.controls-bar{
	  display:flex; align-items:center; justify-content:space-between;
	  gap:14px; flex-wrap:wrap;
	}
	.controls-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
	.controls-right{ display:flex; align-items:center; }
	
	.epoch-control{
	  display:flex; align-items:center; gap:8px;
	  border:1px solid var(--border-color); background:var(--card-bg);
	  border-radius:999px; padding:4px 10px; height:34px;
	}
	.epoch-control .label{ font-size:13px; color:var(--secondary-text-color); }
	.epoch-control i{ color:var(--header-color); }
	
	#epoch-select{
	  border:none; background:transparent; color:var(--text-color);
	  padding:6px 6px; outline:none; font:inherit; min-width:84px;
	}
	
	/* існуючі стилі pills лишаємо як є */
	.epoch-stale{ display:none; align-items:center; gap:8px; padding:6px 10px;
	  border-radius:999px; border:1px solid #ffe08a; background:#fff3cd; color:#7a5b00; font-size:12px; }
	.dark-theme .epoch-stale{ border-color:#5c4a10; background:#3a2d07; color:#ffd166; }
	
	.epoch-hint{ font-size:12px; color:var(--secondary-text-color); opacity:.9; }
	@media (max-width: 700px){ .epoch-hint{ display:none; } }
	
	@media (max-width: 560px){
	  .controls-bar{ justify-content:center; }
	  .controls-right{ order:-1; } /* тумблер над селектом — як на макеті */
	}

    /* --- Summary --- */
    .sp-summary-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .sp-summary-card { display: flex; flex-direction: column; gap: 8px; }
    .sp-summary-card .title { font-size: 15px; font-weight: 500; color: var(--secondary-text-color); display: flex; align-items: center; }
    .sp-summary-card .value { font-size: 22px; font-weight: 600; color: var(--text-color); }
    .sp-summary-card .value .small-text { font-size: 13px; font-weight: 400; color: var(--secondary-text-color); margin-left: 5px; }
    /* Snapshot Time: тримати все значення в одному рядку */
	.sp-summary-card:first-child .value { white-space: nowrap; }
    .sp-summary-card .icon { margin-right: 10px; color: var(--header-color); font-size: 18px; width: 20px; text-align: center; }
    
	/* Snapshot Time ширший + TZ не ламається */
	.sp-summary-card .value .small-text { white-space: nowrap; }
	
	/* Desktop: перша колонка ширша за інші */
	@media (min-width: 900px) { .sp-summary-block { grid-template-columns: 1.35fr 1fr 1fr 1fr; } }
	@media (max-width: 899px) { .sp-summary-block .sp-summary-card:first-child { grid-column: 1 / -1; } }
    
    .total-stake-card { grid-column: 1 / -1; border-top: 1px solid var(--border-color); padding-top: 25px; margin-top: 10px; }
	/* Завжди повна ширина контейнера, без «острівців» */
	.total-stake-grid {
	  display: grid;
	  grid-template-columns: 1fr;          /* мобільний — одна колонка */
	  gap: 15px;
	  margin-top: 10px;
	  justify-items: stretch;
	}
	@media (min-width: 560px) {
	  .total-stake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* планшет */
	}
	@media (min-width: 940px) {
	  .total-stake-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* десктоп */
	}
	.total-stake-item { width: 100%; }
    .total-stake-item { display: flex; align-items: center; gap: 12px; background-color: var(--bg-color); padding: 15px; border-radius: 12px; }
    .total-stake-item .stake-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .total-stake-item .icon { font-size: 26px; line-height: 1; color: var(--header-color); }
    .total-stake-item .stake-info .value { font-size: 20px; font-weight: 700; }
    .total-stake-item .stake-info .label { font-size: 13px; color: var(--secondary-text-color); }
    #total-stake-icon { color: #9945FF; } #total-validators-icon { color: #0d6efd; } #activating-stake-icon { color: #28a745; } #deactivating-stake-icon { color: #dc3545; }
    
	/* Маленькі екрани: плитки завжди на всю ширину, один стовпчик */
	@media (max-width: 560px) { .total-stake-grid { grid-template-columns: 1fr; } }

	/* Mobile: center summary tiles nicely + FORCE full width for wide children */
	@media (max-width: 560px){
	  .sp-summary-card{ 
		align-items:center;         /* лишаємо центр для дрібних елементів */
		text-align:center;
	  }
	  .sp-summary-card .title{ align-items:center; }
	  .total-stake-item .stake-info{ align-items:center; }
	
	  /* ⬇️ КЛЮЧ: великі блоки всередині картки мають розтягуватися на всю ширину */
	  .sp-summary-card .summary-chart-wrapper,
	  .sp-summary-card .interactive-chart-container,
	  .sp-summary-card .total-stake-grid{
		align-self: stretch;        /* скасувати cross-axis centering для цих елементів */
		width: 100%;
	  }
	  /* Center the big card & its inner blocks on mobile */
		.total-stake-card,
		.sp-summary-card .summary-chart-wrapper,
		.sp-summary-card .interactive-chart-container,
		.sp-summary-card .total-stake-grid{
		  margin-left: auto;
		  margin-right: auto;
		  max-width: 460px; /* можеш підкрутити 420—520 за смаком */
		}
		.total-stake-card{ padding-left: 1px; padding-right: 1px; }
	}
	
	/* Mobile: акуратне центрування всередині чорних плиток */
	@media (max-width: 560px){
	  .total-stake-item{
		justify-content: center;        /* центр групи: іконка + текст */
		align-items: center;
	  }
	  .total-stake-item .stake-info{
		align-items: center;            /* центрує флекс-вміст */
		text-align: center;             /* центрує сам текст */
	  }
	  .total-stake-item .stake-info .label{
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		line-height: 1.2;
	  }
	  .total-stake-item .stake-info .label .epoch-inline-note{
		text-align: center;             /* щоб "in epoch …" не тягнулось вліво */
	  }
	}
    
    /* --- Info --- */
    .sp-info-container { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); padding: 15px 20px; margin-top: -5px; margin-bottom: -5px; font-size: 13px; color: var(--secondary-text-color); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
    .sp-info-container span { display: flex; align-items: center; gap: 10px; }
    .sp-info-container .fas { font-size: 14px; width: 16px; text-align: center; color: var(--header-color); }
    .sp-info-container b { color: var(--text-color); font-weight: 600; }
    .sp-info-container .stale { color:#7a5b00; }
    .dark-theme .sp-info-container .stale { color:#ffd166; }
    
    /* --- ПОКРАЩЕНІ ВКЛАДКИ --- */
    .sp-tabs-nav { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 8px; 
        border-bottom: 2px solid var(--border-color); 
        margin-bottom: 25px; 
        padding-bottom: 0;
        background: var(--card-bg);
        border-radius: 12px 12px 0 0;
        padding: 12px 12px 0;
        box-shadow: var(--shadow);
    }

    .sp-tab-link { 
        padding: 14px 20px; 
        cursor: pointer; 
        border: 2px solid var(--border-color); 
        background: var(--bg-color); 
        color: var(--text-color); 
        font-size: 15px; 
        font-weight: 600; 
        border-radius: 10px 10px 0 0; 
        transition: all 0.3s ease; 
        display: flex; 
        align-items: center; 
        gap: 8px; 
        min-height: 48px;
        position: relative;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .sp-tab-link:hover { 
        color: var(--header-color); 
        background: var(--card-bg);
        border-color: var(--header-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }

    .sp-tab-link.active { 
        color: #fff; 
        font-weight: 700; 
        background: var(--header-color);
        border-color: var(--header-color);
        box-shadow: 0 4px 12px rgba(12, 124, 115, 0.3);
        transform: translateY(-1px);
    }

    .sp-tab-link .fa-book { 
        font-size: 16px; 
    }

    /* Desktop покращення */
    @media (min-width: 769px) {
        .sp-tabs-nav {
            gap: 12px;
            padding: 16px 20px 0;
        }
        
        .sp-tab-link {
            padding: 16px 24px;
            font-size: 16px;
            min-width: 140px;
            justify-content: center;
        }
        
        .sp-tab-link:hover {
            transform: translateY(-3px);
        }
    }

    /* Мобільні екрани */
    @media (max-width: 768px) {
        .sp-tabs-nav {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 12px;
            border-radius: 12px;
            border-bottom: none;
            margin-bottom: 20px;
        }
        
        .sp-tab-link {
            padding: 16px 12px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 8px;
            min-height: 60px;
            justify-content: center;
            text-align: center;
            flex-direction: column;
            gap: 4px;
            border: 2px solid var(--border-color);
        }
        
        .sp-tab-link.active {
            background: var(--header-color);
            color: white;
            border-color: var(--header-color);
        }
        
        /* Спеціальні іконки для мобільних */
        .sp-tab-link[data-tab="pools"]::before {
            content: "📊";
            font-size: 20px;
            display: block;
        }
        
        .sp-tab-link[data-tab="validators"]::before {
            content: "👥";
            font-size: 20px;
            display: block;
        }
        
        .sp-tab-link[data-tab="predictions"]::before {
            content: "🎯";
            font-size: 20px;
            display: block;
        }
        
        .sp-tab-link[data-tab="docs"]::before {
            content: "📖";
            font-size: 20px;
            display: block;
        }
        
        .sp-tab-link .fa-book {
            display: none;
        }
    }

    /* Дуже маленькі екрани */
    @media (max-width: 480px) {
        .sp-tabs-nav {
            grid-template-columns: 1fr;
            gap: 6px;
            padding: 10px;
        }
        
        .sp-tab-link {
            padding: 14px 16px;
            min-height: 56px;
            flex-direction: row;
            justify-content: flex-start;
            text-align: left;
            gap: 12px;
        }
        
        .sp-tab-link[data-tab="pools"]::before,
        .sp-tab-link[data-tab="validators"]::before,
        .sp-tab-link[data-tab="predictions"]::before,
        .sp-tab-link[data-tab="docs"]::before {
            font-size: 24px;
            margin-right: 8px;
        }
    }

    /* Темна тема для вкладок */
    .dark-theme .sp-tab-link {
        border-color: #444;
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .dark-theme .sp-tab-link:hover {
        border-color: var(--header-color);
        background: #333;
        box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    }

    .dark-theme .sp-tab-link.active {
        background: var(--header-color);
        border-color: var(--header-color);
        box-shadow: 0 4px 12px rgba(77, 171, 247, 0.4);
    }

    .sp-tab-content { display: none; }
    .sp-tab-content.active { display: block; }

    /* --- Cards --- */
    #stake-pool-dashboard .sp-block-header { font-size: 28px; font-weight: 700; color: var(--text-color); margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
    .sp-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; }
    .sp-group-card { display: flex; flex-direction: column; padding: 25px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .sp-group-card:hover { transform: translateY(-5px); }
    
    /* Bug 8: "Other Stakes" is an aggregate, not a clickable pool - remove hover lift and pointer */
    .sp-pool-card-nonclickable:hover { transform: none !important; }
    .sp-pool-card-nonclickable .card-header { cursor: default !important; }
    .sp-pool-card-nonclickable .pool-name { cursor: default !important; }
    .card-header { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); min-height: 72px; }
	/* Pool grid card icon. Uses the wrapper-plus-img pattern so percent
	   padding on the inner img/svg resolves to wrapper width (not the
	   surrounding flex container). Identical visual output to .pool-badge
	   and donut center, all driven by the same 12% padding ratio. */
	.card-header .card-header-logo {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: 2px solid var(--border-color);
		background-color: var(--logo-bg);
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
	}
	.card-header .card-header-logo img,
	.card-header .card-header-logo > svg {
		width: 100%;
		height: 100%;
		object-fit: contain;
		padding: 12%;
		box-sizing: border-box;
	}

	/* OTHER group SVG: same wrapper as image pools, just the svg color
	   adapts to theme via --secondary-text-color so it stays visible on
	   both light (subtle gray) and dark (textured gray) backgrounds. */
	.card-header .card-header-logo-svg {
		color: var(--secondary-text-color);
	}
    .card-header .pool-name { font-size: 20px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .card-body { display: flex; flex-direction: column; gap: 20px; flex-grow: 1; margin-top: 20px; }
    .card-main-content { display: flex; flex-direction: column; gap: 16px; }
    .card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .stat-item { display: flex; flex-direction: column; gap: 4px; align-items: center; }
    .stat-item .label { font-size: 14px; color: var(--secondary-text-color); }
    .stat-item .value { font-size: 18px; font-weight: 600; }
    .stake-breakdown { background-color: var(--bg-color); padding: 16px; border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
    .breakdown-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 4px 0; }
    .breakdown-item .label { display: flex; align-items: center; gap: 8px; }
    .breakdown-item .value { font-weight: 500; }
    .breakdown-item .icon-activating { color: #28a745; }
    .breakdown-item .icon-deactivating { color: #dc3545; }
    .breakdown-item .icon-total-validators { color: #8a63d2; }
    .pool-details{ font-size:14px; color:var(--secondary-text-color); margin-top:0; }
    .pool-details p { margin: 0 0 10px 0; }
    .pool-details a { color: var(--header-color); text-decoration: none; }
    .pool-details a:hover { text-decoration: underline; }
	/* --- Collapsible description (cards) --- */
	.pool-details .desc-wrap{ position:relative; --desc-lines:4; margin:0 0 8px; cursor:pointer; }
	.pool-details .desc-text{ margin:0; line-height:1.6; }
	.pool-details .desc-wrap.collapsed .desc-text{
	  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--desc-lines); overflow:hidden;
	}
	.pool-details .desc-wrap.collapsed::after{
	  content:""; position:absolute; left:0; right:0; bottom:0; height:38px;
	  background:linear-gradient(to bottom, transparent, var(--card-bg)); pointer-events:none;
	}
	/* коли згорнуто — показуємо курсор (можна клікнути) */
	.pool-details .desc-wrap.collapsed { cursor: pointer; }
	
	/* вимкнути clamp тимчасово для вимірювання (клас ставить JS) */
	.pool-details .desc-wrap.no-clamp .desc-text{
	  display:block;
	  -webkit-line-clamp:unset;
	  overflow:visible;
	}
	/* Кнопка "Show more" — нейтральна */
	.desc-toggle{
	  background:none; border:none; padding:0;
	  color: var(--secondary-text-color);
	  font-size:13px; cursor:pointer;
	  margin: 2px 0 10px;
	}
	.desc-toggle:hover{ color: var(--text-color); }
    
	/* на ширших екранах вирівняти статистику вліво — візуально спокійніше */
	@media (min-width: 900px){
	  .stat-item { align-items: flex-start; }
	}    
    
    
    /* --- Keys --- */
    .pool-keys-container { border-top: 1px solid var(--border-color); padding-top: 15px; margin-top: auto; }
    .key-group { margin-bottom: 12px; }
    .key-group:last-child { margin-bottom: 0; }
    .key-group strong { font-size: 11.5px; font-weight: 500; color: var(--secondary-text-color); display: block; margin-bottom: 6px; }
    .key-group code { display: block; font-size: 9px; line-height: 1.5; color: var(--secondary-text-color); word-break: break-all; font-family: 'Courier New', Courier, monospace; }
    /* Bug 9: strengthen selectors so generic button defaults do not hide
       the "Show N Keys" / "Hide Keys" text on light theme (was showing white-on-white) */
    #stake-pool-dashboard .pool-keys-toggle {
        width: 100% !important;
        background: none !important;
        border: none !important;
        padding: 8px 0 !important;
        color: var(--secondary-text-color) !important;
        cursor: pointer !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        transition: color 0.2s ease !important;
    }
    #stake-pool-dashboard .pool-keys-toggle:hover,
    #stake-pool-dashboard .pool-keys-toggle:focus,
    #stake-pool-dashboard .pool-keys-toggle.active {
        color: var(--text-color) !important;
        background: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    #stake-pool-dashboard .pool-keys-toggle .toggle-text {
        color: inherit !important;
    }
    .pool-keys-toggle .toggle-icon { font-size: 12px; transition: transform 0.3s ease; }
    .pool-keys-toggle.active .toggle-icon { transform: rotate(180deg); }
    .pool-keys-list { display: none; margin-top: 10px; padding: 15px; background-color: var(--bg-color); border-radius: 8px; max-height: 180px; overflow-y: auto; }
    .pool-keys-list.expanded { display: block; }
    .pool-keys-list::-webkit-scrollbar { width: 8px; }
    .pool-keys-list::-webkit-scrollbar-track { background: var(--bg-color); border-radius: 10px; }
    .pool-keys-list::-webkit-scrollbar-thumb { background-color: #ced4da; border-radius: 10px; border: 2px solid var(--bg-color); }
    .pool-keys-list::-webkit-scrollbar-thumb:hover { background-color: #adb5bd; }
    .dark-theme .pool-keys-list::-webkit-scrollbar-thumb { background-color: #495057; border-color: var(--bg-color); }
    .dark-theme .pool-keys-list::-webkit-scrollbar-thumb:hover { background-color: #6c757d; }
    
    /* --- Charts --- */
    @keyframes draw-chart { to { stroke-dashoffset: 0; } }

    /* СТАБІЛЬНА висота, щоб картки не «підстрибували» до промальовки */
    .interactive-chart-container {
        position: relative; margin: 16px 0 8px;
        background-color: var(--chart-bg-color); border-radius: 12px; padding: 12px 0;
		min-height: 120px;
		width: 100%;         /* важливо для стабільного вимірювання clientWidth */
	}
    .chart-title { font-size: 13px; font-weight: 500; color: var(--secondary-text-color); margin-bottom: 8px; text-align: center; padding: 0 12px; }
    .interactive-chart-container svg { width: 100%; height: 60px; overflow: visible; }
    .chart-path-line { stroke: var(--sparkline-color); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; animation: draw-chart 1.5s ease-out forwards; }
    .chart-path-fill { stroke: none; fill: url(#sparkline-gradient); opacity: 0.8; }
    .chart-range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--secondary-text-color); margin-top: 4px; padding: 0 12px; }
    .chart-range-labels .value { font-weight: 600; color: var(--text-color); }
    .chart-tooltip { position: absolute; background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 10px; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s, top 0.1s, left 0.1s; box-shadow: var(--shadow); z-index: 10; transform: translate(-50%, -50%); }
    .chart-tooltip .epoch { font-weight: 600; }
    .interactive-chart-container .tracker-line-svg { stroke: var(--secondary-text-color); stroke-width: 1; opacity: 0; transition: opacity 0.1s; }
    .interactive-chart-container .tracker-dot-svg { stroke: var(--card-bg); stroke-width: 2; fill: var(--sparkline-color); opacity: 0; transition: opacity 0.1s; }
    .interactive-chart-container .chart-baseline { stroke: var(--sparkline-color); stroke-width: 1; opacity: 0.15; }
    .interactive-chart-container:hover .tracker-line-svg,
    .interactive-chart-container:hover .tracker-dot-svg,
    .interactive-chart-container:hover .chart-tooltip { opacity: 1; }

    /* Жовтий маркер обраної епохи */
    .selected-epoch-line { stroke: #f5c518; stroke-width: 2; opacity: 0.95; }
    
    /* Вейдж, прив'язаний до маркера */
    .selected-epoch-badge{
      position: absolute;
      /* положення задаємо з JS: left = marker.x, top = padTop + y */
      transform: translateX(-50%);    /* центруємо по Х від лінії */
      background: #f5c518;
      color: #1a1a1a;
      border-radius: 10px;
      padding: 4px 8px 5px;
      line-height: 1.05;
      box-shadow: var(--shadow);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0.98;
      text-align: center;
      font-weight: 700;
      min-width: 88px;                 /* акуратна ширина на вузьких картах */
    }
    
    /* 2 рядки всередині бейджа */
    .selected-epoch-badge .ep { font-size: 11px; font-weight: 800; display:block; }
    .selected-epoch-badge .sub { font-size: 10px; font-weight: 600; opacity: .7; display:block; }
    
	/* Стиль для точки, що позначає обрану епоху на графіку */
	.selected-epoch-dot {
		fill: #f5c518; /* Жовтий колір, як у лінії маркера */
		stroke: var(--card-bg); /* Обводка кольором фону картки, щоб точка виділялась */
		stroke-width: 2px;
	}
    
    .dark-theme .selected-epoch-badge { color:#0d0d0d; }

    .summary-chart-wrapper { grid-column: 1 / -1; margin-top: 15px; }
    .summary-chart-wrapper .interactive-chart-container { padding: 20px 0; min-height: 160px; }

    /* --- Eligibility text tab --- */
    .eligibility-placeholder-content { padding: 10px 15px; }
    .eligibility-placeholder-content h3 { font-size: 20px; font-weight: 600; color: var(--text-color); margin-bottom: 15px; }
    .eligibility-placeholder-content p { font-size: 15px; line-height: 1.7; color: var(--secondary-text-color); margin-bottom: 20px; }
    .eligibility-placeholder-content ul { list-style: none; padding-left: 5px; margin-bottom: 25px; }
    .eligibility-placeholder-content li { font-size: 15px; line-height: 1.7; color: var(--secondary-text-color); margin-bottom: 12px; padding-left: 25px; position: relative; }
    .eligibility-placeholder-content li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--header-color); font-size: 20px; line-height: 1.2; }
    .eligibility-placeholder-content .coming-soon-note { font-weight: 500; color: var(--text-color); background-color: var(--bg-color); padding: 15px; border-radius: 10px; margin-top: 10px; }
    
    /* --- Docs --- */
    .docs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; }
    .doc-card { background-color: var(--bg-color); padding: 25px; border-radius: 12px; display: flex; flex-direction: column; gap: 15px; border: 1px solid var(--border-color); transition: border-color 0.3s, transform 0.2s ease; }
    .doc-card:hover { transform: translateY(-3px); border-color: var(--header-color); }
    .doc-card h3 { font-size: 18px; font-weight: 600; color: var(--text-color); margin: 0; display: flex; align-items: center; gap: 10px; }
    .doc-card h3 .fas { color: var(--header-color); font-size: 20px; }
    .doc-card p { font-size: 14px; line-height: 1.6; color: var(--secondary-text-color); margin: 0; flex-grow: 1; }
    .doc-card a { color: var(--header-color); text-decoration: none; font-weight: 500; }
    .doc-card a:hover { text-decoration: underline; }
    .doc-card ul { margin: 0; padding-left: 20px; }
    .doc-card li { margin-bottom: 8px; color: var(--secondary-text-color); }
    .doc-thumb{ width:20px;height:20px;vertical-align:-4px;margin-right:6px; border-radius:4px;border:1px solid var(--border-color); background:var(--bg-color);object-fit:contain }
    .doc-card .small-note{font-size:12px;color:var(--secondary-text-color)}
    .doc-card.doc-intro { margin-bottom: 16px; }

    /* --- Skeletons --- */
    @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
    .skeleton { background: #ccc; background-image: linear-gradient(to right, #ccc 0%, #ddd 20%, #ccc 40%, #ccc 100%); background-repeat: no-repeat; background-size: 800px 104px; animation: shimmer 1.5s linear infinite; border-radius: 4px; }
    .dark-theme .skeleton { background: #333; background-image: linear-gradient(to right, #333 0%, #444 20%, #333 40%, #333 100%); }
    .skeleton-text { width: 80%; height: 20px; margin-top: 8px; } .skeleton-text-small { width: 50%; height: 16px; margin-top: 8px; } .skeleton-img { width: 50px; height: 50px; border-radius: 50%; }

    /* --- Sorting & Categories --- */
    .sp-sorting-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 0 0 15px; }
    .sp-sorting-bar .label { font-size:14px; color:var(--secondary-text-color); margin-right:4px; }
    .sort-btn { border:1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); padding:8px 12px; border-radius:999px; font-size:14px; cursor:pointer; transition: background .2s, border-color .2s, color .2s, transform .05s; }
    .sort-btn:hover { border-color: var(--header-color); }
    .sort-btn:active { transform: translateY(1px); }
    .sort-btn.active { background: var(--header-color); border-color: var(--header-color); color: #fff; }

    .category-section { margin: 28px 0; padding: 14px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-color); box-shadow: var(--shadow); }
    .category-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 4px 0 12px; }
    .category-header .title { font-size:22px; font-weight:700; color:var(--text-color); line-height:1.25; }
    .category-header .meta { font-size:13px; color:var(--secondary-text-color); padding: 4px 8px; border:1px solid var(--border-color); border-radius:999px; background: var(--card-bg); }
    .category-section .sp-groups-grid{ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
    @media (min-width: 1100px){ .category-section .sp-groups-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    
    
/* --- Epoch / notes alignment tweaks --- */
.stake-breakdown .breakdown-item { align-items: flex-start; }
.stake-breakdown .breakdown-item .value { align-self: flex-start; }

/* Лейбл: іконка виносится абсолютно, текст + нотатка рівняються по одному лівому краю */
.stake-breakdown .breakdown-item .label{
  position: relative;
  display: block;
  /* line-height: 1.25; */
  padding-left: 22px;         /* ширина зони під іконку (16px) + проміжок */
}
.stake-breakdown .breakdown-item .label i{
  position: absolute;
  left: 0; top: 5px;
  width: 16px;                /* фіксована ширина під іконку */
  text-align: center;
}
.stake-breakdown .breakdown-item .label .epoch-inline-note{ margin-left: 0; }

/* стабілізація висоти у верхніх статах карток */
.card-stats .stat-item { align-items: flex-start; }
/* Нотатка під лейблом у верхніх статах картки */
.card-stats .stat-item .label{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.card-stats .stat-item .label .epoch-inline-note{ margin-left: 0; }

/* бейдж біля Epoch */
.epoch-flag{display:inline-block;font-size:10px;line-height:1;
  padding:3px 6px;border-radius:999px;background:#ffd166;color:#3a2d07;
  margin-left:6px;vertical-align:middle;}
.dark-theme .epoch-flag{background:#3a2d07;color:#ffd166;}

/* маленька нотатка під лейблом */
.epoch-inline-note{ display:block;font-size:10px;line-height:1.2;
  color:var(--secondary-text-color);opacity:.78;margin-top:2px; }

/* щоб "0.1 SOL" не ламалось на 2 рядки */
.nowrap{ white-space:nowrap; }


/* --- VALIDATORS LIST STYLES --- */
.validators-notice-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.dark-theme .validators-notice-banner {
    background: linear-gradient(135deg, #4c5fd5 0%, #5a3d8a 100%);
}
.validators-notice-banner i {
    font-size: 20px;
    opacity: 0.9;
}

/* Search bar */
#validators-table-container .validators-search-container {
    position: relative;
    margin-bottom: 20px;
}
#validators-table-container .validators-search-input {
    width: 100%;
    padding: 14px 20px 14px 48px;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 15px;
    transition: border-color 0.3s;
    outline: none;
}
#validators-table-container .validators-search-input::placeholder {
    color: var(--secondary-text-color);
    opacity: 0.7;
}
#validators-table-container .validators-search-input:focus {
    border-color: var(--header-color);
}
#validators-table-container .validators-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-text-color);
    font-size: 16px;
}
#validators-table-container .validators-search-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    display: none;
}
#validators-table-container .validators-search-clear:hover {
    color: var(--text-color);
}
#validators-table-container .validators-search-container.has-value .validators-search-clear {
    display: block;
}

/* Sorting controls */
.validators-sort-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px;
    background: var(--bg-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.validators-sort-bar .label {
    font-size: 14px;
    color: var(--secondary-text-color);
    margin-right: 4px;
}
.validators-sort-btn {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.validators-sort-btn:hover {
    border-color: var(--header-color);
    transform: translateY(-1px);
}
.validators-sort-btn.active {
    background: var(--header-color);
    border-color: var(--header-color);
    color: #fff;
}
.validators-sort-btn i {
    font-size: 12px;
}

/* Stats summary */
#stake-pool-dashboard #validators-stats-summary {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    grid-template-columns: 1fr; /* Default for mobile */
}

@media (min-width: 992px) {
    #stake-pool-dashboard #validators-stats-summary {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for desktop */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #stake-pool-dashboard #validators-stats-summary {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet */
    }
}
.validators-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.validators-stat-card i {
    font-size: 24px;
    color: var(--header-color);
}
.validators-stat-card .stat-info {
    flex: 1;
}
.validators-stat-card .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
}
.validators-stat-card .stat-label {
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-top: 2px;
}

/* Validator items */
.validators-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.validator-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    flex-wrap: wrap; /* Add this line */
}
.validator-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--header-color);
}

/* Rank badge */
.validator-rank {
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-text-color);
    min-width: 32px;
    text-align: center;
}

/* Validator image */
#validators-list-items-container .validator-image-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--logo-bg);
    border: 2px solid var(--border-color);
}
#validators-list-items-container .validator-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* The border and background are now on the wrapper */
}
#validators-list-items-container .validator-image.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ph-bg);
    color: var(--ph-ink);
    font-size: 20px;
    font-weight: 700;
}

/* Validator info */
.validator-info {
    flex: 1;
    min-width: 0;
}
.validator-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.validator-pubkeys {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.validator-pubkey {
    font-size: 11px;
    color: var(--secondary-text-color);
    font-family: 'Courier New', monospace;
    opacity: 0.8;
}
.validator-pubkey span {
    opacity: 0.7;
    margin-right: 4px;
}

/* Stake stats */
.validator-stake-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}
.stake-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.stake-stat i {
    width: 14px;
    text-align: center;
    font-size: 12px;
}
.stake-stat .value {
    font-weight: 600;
}
.stake-stat.active { color: var(--text-color); }
.stake-stat.active i { color: #9945FF; }
.stake-stat.activating { color: #28a745; }
.stake-stat.activating i { color: #28a745; }
.stake-stat.deactivating { color: #dc3545; }
.stake-stat.deactivating i { color: #dc3545; }

/* ⭐ ВИПРАВЛЕНІ СТИЛІ ДЛЯ ПУЛІВ ВАЛІДАТОРІВ */
.validator-pools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Changed from flex-end */
    align-items: flex-start;
    gap: 12px;
    max-width: 420px; /* Slightly increased width */
    margin-left: auto;
}

/* Контейнер для бейджа і підпису під ним */
.pool-badge-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4px;
    min-width: 60px;
}

/* Круглий бейдж пула - ЗБІЛЬШЕНИЙ */
.pool-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--logo-bg); /* Адаптивний фон для обох тем */
    border: 2px solid var(--logo-border);
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.pool-badge:hover {
    border-color: var(--header-color);
    transform: scale(1.05);
}

/* Pool image inside the circular badge.
   object-fit: contain so non-square logos (Jito horizontal, Marinade-bonds
   wide, etc.) fit fully inside the circle. Padding gives breathing room
   between logo and the circle border. cover was clipping these logos. */
.pool-badge-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
    box-sizing: border-box;
}

/* Ініціали для пулів без картинок */
.pool-badge-initials {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-color);
}

/* SVG іконка для OTHER пулів - адаптивний колір */
.pool-badge svg {
    width: 60%;
    height: 60%;
    /* Адаптивний колір для контрасту з фоном теми */
    color: var(--secondary-text-color);
}

/* Підпис стейку під бейджем */
.pool-badge-stake {
    font-size: 11px !important; /* Робимо шрифт меншим і важливим */
    font-weight: 500;
    color: var(--secondary-text-color) !important;
    margin-top: 4px;
    white-space: nowrap;
    text-align: center;
}

.pool-badge-stake {
    color: #a0a0a0 !important; /* Світліший сірий для темної теми */
}

/* ⭐ НОВИЙ ДИЗАЙН ТУЛТІПІВ v4 (ФІНАЛЬНА ВЕРСІЯ) */
.pool-tooltip {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10001;
    pointer-events: none;
    padding: 12px 16px;
    border-radius: 10px;
    max-width: 280px;
    min-width: 220px;
    
    /* Стилі для світлої теми */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    color: var(--text-color);
}

/* ⭐ ВИПРАВЛЕНО: Правило для темної теми, що орієнтується на <body> */
body.dark-theme-body .pool-tooltip {
    background-color: rgba(30, 30, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #f0f0f0;
}

.pool-tooltip.visible {
    visibility: visible;
    opacity: 1;
}

.pool-tooltip-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    color: inherit;
}

.pool-tooltip-epoch {
    font-size: 11px;
    margin-top: -6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    color: var(--secondary-text-color);
}
body.dark-theme-body .pool-tooltip-epoch {
    color: #bbbbbb;
}


.pool-tooltip-stats-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pool-tooltip-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}

.pool-tooltip-stat .label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--secondary-text-color);
}
body.dark-theme-body .pool-tooltip-stat .label {
    color: #cccccc;
}

.pool-tooltip-stat .label i {
    width: 14px;
    text-align: center;
    font-size: 11px;
}

.pool-tooltip-stat .value {
    font-weight: 600;
    color: inherit;
}

.pool-tooltip-stat.active .label i { color: #9945FF; }
.pool-tooltip-stat.activating .label i { color: #28a745; }
.pool-tooltip-stat.deactivating .label i { color: #dc3545; }

/* No results message */
.validators-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--secondary-text-color);
}
.validators-no-results i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}
.validators-no-results p {
    font-size: 16px;
    margin: 0;
}
	
	.validator-main-info {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
	}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .validators-sort-bar {
        padding: 10px;
    }
    .validators-sort-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    
	/* Replace/add within the @media (max-width: 768px) block */
	.validator-item {
		padding: 16px;
		display: flex; /* keep it flex */
		flex-direction: column; /* main direction is column */
		gap: 16px;
		margin-bottom: 12px;
	}
	
	.validator-main-info {
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
	}
	
	.validator-info {
		text-align: left; /* Revert to left align for better readability */
	}
	
	.validator-stake-stats {
		width: 100%;
		flex-direction: row;
		justify-content: center; /* Changed to center */
		align-items: center;
		flex-wrap: wrap; /* Allow wrapping on small screens */
		gap: 24px; /* Add gap between items */
		/* margin-top: 12px; */
		padding-top: 16px;
		border-top: 1px solid var(--border-color);
	}
	
	.validator-pools {
		width: 100%;
		max-width: none;
		/* margin-top: 12px; */
		margin-left: 0;
		padding-top: 16px; /* Increased padding-top */
		border-top: 1px solid var(--border-color);
		justify-content: center; /* Center the pool icons */
	}
    
    .pool-badge-wrapper {
        min-width: 50px;
    }
    
    .pool-badge {
        width: 40px;
        height: 40px;
    }
    
    .pool-badge-initials {
        font-size: 14px;
    }
    
	.validators-sort-badge {
		order: -1; /* Move to the top */
		width: 100%;
		margin-left: 0;
		margin-bottom: 10px; /* Add some space below */
		justify-content: center;
	}
}

@media (max-width: 480px) {
    .validators-stats-summary {
        grid-template-columns: 1fr;
    }
    .validator-rank {
        min-width: 24px;
        font-size: 12px;
    }
    .validator-image-wrapper {
        width: 40px;
        height: 40px;
    }
    .validator-name {
        font-size: 14px;
    }
}

/* Кнопка "Показати ще" */
.validators-load-more-container {
    text-align: center;
    padding: 20px 0;
}
.validators-load-more-btn {
    background-color: var(--header-color);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.validators-load-more-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Крок 1: Стилі для десктопа (базові) */
.validator-item {
    display: flex;
    align-items: center;
    gap: 20px; /* Збільшуємо загальний проміжок */
    flex-wrap: nowrap;
}

.validator-item > .validator-main-info {
    flex: 1 1 300px; /* Трохи зменшуємо базу, щоб дати більше простору іншим */
    min-width: 250px;
}

.validator-item > .validator-stake-stats {
    flex: 0 0 180px; /* Фіксована ширина, не буде розтягуватись чи стискатись */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
}

.validator-item > .validator-pools {
    flex: 2 1 420px; /* Даємо пулам більше гнучкості */
    justify-content: flex-start;
    margin-left: 12px; /* Додаємо явний відступ зліва */
}

/* Крок 2: Адаптація для мобільних */
@media (max-width: 992px) { /* Планшетна версія, де пули переносяться вниз */
    .validator-item {
        flex-wrap: wrap;
    }
    .validator-item > .validator-pools {
        width: 100%;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border-color);
        justify-content: flex-start;
    }
}

@media (max-width: 768px) { /* Мобільна версія */
    .validator-item {
        flex-direction: column; /* Все в одну колонку */
        align-items: stretch; /* Елементи розтягуються на всю ширину */
        gap: 16px;
    }

    .validator-item > .validator-main-info,
    .validator-item > .validator-stake-stats,
    .validator-item > .validator-pools {
        width: 100%; /* Кожен блок займає всю ширину */
        border-top: 1px solid var(--border-color);
        padding-top: 16px;
        margin-top: 0;
    	flex: 1 1 1px; /* Гнучкий блок з базовою шириною */
    }

    .validator-item > .validator-main-info {
        border-top: none; /* У першого блоку немає верхньої межі */
        padding-top: 0;
    }

    .validator-item > .validator-stake-stats {
        flex-direction: row;
        justify-content: center; /* На мобільному центруємо показники */
        gap: 24px;
    }

    .validator-item > .validator-pools {
        justify-content: center; /* І пули теж центруємо */
    }
}




/* Мінімальна висота, щоб уникнути "стрибків" */
.validator-item {
    min-height: 85px;
}

/* Покращуємо читабельність ключів */
#stake-pool-dashboard .validator-pubkey span {
    color: var(--text-color-secondary);
    font-weight: 500;
    margin-right: 4px;
}

/* Виправляємо відступ у полі пошуку */
#stake-pool-dashboard .validators-search-input {
    padding-left: 40px !important;
}

/* Стилі для ключів валідатора (щоб ID і Vote Account виглядали однаково) */
.validator-identity,
.validator-vote-account {
    font-size: 11px;
    color: var(--secondary-text-color);
    font-family: 'Courier New', monospace;
    opacity: 0.8;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.validators-sort-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-left: auto;
    pointer-events: none;
    
    /* Стиль для світлої теми */
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #ffe08a;
}

.dark-theme .validators-sort-badge {
    /* Стиль для темної теми */
    background: #3a2d07;
    color: #ffd166;
    border-color: #5c4a10;
}

.validators-sort-btn.coming-soon {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
}
.validators-sort-btn.coming-soon:hover {
    border-color: var(--border-color); /* Prevents hover effect */
    transform: none;
}


/* --- Docs Page Layout Enhancements --- */
.support-banner {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-color: var(--header-color);
    margin-bottom: 25px;
    text-align: center;
}
.dark-theme .support-banner {
    background: linear-gradient(135deg, rgba(76, 95, 213, 0.15) 0%, rgba(90, 61, 138, 0.15) 100%);
}
.support-banner h3 {
    justify-content: center;
}
.support-links {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
/* Support buttons in Documentation > Support the Project banner.
   Uses .support-banner prefix to win specificity over the generic
   .doc-card a rule which sets a different color for in-card links.
   Important on color is the safety net for both themes. */
.support-banner .support-links a {
    background-color: #14b8a6 !important;
    color: white !important;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}
.dark-theme .support-banner .support-links a {
    background-color: #0d9488 !important;
}

.support-banner .support-links a .new-tab-icon {
    margin-left: 4px;
    opacity: 0.85;
    color: white !important;
}
.support-banner .support-links a:hover {
    transform: translateY(-2px);
    background-color: #0d9488 !important;
    color: white !important;
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.32);
}
.dark-theme .support-banner .support-links a:hover {
    background-color: #14b8a6 !important;
}
.docs-grid-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 25px;
}
.docs-grid-main .doc-card {
    height: 100%; /* Для однакової висоти */
}
@media (min-width: 820px) {
    .docs-grid-main {
        grid-template-columns: repeat(2, 1fr);
    }
}
.doc-card ul {
    flex-grow: 1; /* Дозволяє карткам розтягуватись */
}

/* Нові стилі для іконок в кнопках */
#tab-content-docs .support-btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 50% !important; /* Робить іконку круглою */
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.6); /* Додає тонку рамку */
    background-color: #fff; /* Фон для картинок без прозорості */
}

/* --- Advanced Search Styles --- */
.validators-sort-btn .sort-pool-icon,
.validators-sort-btn .sort-pool-icon-initials {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 4px;
    /* Unified pool-icon style: subtle gray bg in light theme,
       textured dark gray in dark theme, both via --logo-bg variable.
       padding stays in absolute px because this is an "img is circle"
       pattern (the img itself IS the wrapper); percentage padding here
       resolves to the parent BUTTON's width, not the img's own size,
       and collapses the icon content area. ~10% ratio matches the
       12% of "img-inside-wrapper" contexts. */
    background-color: var(--logo-bg);
    border: 1px solid var(--logo-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-color);
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}
.validators-sort-btn .sort-pool-icon-initials {
    background-color: var(--logo-bg);
}
.dark-theme .validators-sort-btn.active .sort-pool-icon,
.dark-theme .validators-sort-btn.active .sort-pool-icon-initials {
    border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   POOL DETAIL VIEW STYLES 
   ============================================ */

/* Breadcrumbs Navigation - strengthened selectors */
#stake-pool-dashboard .breadcrumbs-nav {
	padding: 12px 0 !important;
	margin-bottom: 20px !important;
	font-size: 14px !important;
	color: var(--secondary-text-color) !important;
	border-bottom: 1px solid var(--border-color) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

#stake-pool-dashboard .breadcrumbs-nav .breadcrumbs-left {
	display: flex !important;
	align-items: center !important;
}

#stake-pool-dashboard .breadcrumbs-nav .breadcrumbs-right {
	display: flex !important;
	align-items: center !important;
}

/* Малий перемикач теми для breadcrumbs */
#stake-pool-dashboard .theme-switch-small {
	transform: scale(0.8);
	margin: 0 !important;
}

#stake-pool-dashboard .breadcrumbs-nav a {
	color: var(--header-color) !important;
	text-decoration: none !important;
	transition: opacity 0.2s !important;
	font-weight: 500 !important;
	padding: 4px 8px !important;
	border-radius: 4px !important;
	outline: none !important;
	outline-style: none !important;
	outline-width: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

#stake-pool-dashboard .breadcrumbs-nav a:focus,
#stake-pool-dashboard .breadcrumbs-nav a:focus-visible,
#stake-pool-dashboard .breadcrumbs-nav a:active,
#stake-pool-dashboard .breadcrumbs-nav a:-moz-focusring {
	outline: none !important;
	outline-style: none !important;
	outline-width: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

#stake-pool-dashboard .breadcrumbs-nav a:hover {
	opacity: 0.8 !important;
	text-decoration: underline !important;
	background: rgba(12, 124, 115, 0.06) !important;
}

#stake-pool-dashboard .breadcrumb-separator {
	margin: 0 10px !important;
	color: var(--secondary-text-color) !important;
	opacity: 0.5 !important;
}

#stake-pool-dashboard .breadcrumb-current {
	color: var(--text-color) !important;
	font-weight: 600 !important;
}

/* Початковий стан - елементи шляху приховані (тільки Home видно) */
#stake-pool-dashboard #breadcrumb-sep-1,
#stake-pool-dashboard #breadcrumb-pools,
#stake-pool-dashboard #breadcrumb-sep-2,
#stake-pool-dashboard #breadcrumb-current {
	display: none;
}

/* Pool Detail Header */
#stake-pool-dashboard .pool-detail-header {
	margin-bottom: 24px !important;
}

#stake-pool-dashboard .pool-header-main {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	margin-bottom: 20px !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
}

#stake-pool-dashboard .pool-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

#stake-pool-dashboard .pool-detail-image {
	width: 64px !important;
	height: 64px !important;
	border-radius: 12px !important;
	object-fit: contain !important;
	border: 2px solid var(--border-color) !important;
	/* Адаптивний фон для логотипів */
	background: var(--logo-bg) !important;
	padding: 6px !important;
}

/* Bug 8: SVG fallback for pools without image (e.g. OTHER aggregate) */
#stake-pool-dashboard .pool-detail-svg-fallback {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px !important;
	color: var(--secondary-text-color);
}

/* Block E Phase 3: epoch loader overlay shown during lazy load of full snapshot.
   IMPORTANT: this loader is appended to document.body (outside the dashboard
   container) so CSS variables defined inside #stake-pool-dashboard are NOT
   available here. Use concrete colors with theme-specific overrides instead. */
.pool-epoch-loader {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10001;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

.pool-epoch-loader-inner {
	background: #1a1c23;
	color: #ffffff;
	border: 1px solid #2a2d36;
	border-radius: 16px;
	padding: 32px 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
	min-width: 280px;
}

/* Light theme override - body.light-theme is set by the dashboard theme switcher */
body.light-theme .pool-epoch-loader-inner,
body:not(.dark-theme) .pool-epoch-loader-inner {
	background: #ffffff;
	color: #1a1c23;
	border-color: #e5e7eb;
}

body:not(.dark-theme) .pool-epoch-loader {
	background: rgba(255, 255, 255, 0.6);
}

.pool-epoch-loader-inner i {
	color: #4a90ff;
	font-size: 36px;
}

.pool-epoch-loader-text {
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: inherit;
}

@media (max-width: 600px) {
	.pool-epoch-loader-inner {
		padding: 24px 32px;
		min-width: 220px;
	}
	.pool-epoch-loader-inner i {
		font-size: 30px;
	}
}

#stake-pool-dashboard .pool-detail-svg-fallback svg {
	width: 100% !important;
	height: 100% !important;
}

/* Force-hide Learn More when pool has no URL (e.g. OTHER aggregate) -
   needs !important because mobile rule below also uses !important */
#stake-pool-dashboard .pool-official-link.pool-official-link-hidden {
	display: none !important;
}

#stake-pool-dashboard .pool-header-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

#stake-pool-dashboard .pool-detail-name {
	margin: 0 !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	color: var(--text-color) !important;
	line-height: 1.2 !important;
}

#stake-pool-dashboard .pool-categories-tags {
	display: flex !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

#stake-pool-dashboard .pool-category-tag {
	padding: 4px 10px !important;
	background: var(--secondary-text-color) !important;
	color: white !important;
	border: none !important;
	border-radius: 4px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	display: inline-block !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	opacity: 0.8 !important;
}

/* Bug 1 fix: better contrast for category tag on dark theme */
#stake-pool-dashboard.dark-theme .pool-category-tag,
.dark-theme #stake-pool-dashboard .pool-category-tag {
	background: #3a3a3a !important;
	color: #e0e0e0 !important;
	opacity: 1 !important;
	border: 1px solid #505050 !important;
}

/* Кнопка Learn More - посилені стилі */
#stake-pool-dashboard .pool-official-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 16px !important;
	background: var(--header-color) !important;
	color: white !important;
	text-decoration: none !important;
	border-radius: 8px !important;
	font-weight: 500 !important;
	transition: all 0.2s !important;
	border: none !important;
	font-size: 14px !important;
	cursor: pointer !important;
}

#stake-pool-dashboard .pool-official-link:hover {
	opacity: 0.9 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
	text-decoration: none !important;
	color: white !important;
}

#stake-pool-dashboard .pool-detail-description {
	margin: 20px 0 !important;
	line-height: 1.6 !important;
	color: var(--text-color) !important;
}
@media (max-width: 768px) {
	#stake-pool-dashboard .pool-detail-description {
		font-size: 14px !important;
		margin: 14px 0 !important;
	}
}
@media (max-width: 480px) {
	#stake-pool-dashboard .pool-detail-description {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}

/* Epoch info styles - як на головній сторінці */
#stake-pool-dashboard .pool-epoch-info {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 16px 0 !important;
	padding: 12px 16px !important;
	background: var(--card-bg) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	border: 1px solid var(--border-color) !important;
	flex-wrap: wrap !important;
}

#stake-pool-dashboard .epoch-label,
#stake-pool-dashboard .timestamp-label,
#stake-pool-dashboard .epoch-progress-label {
	color: var(--secondary-text-color) !important;
	font-weight: 500 !important;
}

#stake-pool-dashboard .epoch-value,
#stake-pool-dashboard .timestamp-value,
#stake-pool-dashboard .epoch-progress {
	color: var(--text-color) !important;
	font-weight: 600 !important;
}

/* Past epoch badge - жовта плашка як на головній сторінці */
/* НЕ встановлюємо display тут - керується через JS inline styles */
#stake-pool-dashboard .past-epoch-badge {
	align-items: center !important;
	gap: 4px !important;
	padding: 3px 8px !important;
	background: #f0ad4e !important;
	color: white !important;
	border-radius: 12px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

#stake-pool-dashboard .past-epoch-badge i {
	font-size: 10px !important;
}

#stake-pool-dashboard .epoch-separator {
	color: var(--secondary-text-color) !important;
	opacity: 0.3 !important;
}

/* Pool Metrics Grid */
/* Pool Metrics Grid - styled like main page */
#stake-pool-dashboard .pool-metrics-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 12px !important;
	margin: 20px 0 !important;
}

#stake-pool-dashboard .pool-metric-card {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	background: var(--bg-color) !important;
	padding: 14px !important;
	border-radius: 12px !important;
	border: 1px solid var(--border-color) !important;
}

#stake-pool-dashboard .pool-metric-icon {
	font-size: 22px !important;
	color: var(--header-color) !important;
	width: 28px !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

#stake-pool-dashboard .pool-metric-icon.activating {
	color: #28a745 !important;
}

#stake-pool-dashboard .pool-metric-icon.deactivating {
	color: #dc3545 !important;
}

#stake-pool-dashboard .pool-metric-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	min-width: 0 !important;
}

#stake-pool-dashboard .pool-metric-value {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--text-color) !important;
	line-height: 1.2 !important;
}

#stake-pool-dashboard .pool-metric-value.positive {
	color: #28a745 !important;
}

#stake-pool-dashboard .pool-metric-value.negative {
	color: #dc3545 !important;
}

#stake-pool-dashboard .pool-metric-label {
	font-size: 11px !important;
	color: var(--secondary-text-color) !important;
	font-weight: 500 !important;
}

/* Authority Keys Section */
/* Authority Keys - тепер як в картках, сірі та непомітні */
/* Bug 9 part 2: collapsible authority keys on pool detail page */
.authority-keys-list .authority-keys-collapsible {
	max-height: 400px;
	margin-top: 8px;
	/* Do not set display here - inherits display:none from .pool-keys-list
	   base rule so the list stays collapsed by default */
}

/* When expanded: stack keys vertically, one per line.
   Must override .pool-keys-list.expanded { display: block } */
.authority-keys-list .authority-keys-collapsible.expanded {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
}

.authority-keys-list .authority-keys-toggle {
	margin-bottom: 4px;
}

.pool-authority-keys {
	margin-top: 20px;
	padding-top: 12px;
	/* border-top прибрано - вже є border-bottom на pool-metrics-grid */
}

.pool-authority-keys h3 {
	margin-bottom: 8px;
	font-size: 11px;
	color: var(--secondary-text-color);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
	opacity: 0.6;
}

.pool-authority-keys h3 i {
	font-size: 10px;
	margin-right: 4px;
}

.authority-keys-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.authority-key-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
	background: transparent;
	font-family: monospace;
	font-size: 10px;
	color: var(--secondary-text-color);
	opacity: 0.5;
}

.authority-key-item a {
	color: var(--secondary-text-color);
	text-decoration: none;
	margin-left: 4px;
	font-size: 9px;
	opacity: 0.6;
	transition: opacity 0.2s;
}

.authority-key-item a:hover {
	text-decoration: underline;
	opacity: 0.9;
}

/* Key type label (Withdrawer/Staker) */
.authority-key-item .key-type {
	color: var(--secondary-text-color);
	font-size: 10px;
	font-weight: 500;
	min-width: 65px;
}

.authority-key-item .key-value {
	font-family: monospace;
	word-break: break-all;
}

/* Charts Section */
.pool-charts-section {
	margin: 32px 0;
}

.pool-charts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pool-chart-block {
	padding: 20px;
	min-height: auto;
}

.pool-chart-block h3 {
	margin-bottom: 12px;
	font-size: 16px;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}

.pool-chart-block h3 i {
	color: var(--header-color);
}

.pool-chart-block h3 small {
	font-size: 12px;
	display: inline;
}

/* Pool sparkline containers - ТОЧНО як interactive-chart-container на головній */
.pool-chart-block .pool-sparkline {
	position: relative;
	background-color: var(--chart-bg-color);
	border-radius: 12px;
	padding: 12px 0;
	min-height: 100px;
	width: 100%;
}

.pool-chart-block .pool-sparkline svg {
	width: 100%;
	height: 90px;
	overflow: visible;
}

.pool-chart-block .pool-sparkline .chart-range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--secondary-text-color);
	margin-top: 4px;
	padding: 0 12px;
}

.pool-chart-block .pool-sparkline .chart-range-labels .value {
	font-weight: 600;
	color: var(--text-color);
}

/* Tracker елементи для pool sparklines */
.pool-chart-block .pool-sparkline .tracker-line-svg {
	stroke: var(--secondary-text-color);
	stroke-width: 1;
}

.pool-chart-block .pool-sparkline .tracker-dot-svg {
	stroke: var(--card-bg);
	stroke-width: 2;
	fill: var(--sparkline-color);
}

.pool-chart-block .pool-sparkline .chart-tooltip {
	position: absolute;
	background-color: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity 0.15s, top 0.1s, left 0.1s;
	box-shadow: var(--shadow);
	z-index: 10;
	transform: translate(-50%, -100%);
}

/* Бейдж для pool sparklines */
.pool-chart-block .pool-sparkline .selected-epoch-badge {
	position: absolute;
	background: #f5c518;
	color: #1a1a1a;
	border-radius: 10px;
	padding: 4px 8px 5px;
	line-height: 1.05;
	box-shadow: var(--shadow);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0.98;
	text-align: center;
	font-weight: 700;
	min-width: 88px;
	z-index: 5;
	/* Обмежуємо позицію щоб не виходив за межі */
	max-width: calc(100% - 20px);
}

.pool-chart-block .pool-sparkline .selected-epoch-badge .ep {
	font-size: 11px;
	font-weight: 800;
	display: block;
}

.pool-chart-block .pool-sparkline .selected-epoch-badge .sub {
	font-size: 10px;
	font-weight: 600;
	opacity: .7;
	display: block;
}

.dark-theme .pool-chart-block .pool-sparkline .selected-epoch-badge {
	color: #0d0d0d;
}

/* Chart.js canvas styles */
.pool-chart-block canvas {
	height: 220px !important;
	max-height: 220px !important;
	width: 100% !important;
}

.chart-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--bg-color);
	border-radius: 8px;
	color: var(--secondary-text-color);
	font-style: italic;
}

.chart-no-data {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--bg-color);
	border-radius: 8px;
	color: var(--secondary-text-color);
	font-style: italic;
	font-size: 14px;
}

/* Epoch Dynamics - об'єднаний графік */
.epoch-dynamics-block .epoch-dynamics-legend {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--secondary-text-color);
}

.epoch-dynamics-block .legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.epoch-dynamics-block .legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.epoch-dynamics-block .legend-item.activating .legend-dot {
	background-color: #14F195;
}

.epoch-dynamics-block .legend-item.deactivating .legend-dot {
	background-color: #FF6B6B;
}

/* Scale toggle button */
.epoch-dynamics-block .epoch-dynamics-scale-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	background: var(--bg-color);
	color: var(--secondary-text-color);
	font-size: 11px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.epoch-dynamics-block .epoch-dynamics-scale-toggle:hover {
	border-color: var(--header-color);
	color: var(--header-color);
}

.epoch-dynamics-block .epoch-dynamics-scale-toggle.active {
	background: var(--header-color);
	border-color: var(--header-color);
	color: white;
}

.epoch-dynamics-block .epoch-dynamics-scale-toggle i {
	font-size: 10px;
}

/* Wrapper для toggle + info icon */
.epoch-dynamics-block .epoch-dynamics-scale-wrapper {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Info icon з кастомним tooltip */
.epoch-dynamics-block .scale-info-icon {
	color: var(--secondary-text-color);
	font-size: 12px;
	cursor: help;
	opacity: 0.6;
	transition: opacity 0.2s;
	position: relative;
}

.epoch-dynamics-block .scale-info-icon:hover {
	opacity: 1;
	color: var(--header-color);
}

/* Кастомний tooltip */
.epoch-dynamics-block .scale-info-icon::after {
	content: 'Unified: same scale for accurate comparison.\A Separate: independent scales to show detail.';
	position: absolute;
	bottom: 100%;
	right: 0;
	transform: translateY(-8px);
	background: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	white-space: pre-line;
	width: 220px;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
	z-index: 100;
	pointer-events: none;
}

.epoch-dynamics-block .scale-info-icon:hover::after {
	opacity: 1;
	visibility: visible;
}

/* Mobile - tooltip по кліку */
@media (max-width: 768px) {
	.epoch-dynamics-block .scale-info-icon.active::after {
		opacity: 1;
		visibility: visible;
	}
}

.epoch-dynamics-block .pool-sparkline {
	min-height: 140px;
}

.epoch-dynamics-block .pool-sparkline svg {
	height: 140px;
}

.epoch-dynamics-block .epoch-center-line {
	stroke: var(--border-color);
	stroke-width: 1;
	stroke-dasharray: 4, 4;
	opacity: 0.5;
}

/* Tooltip для Epoch Dynamics */
.epoch-dynamics-block .epoch-dynamics-tooltip {
	min-width: 160px;
	text-align: left;
}

.epoch-dynamics-block .epoch-dynamics-tooltip .epoch {
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border-color);
}

.epoch-dynamics-block .epoch-dynamics-tooltip .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
}

.epoch-dynamics-block .epoch-dynamics-tooltip .activating-line,
.epoch-dynamics-block .epoch-dynamics-tooltip .deactivating-line {
	font-size: 11px;
	margin-top: 4px;
}

/* Приховуємо placeholder коли є графік */
.epoch-dynamics-block .chart-placeholder {
	display: none;
}

.epoch-dynamics-block.no-data .epoch-dynamics-legend,
.epoch-dynamics-block.no-data .pool-sparkline {
	display: none;
}

.epoch-dynamics-block.no-data .chart-placeholder {
	display: flex;
}

/* Stake Distribution - SVG donut */
.stake-distribution-block h3 {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.stake-distribution-block .stake-distribution-subtitle {
	font-size: 11px;
	color: var(--secondary-text-color);
	font-weight: 400;
	margin-left: auto;
}

.stake-distribution-block .stake-distribution-content {
	display: flex;
	align-items: stretch;
	gap: 16px;
	margin-top: 12px;
	min-height: 180px;
}

.stake-distribution-block .stake-distribution-chart-wrapper {
	position: relative;
	flex-shrink: 0;
	width: 180px;
	height: 180px;
}

.stake-distribution-block .stake-distribution-donut {
	width: 100%;
	height: 100%;
	position: relative;
}

.stake-distribution-block .stake-distribution-donut svg {
	width: 100%;
	height: 100%;
}

/* Анімація появи діаграми */
.stake-distribution-block .stake-distribution-donut svg.donut-animate .donut-segment {
	animation: donutSegmentIn 0.4s ease-out forwards;
	opacity: 0;
}

.stake-distribution-block .donut-svg.donut-animate .donut-segment {
	animation: donutSegmentIn 0.4s ease-out forwards;
	opacity: 0;
}

@keyframes donutSegmentIn {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Сегменти діаграми (path) - плавні transitions */
.stake-distribution-block .donut-segment {
	transition: opacity 0.35s ease, filter 0.2s ease;
}

/* Hover ефект - сегмент світлішає */
.stake-distribution-block .donut-segment:hover {
	filter: brightness(1.25) saturate(1.1);
}

/* No data container - на весь блок */
.stake-distribution-block .chart-no-data-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 150px;
	color: var(--secondary-text-color);
	text-align: center;
	gap: 12px;
}

.stake-distribution-block .chart-no-data-icon {
	font-size: 32px;
	opacity: 0.4;
}

.stake-distribution-block .chart-no-data-text {
	font-size: 13px;
	opacity: 0.7;
}

/* Логотип в центрі - впритул до діаграми */
.stake-distribution-block .stake-distribution-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Фон адаптується до теми */
	background: var(--logo-bg, #2a2d36);
	border: 2px solid var(--logo-border);
}

.stake-distribution-block .stake-distribution-center img {
	/* Unified pool-icon style: image fills the wrapper (which is sized
	   to the donut inner diameter), with 12% padding for breathing room
	   around the logo. The wrapper itself sits flush against the donut
	   inner edge so the wrapper border continues seamlessly from the
	   donut ring. */
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12%;
	box-sizing: border-box;
	pointer-events: none;
	user-select: none;
}

/* SVG fallback in donut center for pools without image (e.g. OTHER aggregate).
   Matches the new full-fill plus 12% padding pattern of the img above. */
.stake-distribution-block .stake-distribution-center .donut-svg-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12%;
	box-sizing: border-box;
	color: var(--secondary-text-color);
	pointer-events: none;
}

.stake-distribution-block .stake-distribution-center .donut-svg-fallback svg {
	width: 100%;
	height: 100%;
}

/* Легенда - один стовпчик з scroll */
.stake-distribution-block .stake-distribution-legend {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	max-height: 220px;
	min-width: 0;
	overflow-y: auto;
	padding-right: 4px;
	align-self: stretch;
}

/* Custom scrollbar */
.stake-distribution-block .stake-distribution-legend::-webkit-scrollbar {
	width: 4px;
}

.stake-distribution-block .stake-distribution-legend::-webkit-scrollbar-track {
	background: transparent;
}

.stake-distribution-block .stake-distribution-legend::-webkit-scrollbar-thumb {
	background: var(--border-color);
	border-radius: 2px;
}

.stake-distribution-block .stake-distribution-legend::-webkit-scrollbar-thumb:hover {
	background: var(--secondary-text-color);
}

/* Кнопка Reset */
.stake-distribution-block .legend-reset {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	margin-bottom: 6px;
	font-size: 10px;
	color: var(--accent-color);
	background: var(--bg-color);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s;
}

.stake-distribution-block .legend-reset:hover {
	background: var(--border-color);
}

.stake-distribution-block .legend-reset i {
	font-size: 9px;
}

.stake-distribution-block .legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 3px 4px;
	border-radius: 4px;
	transition: background-color 0.15s, opacity 0.15s;
}

.stake-distribution-block .legend-item:hover {
	background-color: var(--bg-color);
}

.stake-distribution-block .legend-item.hidden {
	opacity: 0.4;
}

.stake-distribution-block .legend-item.disabled {
	opacity: 0.5;
}

.stake-distribution-block .legend-item.disabled .legend-name {
	text-decoration: line-through;
}

.stake-distribution-block .legend-item .legend-color {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.stake-distribution-block .legend-item .legend-name {
	flex: 1;
	min-width: 0;
	max-width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--text-color);
}

.stake-distribution-block .legend-item .legend-value {
	color: var(--secondary-text-color);
	font-size: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Tooltip для Stake Distribution */
.stake-distribution-block .distribution-tooltip {
	position: absolute;
	background-color: var(--card-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	box-shadow: var(--shadow);
	z-index: 100;
}

.stake-distribution-block .distribution-tooltip .tooltip-name {
	font-weight: 600;
	margin-bottom: 4px;
}

.stake-distribution-block .distribution-tooltip .tooltip-value {
	color: var(--secondary-text-color);
}

/* Pool Validators Section - стилі як на головній сторінці */
.pool-validators-section {
	margin-top: 32px;
}

/* Info notes banner */
.pool-validators-info-notes {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--secondary-text-color);
}

.pool-validators-info-notes .info-line {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.pool-validators-info-notes .info-line:last-child {
	margin-bottom: 0;
}

.pool-validators-info-notes .info-line i {
	color: var(--header-color);
	width: 16px;
	text-align: center;
}

.pool-validators-info-notes .info-line strong {
	color: var(--text-color);
}

.pool-validators-info-notes .info-line .epoch-link {
	color: var(--header-color);
}

/* Search container - як на головній */
#stake-pool-dashboard .pool-validators-search-container {
	position: relative !important;
	margin-bottom: 20px !important;
}

#stake-pool-dashboard .pool-validators-search-input {
	width: 100% !important;
	padding: 14px 50px 14px 48px !important;
	border-radius: 999px !important;
	border: 2px solid var(--border-color) !important;
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	font-size: 15px !important;
	transition: border-color 0.3s !important;
	outline: none !important;
	box-sizing: border-box !important;
}

/* Темна тема для пошуку */
.dark-theme #stake-pool-dashboard .pool-validators-search-input {
	background: #1a1a2e !important;
	border-color: #2d2d44 !important;
	color: #e0e0e0 !important;
}

#stake-pool-dashboard .pool-validators-search-input::placeholder {
	color: var(--secondary-text-color) !important;
	opacity: 0.7 !important;
}

#stake-pool-dashboard .pool-validators-search-input:focus {
	border-color: var(--header-color) !important;
}

#stake-pool-dashboard .pool-validators-search-icon {
	position: absolute !important;
	left: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--secondary-text-color) !important;
	font-size: 16px !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

#stake-pool-dashboard .pool-validators-search-clear {
	position: absolute !important;
	right: 18px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	color: var(--secondary-text-color) !important;
	cursor: pointer !important;
	font-size: 18px !important;
	padding: 4px !important;
	display: none !important;
	z-index: 1 !important;
}

#stake-pool-dashboard .pool-validators-search-clear:hover {
	color: var(--text-color) !important;
}

#stake-pool-dashboard .pool-validators-search-container.has-value .pool-validators-search-clear {
	display: block !important;
}

/* Stats summary - як на головній */
.pool-validators-stats-summary {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.pool-validators-stats-summary {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.pool-validators-stats-summary {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pool-validators-stat-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.pool-validators-stat-card .stat-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--logo-bg);
	border: 1px solid var(--logo-border);
	flex-shrink: 0;
}

/* Іконки без фону для Stake/Activating/Deactivating */
.pool-validators-stat-card .stat-icon.stat-icon-plain {
	background: transparent;
	border: none;
	width: 28px;
	height: 28px;
}

.pool-validators-stat-card .stat-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12%;
	box-sizing: border-box;
}

.pool-validators-stat-card .stat-icon i {
	font-size: 20px;
	color: var(--header-color);
}

.pool-validators-stat-card .stat-info {
	flex: 1;
}

.pool-validators-stat-card .stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-color);
}

.pool-validators-stat-card .stat-label {
	font-size: 12px;
	color: var(--secondary-text-color);
	margin-top: 2px;
}

/* Sort bar - як на головній */
.pool-validators-sort-bar {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 12px;
	background: var(--bg-color);
	border-radius: 12px;
	border: 1px solid var(--border-color);
}

.pool-validators-sort-bar .label {
	font-size: 14px;
	color: var(--secondary-text-color);
	margin-right: 4px;
}

.pool-validators-sort-btn {
	border: 1px solid var(--border-color);
	background: var(--card-bg);
	color: var(--text-color);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pool-validators-sort-btn:hover {
	border-color: var(--header-color);
	transform: translateY(-1px);
}

.pool-validators-sort-btn.active {
	background: var(--header-color);
	border-color: var(--header-color);
	color: #fff;
}

.pool-validators-sort-btn i {
	font-size: 12px;
}

.pool-validators-sort-btn .sort-arrow {
	margin-left: 4px;
	font-size: 10px;
}

.pool-validators-sort-btn .pool-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-left: 2px;
	background: var(--logo-bg);
	border: 1px solid var(--logo-border);
	object-fit: contain;
	padding: 2px;
	box-sizing: border-box;
}

.pool-validators-sort-badge {
	margin-left: auto;
	background: #f0ad4e;
	color: white;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pool-validators-table {
	overflow-x: auto;
	margin-top: 16px;
}

/* Validator image styles for pool validators table */
.pool-validators-table .validator-image-wrapper {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pool-validators-table .validator-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.pool-validators-table .validator-image.fallback {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ph-bg);
	color: var(--ph-ink);
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
}

/* ========================================
   Pool Validators List - JIP25 Style
   ======================================== */
.pool-validators-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	overflow: hidden;
	background: var(--card-bg);
}

/* Header row */
.pool-validators-header {
	display: grid;
	grid-template-columns: minmax(200px, 2fr) 1fr 1fr 1fr;
	gap: 12px;
	padding: 14px 16px;
	background: var(--bg-color);
	border-bottom: 2px solid var(--border-color);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--secondary-text-color);
}

.pool-validators-header .pv-col {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

/* Bug 3 fix: force row direction in header, overriding column direction used by data rows */
.pool-validators-header .pv-col-stake,
.pool-validators-header .pv-col-activating,
.pool-validators-header .pv-col-deactivating {
	flex-direction: row !important;
}

.pool-validators-header .pv-col-validator {
	justify-content: flex-start;
}

.pool-validators-header .pv-col-stake,
.pool-validators-header .pv-col-activating,
.pool-validators-header .pv-col-deactivating {
	justify-content: center;
}

/* Клікабельні заголовки для сортування */
.pool-validators-header .pv-col-sortable {
	cursor: pointer;
	user-select: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}

.pool-validators-header .pv-col-sortable:hover {
	color: var(--header-color);
}

/* Індикатор сортування - поруч з текстом */
.pv-sort-indicator {
	font-size: 11px;
	opacity: 0.4;
	transition: opacity 0.15s ease, color 0.15s ease;
	margin-left: 2px;
	flex-shrink: 0;
}

.pv-sort-indicator.active {
	opacity: 1;
	color: var(--header-color);
}

/* Validator rows */
.pool-validator-row {
	display: grid;
	grid-template-columns: minmax(200px, 2fr) 1fr 1fr 1fr;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	transition: background 0.15s ease;
}

.pool-validator-row:last-child {
	border-bottom: none;
}

.pool-validator-row:hover {
	background: var(--bg-color);
}

/* Validator column */
.pv-col-validator {
	display: flex;
	align-items: center;
}

.pv-validator-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pv-validator-info .validator-image-wrapper {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.pv-validator-info .validator-image {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.pv-validator-info .validator-image.fallback {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ph-bg);
	color: var(--ph-ink);
	font-size: 13px;
	font-weight: 700;
	border-radius: 50%;
}

.pv-validator-details {
	min-width: 0;
}

.pv-validator-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.pv-validator-pubkey {
	font-size: 11px;
	color: var(--secondary-text-color);
	font-family: monospace;
}

/* Value columns */
.pv-col-stake {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.pv-col-activating,
.pv-col-deactivating {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

/* Value rows (two lines for Stake column) */
.pv-value-row {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
}

/* Single value row (for Activating/Deactivating - one line) */
.pv-value-single {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: center;
}

.pv-value-single .table-pool-icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--logo-bg);
	border: 1px solid var(--logo-border);
	object-fit: contain;
	padding: 2px;
	box-sizing: border-box;
}

.pv-value-single .table-icon-fallback {
	font-size: 11px;
	width: 14px;
	text-align: center;
	color: var(--header-color);
}

/* Arrow icons for Activating/Deactivating */
.pv-arrow {
	font-size: 10px;
	font-weight: 700;
}

.pv-arrow-up {
	color: #28a745;
}

.pv-arrow-down {
	color: #dc3545;
}

/* Trend icons (fa-arrow-trend-up/down) */
.pv-trend-icon {
	font-size: 12px;
	margin-right: 2px;
}

.pv-trend-up {
	color: #28a745;
}

.pv-trend-down {
	color: #dc3545;
}

.pv-value-row .pv-icon {
	font-size: 11px;
	width: 14px;
	text-align: center;
	flex-shrink: 0;
}

.pv-value-row .pv-icon-total {
	color: var(--secondary-text-color);
	opacity: 0.6;
}

.pv-value-row .table-pool-icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--logo-bg);
	border: 1px solid var(--logo-border);
	object-fit: contain;
	padding: 2px;
	box-sizing: border-box;
}

.pv-value-row .table-icon-fallback {
	font-size: 11px;
	width: 14px;
	text-align: center;
	color: var(--header-color);
}

.pv-value {
	font-size: 13px;
	color: var(--text-color);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.pv-value-pool .pv-value {
	font-weight: 700;
	color: var(--header-color);
}

.pv-value.pv-value-highlight {
	color: var(--header-color);
}

.pv-value.pv-positive {
	color: #28a745;
}

.pv-value.pv-negative {
	color: #dc3545;
}

/* Mobile responsiveness for validators list */
@media (max-width: 768px) {
	/* Bug 6 fix: hide entire header on mobile - cards mode makes it redundant */
	.pool-validators-header {
		display: none !important;
	}
	
	/* Bug 7 fix: sort button with long pool name on mobile - allow wrapping into pill, keep compact */
	.pool-validators-sort-btn {
		max-width: 100%;
		white-space: normal;
		text-align: left;
		line-height: 1.25;
		padding: 6px 12px;
		font-size: 12px;
	}
	
	.pool-validators-sort-btn .pool-icon {
		flex-shrink: 0;
		width: 16px;
		height: 16px;
	}
	
	.pool-validators-sort-btn .sort-arrow {
		flex-shrink: 0;
	}
	
	.pool-validator-row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 14px;
		/* Візуальне відділення карток */
		background: var(--card-bg);
		border-radius: 10px;
		margin-bottom: 10px;
		border: 1px solid var(--border-color);
	}
	
	.pool-validator-row:last-child {
		margin-bottom: 0;
	}
	
	/* Пробіл між картками - колір шапки */
	.pool-validators-list {
		background: var(--bg-color);
		padding: 10px;
		border-radius: 12px;
	}
	
	.pv-col-stake,
	.pv-col-activating,
	.pv-col-deactivating {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-top: 1px dashed var(--border-color);
	}
	
	.pv-col-stake::before {
		content: 'Stake';
		font-size: 11px;
		color: var(--secondary-text-color);
		font-weight: 600;
	}
	
	.pv-col-activating::before {
		content: 'Activating';
		font-size: 11px;
		color: var(--secondary-text-color);
		font-weight: 600;
	}
	
	.pv-col-deactivating::before {
		content: 'Deactivating';
		font-size: 11px;
		color: var(--secondary-text-color);
		font-weight: 600;
	}
}

/* Extended Info Section */
.pool-extended-info {
	margin-top: 32px;
}

.pool-extended-content {
	line-height: 1.6;
	color: var(--text-color);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
	.pool-header-main {
		flex-direction: column;
	}
	
	.pool-detail-name {
		font-size: 22px;
	}
	
	#stake-pool-dashboard .pool-metrics-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	
	#stake-pool-dashboard .pool-metric-card {
		padding: 12px !important;
		gap: 10px !important;
	}
	
	#stake-pool-dashboard .pool-metric-icon {
		font-size: 18px !important;
		width: 22px !important;
	}
	
	#stake-pool-dashboard .pool-metric-value {
		font-size: 15px !important;
	}
	
	#stake-pool-dashboard .pool-metric-label {
		font-size: 10px !important;
	}
	
	.pool-charts-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	
	/* Графіки на мобільних - з бічним padding */
	.pool-chart-block {
		padding: 15px;
	}
	
	.pool-chart-block h3 {
		margin-bottom: 10px;
	}
	
	/* Назва пула - скорочена на мобільних */
	.pool-chart-block h3 small {
		display: inline;
		font-size: 11px;
	}
	
	.pool-chart-block canvas {
		height: 180px !important;
		max-height: 180px !important;
		min-width: 0 !important;
		width: 100% !important;
	}
	
	.pool-chart-block .pool-sparkline {
		padding: 10px 0;
	}
	
	.pool-chart-block .pool-sparkline svg {
		width: 100%;
		height: 80px;
	}
	
	.pool-chart-block .pool-sparkline .chart-range-labels {
		font-size: 11px;
	}
	
	/* Epoch Dynamics на мобільних */
	.epoch-dynamics-block .pool-sparkline {
		min-height: 120px;
	}
	
	.epoch-dynamics-block .pool-sparkline svg {
		height: 120px;
	}
	
	.epoch-dynamics-block .epoch-dynamics-legend {
		gap: 16px;
		font-size: 11px;
	}
	
	/* Bug 2 fix: pool-header-right full width on mobile so Learn More is centered */
	#stake-pool-dashboard .pool-header-right {
		width: 100% !important;
		justify-content: center !important;
	}
	
	/* Learn More на мобільних - на всю ширину, менш помітна */
	#stake-pool-dashboard .pool-official-link {
		width: 100% !important;
		justify-content: center !important;
		background: transparent !important;
		border: 1px solid var(--header-color) !important;
		color: var(--header-color) !important;
		padding: 8px 12px !important;
		font-size: 13px !important;
	}
	
	/* Authority Keys на мобільних - скорочення pubkey */
	.authority-key-item {
		flex-wrap: nowrap;
	}
	
	.authority-key-item .key-value {
		max-width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* Stake Distribution на мобільних - після Epoch Dynamics */
	.stake-distribution-block {
		order: 4;
	}
	
	.stake-distribution-block .stake-distribution-subtitle {
		margin-left: 0;
		display: block;
		margin-top: 4px;
	}
	
	.stake-distribution-block .stake-distribution-content {
		flex-direction: column;
		gap: 16px;
	}
	
	.stake-distribution-block .stake-distribution-chart-wrapper {
		width: 160px;
		height: 160px;
		margin: 0 auto;
	}
	
	/* На планшеті - 1 стовпчик */
	.stake-distribution-block .stake-distribution-legend {
		display: flex;
		flex-direction: column;
		gap: 2px;
		max-height: 220px;
		font-size: 11px;
		overflow-y: auto;
		width: 100%;
	}
	
	.stake-distribution-block .legend-item .legend-name {
		max-width: none;
	}
	
	/* Бейдж не виходить за межі на мобільних */
	.pool-chart-block .pool-sparkline .selected-epoch-badge {
		min-width: 75px;
	}
	
	.validators-controls {
		flex-direction: column;
		align-items: stretch;
	}
	
	.validators-search {
		max-width: none;
	}
	
	.validators-sort-buttons {
		overflow-x: auto;
		justify-content: flex-start;
	}
}

@media (max-width: 480px) {
	.pool-charts-grid {
		gap: 15px;
	}
	
	.pool-chart-block {
		padding: 12px;
	}
	
	.pool-chart-block h3 {
		font-size: 14px;
		margin-bottom: 8px;
	}
	
	.pool-chart-block h3 small {
		font-size: 10px;
	}
	
	.pool-chart-block canvas {
		height: 160px !important;
		max-height: 160px !important;
	}
	
	.pool-chart-block .pool-sparkline {
		padding: 8px 0;
	}
	
	.pool-chart-block .pool-sparkline svg {
		height: 70px;
	}
	
	.pool-chart-block .pool-sparkline .selected-epoch-badge {
		min-width: 70px;
		padding: 3px 6px 4px;
	}
	
	.pool-chart-block .pool-sparkline .selected-epoch-badge .ep {
		font-size: 10px;
	}
	
	.pool-chart-block .pool-sparkline .selected-epoch-badge .sub {
		font-size: 9px;
	}
}

@media (max-width: 480px) {
	#stake-pool-dashboard .pool-metrics-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}
	
	#stake-pool-dashboard .pool-metric-card {
		padding: 10px !important;
		gap: 6px !important;
	}
	
	#stake-pool-dashboard .pool-metric-icon {
		font-size: 16px !important;
		width: 20px !important;
	}
	
	#stake-pool-dashboard .pool-metric-value {
		font-size: 14px !important;
	}
	
	#stake-pool-dashboard .pool-metric-label {
		font-size: 10px !important;
	}
	
	.breadcrumbs-nav {
		font-size: 12px;
	}
	
	.breadcrumb-separator {
		margin: 0 5px;
	}
	
	.pool-detail-image {
		width: 48px;
		height: 48px;
	}
	
	.pool-detail-name {
		font-size: 20px;
	}
	
	/* Stake Distribution на дуже малих екранах */
	.stake-distribution-block .stake-distribution-chart-wrapper {
		width: 180px;
		height: 180px;
		min-width: 180px;
	}
	
	/* На мобільному - 1 стовпчик */
	.stake-distribution-block .stake-distribution-legend {
		display: flex;
		flex-direction: column;
		font-size: 10px;
		max-height: 200px;
	}
}
/* Pool epoch selector styles */
#stake-pool-dashboard .pool-header-right {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

/* Pool Controls Bar - як на головній сторінці */
#stake-pool-dashboard .pool-controls-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 16px !important;
	padding: 12px 16px !important;
	background: var(--bg-color) !important;
	border-radius: 12px !important;
}

#stake-pool-dashboard .pool-controls-left {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

#stake-pool-dashboard .pool-controls-right {
	display: flex !important;
	align-items: center !important;
}

/* Epoch stale pill - жовта плашка */
#stake-pool-dashboard .pool-epoch-stale {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid #ffe08a;
	background: #fff3cd;
	color: #7a5b00;
	font-size: 12px;
}

.dark-theme #stake-pool-dashboard .pool-epoch-stale {
	border-color: #5c4a10;
	background: #3a2d07;
	color: #ffd166;
}

/* Epoch control - селектор у стилі головної */
#stake-pool-dashboard .pool-epoch-control {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	border: 1px solid var(--border-color) !important;
	background: var(--card-bg) !important;
	border-radius: 999px !important;
	padding: 4px 10px !important;
	height: 34px !important;
}

#stake-pool-dashboard .pool-epoch-control .label {
	font-size: 13px !important;
	color: var(--secondary-text-color) !important;
}

#stake-pool-dashboard .pool-epoch-control i {
	color: var(--header-color) !important;
}

#stake-pool-dashboard .pool-epoch-control select,
#stake-pool-dashboard #pool-epoch-select {
	border: none !important;
	background: transparent !important;
	color: var(--text-color) !important;
	padding: 6px 6px !important;
	outline: none !important;
	font: inherit !important;
	min-width: 84px !important;
	cursor: pointer !important;
}

/* Mobile: visually proportional to the description and metric cards
   around it. NOTE: font-size below 16px will trigger iOS Safari auto-zoom
   on tap. Viktor accepted this trade-off for visual consistency on
   Android (where auto-zoom does not apply). If iOS UX feedback requires
   it, bump back up to 16px and accept the larger selector. */
@media (max-width: 768px) {
	#stake-pool-dashboard .pool-epoch-control {
		height: auto !important;
		padding: 4px 10px !important;
	}
	#stake-pool-dashboard .pool-epoch-control select,
	#stake-pool-dashboard #pool-epoch-select {
		font-size: 14px !important;
		min-height: 28px !important;
		padding: 4px 6px !important;
		min-width: 100px !important;
		line-height: 1.3 !important;
	}
	#stake-pool-dashboard .pool-epoch-control .label {
		font-size: 12px !important;
	}
}
@media (max-width: 480px) {
	#stake-pool-dashboard .pool-epoch-control {
		padding: 3px 8px !important;
	}
	#stake-pool-dashboard .pool-epoch-control select,
	#stake-pool-dashboard #pool-epoch-select {
		font-size: 13px !important;
		min-height: 26px !important;
		padding: 3px 5px !important;
		min-width: 90px !important;
	}
	#stake-pool-dashboard .pool-epoch-control .label {
		font-size: 11px !important;
	}
}
/* Option element styling for mobile native dropdowns. Placed OUTSIDE the
   media query container because some browsers (especially iOS Safari) match
   option styles only at the document level, not nested under the dashboard.
   Enforced via element selector with class qualifier for specificity. */
#pool-epoch-select option,
select#pool-epoch-select option {
	font-size: 17px !important;
	padding: 14px 12px !important;
	line-height: 1.5 !important;
	background: var(--card-bg, #1a1a1a) !important;
	color: var(--text-color, #fff) !important;
}

/* Compact epoch info - як на головній */
#stake-pool-dashboard .pool-epoch-info-compact {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 14px !important;
	color: var(--text-color) !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .epoch-number {
	font-weight: 600 !important;
	font-size: 15px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .past-epoch-badge {
	/* display керується через JS inline styles */
	align-items: center !important;
	gap: 4px !important;
	padding: 2px 8px !important;
	background: #f0ad4e !important;
	color: white !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: lowercase !important;
}

/* Current epoch badge - зелений */
#stake-pool-dashboard .pool-epoch-info-compact .current-epoch-badge {
	/* display керується через JS inline styles */
	align-items: center !important;
	gap: 4px !important;
	padding: 2px 8px !important;
	background: #28a745 !important;
	color: white !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: lowercase !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .current-epoch-badge i {
	font-size: 9px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .past-epoch-badge i {
	font-size: 9px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .epoch-percent {
	color: var(--secondary-text-color) !important;
	font-size: 13px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .epoch-separator {
	color: var(--secondary-text-color) !important;
	opacity: 0.4 !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .snapshot-info {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .snapshot-label {
	color: var(--secondary-text-color) !important;
	font-size: 13px !important;
}

#stake-pool-dashboard .pool-epoch-info-compact .snapshot-value {
	color: var(--text-color) !important;
	font-size: 13px !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	#stake-pool-dashboard .pool-controls-bar {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	#stake-pool-dashboard .pool-epoch-info-compact {
		flex-wrap: wrap !important;
	}
}

/* ============================================
   v2.3.0: validator names, keys, copy controls, meta chips
   ============================================ */

/* Copy controls are buttons: strip browser defaults. */
#stake-pool-dashboard .cv-key,
#stake-pool-dashboard .cv-copy-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
    box-shadow: none;
    /* Arrow with a copy glyph, so the action reads as "copy". */
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%202.5%20L3%2017%20L6.9%2013.3%20L9.4%2019.2%20L11.8%2018.2%20L9.3%2012.4%20L14.4%2012.4%20Z%27%20fill%3D%27black%27%20stroke%3D%27white%27%20stroke-width%3D%271.3%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2711.2%27%20width%3D%277%27%20height%3D%278.3%27%20rx%3D%271.6%27%20fill%3D%27white%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%2F%3E%3Crect%20x%3D%2715.9%27%20y%3D%2714%27%20width%3D%277%27%20height%3D%278.3%27%20rx%3D%271.6%27%20fill%3D%27white%27%20stroke%3D%27black%27%20stroke-width%3D%271.3%27%2F%3E%3C%2Fsvg%3E") 3 2, pointer;
}

/* Name line: the name truncates, the copy button stays visible. */
#stake-pool-dashboard .cv-name-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
#stake-pool-dashboard .cv-name-line .cv-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .pv-validator-name.cv-name-line {
    max-width: none;
}
#stake-pool-dashboard .pv-validator-name.cv-name-line .cv-name-text {
    max-width: 220px;
}
#stake-pool-dashboard .cv-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-copy-btn:hover {
    background: var(--chart-bg-color);
    color: var(--header-color);
}

/* Copy icons: hidden until the row is hovered, a check after copying. */
#stake-pool-dashboard .cv-copy-icon,
#stake-pool-dashboard .cv-copied-icon {
    font-size: 10px;
}
#stake-pool-dashboard .cv-copy-icon {
    opacity: 0;
    transition: opacity 0.15s ease;
}
#stake-pool-dashboard .cv-copied-icon {
    display: none;
    color: #28a745;
}
#stake-pool-dashboard .validator-item:hover .cv-copy-icon,
#stake-pool-dashboard .cv-vrow:hover .cv-copy-icon {
    opacity: 0.4;
}
#stake-pool-dashboard .cv-key:hover .cv-copy-icon,
#stake-pool-dashboard .cv-key:focus-visible .cv-copy-icon,
#stake-pool-dashboard .cv-copy-btn:hover .cv-copy-icon,
#stake-pool-dashboard .cv-copy-btn:focus-visible .cv-copy-icon {
    opacity: 1;
}
#stake-pool-dashboard .is-copied .cv-copy-icon {
    display: none;
}
#stake-pool-dashboard .is-copied .cv-copied-icon {
    display: inline-block;
}
#stake-pool-dashboard .is-copy-failed .cv-copy-icon {
    opacity: 1;
    color: #dc3545;
}
@media (hover: none) {
    #stake-pool-dashboard .cv-copy-icon {
        opacity: 0.4;
    }
}

/* Keys: short form in one line, full key on hover, copy on click. */
#stake-pool-dashboard .cv-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 4px;
    margin-left: -4px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--secondary-text-color);
    transition: background 0.15s ease, color 0.15s ease;
}
#stake-pool-dashboard .cv-key:hover {
    background: var(--chart-bg-color);
    color: var(--text-color);
}
#stake-pool-dashboard .cv-key.is-copied {
    color: #28a745;
}
#stake-pool-dashboard .cv-key-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* Meta chips: [delinquent] [commission | MEV] [client version]. */
#stake-pool-dashboard .cv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
}
#stake-pool-dashboard .cv-chip {
    display: inline-flex;
    align-items: stretch;
    height: 21px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
#stake-pool-dashboard .cv-seg {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
}
#stake-pool-dashboard .cv-seg + .cv-seg {
    border-left: 1px solid var(--border-color);
}
#stake-pool-dashboard .cv-seg-label {
    display: inline-block;
    width: 8px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-seg.is-missing,
#stake-pool-dashboard .cv-chip.is-missing .cv-seg {
    color: var(--secondary-text-color);
    font-weight: 500;
}
#stake-pool-dashboard .cv-chip-client .cv-seg {
    gap: 6px;
    padding-left: 6px;
    color: var(--secondary-text-color);
}
/* Client logos: official marks sit directly in the chip, all at the same
   height (each file is cropped to the mark itself) and centred. Monochrome
   marks flip with the theme, colour marks stay as they are. Hybrids and BAM
   builds show two marks side by side. */
#stake-pool-dashboard .cv-client-logos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#stake-pool-dashboard .cv-client-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 10px;
    flex-shrink: 0;
}
#stake-pool-dashboard .cv-client-mark img {
    display: block;
    height: 10px;
    width: auto;
}
body.dark-theme-body #stake-pool-dashboard .cv-client-mark.inv-dark img,
body:not(.dark-theme-body) #stake-pool-dashboard .cv-client-mark.inv-light img {
    filter: invert(1);
}
#stake-pool-dashboard .cv-client-mark.is-generic {
    width: 10px;
    color: var(--secondary-text-color);
    font-size: 10px;
}
#stake-pool-dashboard .cv-chip-delinquent {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}
#stake-pool-dashboard .cv-chip-delinquent .cv-seg {
    gap: 5px;
}
#stake-pool-dashboard .cv-chip-delinquent i {
    font-size: 10px;
}

/* Delinquent validators: the avatar fades to grey. */
#stake-pool-dashboard .is-delinquent .validator-image-wrapper {
    filter: grayscale(1);
    opacity: 0.55;
}

/* Pool badge rings for stake movement (validators list). Green =
   activating, red = deactivating, split = both, dashed = the whole
   relationship is arriving (activating only) or leaving (exiting). */
#stake-pool-dashboard .pool-badge-wrapper.is-activating .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-activating .pool-badge:hover,
#stake-pool-dashboard .pool-badge-wrapper.is-activating-only .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-activating-only .pool-badge:hover {
    border-color: rgba(40, 167, 69, 0.85);
}
#stake-pool-dashboard .pool-badge-wrapper.is-deactivating .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-deactivating .pool-badge:hover,
#stake-pool-dashboard .pool-badge-wrapper.is-exiting .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-exiting .pool-badge:hover {
    border-color: rgba(220, 53, 69, 0.85);
}
#stake-pool-dashboard .pool-badge-wrapper.is-activating.is-deactivating .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-activating.is-deactivating .pool-badge:hover {
    /* Both directions at once: the ring splits in proportion, the activating
       share in green from the top, clockwise. --act-share comes from JS. */
    border-color: transparent;
    background:
        linear-gradient(var(--logo-bg), var(--logo-bg)) padding-box,
        conic-gradient(rgba(40, 167, 69, 0.85) 0 var(--act-share, 50%), rgba(220, 53, 69, 0.85) 0) border-box;
}
#stake-pool-dashboard .pool-badge-wrapper.is-activating-only .pool-badge,
#stake-pool-dashboard .pool-badge-wrapper.is-exiting .pool-badge {
    border-style: dashed;
}
#stake-pool-dashboard .pool-badge-wrapper.is-activating-only .pool-badge-stake {
    color: #28a745 !important;
}
#stake-pool-dashboard .pool-badge-wrapper.is-exiting .pool-badge-stake {
    color: #dc3545 !important;
}

/* Desktop and tablet: the name column is as wide as the keys line plus a
   little, long names truncate there, and the stake column gets the freed
   space instead of running into the pool badges. */
@media (min-width: 769px) {
    #stake-pool-dashboard .validator-item > .validator-main-info {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }
    #stake-pool-dashboard .validator-item .validator-info {
        flex: 0 0 300px;
        width: 300px;
        max-width: 300px;
    }
    #stake-pool-dashboard .validator-item > .validator-stake-stats {
        flex: 1 1 200px;
        min-width: 180px;
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* Pool page charts: blocks may shrink below their content (the grid tracks
   are minmax(0, 1fr)), so nothing pushes the page wider than a phone. */
#stake-pool-dashboard .pool-chart-block {
    min-width: 0;
}

/* Tooltip box for the chips (appended to body, outside the dashboard scope). */
.pool-tooltip.cv-tip {
    min-width: 0;
    max-width: 280px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.45;
}
.pool-tooltip.cv-tip .cv-tip-line + .cv-tip-line {
    margin-top: 2px;
}

/* Info line rows (text flows normally inside, icon on the left). */
#stake-pool-dashboard .sp-info-container .sp-info-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
#stake-pool-dashboard .sp-info-container .sp-info-line .fas {
    margin-top: 1px;
    flex-shrink: 0;
}
#stake-pool-dashboard .sp-info-container .sp-info-version {
    font-size: 11.5px;
    opacity: 0.8;
}
#stake-pool-dashboard .sp-info-container .sp-info-version .fas {
    font-size: 12px;
}

/* Pool page table: the details column takes the full cell width, so the
   identity and vote keys stay on one line when there is room. */
#stake-pool-dashboard .pv-col-validator .pv-validator-info {
    width: 100%;
    min-width: 0;
}
#stake-pool-dashboard .pv-validator-details {
    flex: 1 1 auto;
}

/* Stake movement by pool: tooltip on the activating and deactivating
   numbers of a validator row. */
#stake-pool-dashboard .validator-stake-stats [data-cv-flow] {
    cursor: pointer;
}
.pool-tooltip.cv-flow-tip {
    min-width: 210px;
    max-width: 300px;
    padding: 10px 12px;
}
.pool-tooltip.cv-flow-tip .pool-tooltip-title {
    margin-bottom: 6px;
}
.cv-flow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12.5px;
}
.cv-flow-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    background: rgba(128, 128, 128, 0.15);
}
.cv-flow-logo svg {
    width: 12px;
    height: 12px;
}
.cv-flow-logo.is-initials {
    font-size: 8px;
    font-weight: 700;
}
.cv-flow-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-flow-val {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cv-flow-val.is-up {
    color: #28a745;
}
.cv-flow-val.is-down {
    color: #dc3545;
}
.cv-flow-more {
    padding-top: 4px;
    font-size: 11.5px;
    opacity: 0.7;
}

/* v2.3.1: the Jito wordmark reads larger than the other marks at the same
   height, so it gets 1 px of air above and below. */
#stake-pool-dashboard .cv-client-mark.is-word img {
    height: 8px;
}

/* Touch screens: no hover lift or blue border on the validator cards and no
   tap flash - taps are meant for the tooltips inside the card. */
#stake-pool-dashboard .validator-item,
#stake-pool-dashboard .validator-item *,
#stake-pool-dashboard .cv-vrow,
#stake-pool-dashboard .cv-vrow * {
    -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
    #stake-pool-dashboard .validator-item:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--border-color);
    }
}

/* ============================================
   v2.3.2
   ============================================ */

/* Pool logo circles outside the dashboard scope (tooltips, sub-header)
   follow the bubble rules: logo background and border, the image fitted
   inside with contain and pixel padding, never cropped. */
.cv-flow-logo {
    width: 20px;
    height: 20px;
    background: #f0f4f8;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}
body.dark-theme-body .cv-flow-logo {
    background: #2a2d36;
    border-color: rgba(255, 255, 255, 0.15);
}
.cv-flow-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}

/* Sticky sub-header: always visible under the site header on every
   dashboard view; in the page flow, so it never covers content. */
.cv-subheader {
    position: sticky;
    top: 0;
    z-index: 55;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
}
body.dark-theme-body .cv-subheader {
    background: rgba(22, 22, 26, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.cv-subheader-inner {
    max-width: 1200px;
    min-height: 44px;
    margin: 0 auto;
    padding: 6px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cv-subheader-logo .cv-flow-logo {
    width: 26px;
    height: 26px;
}
.cv-flow-logo.is-icon {
    color: #6c757d;
    font-size: 12px;
}
body.dark-theme-body .cv-flow-logo.is-icon {
    color: #9aa0a6;
}
.cv-subheader-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cv-subheader-kind {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c757d;
}
.cv-subheader-kind[hidden] {
    display: none;
}
.cv-subheader-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #212529;
}
body.dark-theme-body .cv-subheader-kind {
    color: #9aa0a6;
}
body.dark-theme-body .cv-subheader-title {
    color: #f1f3f5;
}
.cv-subheader-top {
    margin-left: 2px;
}
@media (max-width: 480px) {
    .cv-subheader-inner {
        padding: 6px 12px;
        gap: 8px;
    }
    .cv-subheader-kind {
        display: none;
    }
}

/* Phones: pool table cards never grow past the card (long names truncate),
   and the pool bubbles block loses the desktop 12 px offset. */
@media (max-width: 768px) {
    #stake-pool-dashboard .pool-validator-row {
        grid-template-columns: minmax(0, 1fr);
    }
    #stake-pool-dashboard .pool-validator-row > .pv-col,
    #stake-pool-dashboard .pv-validator-info,
    #stake-pool-dashboard .pv-validator-details {
        min-width: 0;
    }
    #stake-pool-dashboard .pv-validator-name.cv-name-line .cv-name-text {
        max-width: none;
    }
    #stake-pool-dashboard .validator-item > .validator-pools {
        margin-left: 0;
    }
}
@media (hover: none) {
    #stake-pool-dashboard .pool-validator-row:hover {
        background: none;
    }
}

/* Sub-header epoch steps: older / current / newer. */
.cv-subheader-epochs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.cv-subheader-epochs[hidden] {
    display: none;
}
.cv-ep-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6c757d;
    font-size: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cv-ep-btn:hover:not(:disabled) {
    background: rgba(128, 128, 128, 0.14);
}
.cv-ep-btn:disabled {
    opacity: 0.3;
    cursor: default;
}
body.dark-theme-body .cv-ep-btn {
    color: #9aa0a6;
}
.cv-ep-num {
    min-width: 50px;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cv-ep-num.is-latest {
    color: #28a745;
    background: rgba(40, 167, 69, 0.14);
}
.cv-ep-num.is-past {
    color: #b45309;
    background: rgba(245, 158, 11, 0.18);
}
body.dark-theme-body .cv-ep-num.is-past {
    color: #f59e0b;
}

/* ============================================
   VALIDATOR PAGE (v2.4.0)
   The page reuses the pool page blocks (header, metric cards, chart blocks)
   and the main page pool cards; the rules here cover what is new. A rule
   carries !important only where it has to beat a pool-page rule that does.
   ============================================ */
#stake-pool-dashboard #validator-detail-view[data-state="message"] > :not(#cv-vd-message) { display: none; }
#stake-pool-dashboard .cv-vd-msg { text-align: center; padding: 56px 20px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-msg h2 { margin: 0 0 10px; font-size: 22px; color: var(--text-color); }
#stake-pool-dashboard .cv-vd-msg p { margin: 0 0 8px; line-height: 1.5; }
#stake-pool-dashboard .cv-vd-msg-key { font-size: 13px; word-break: break-all; opacity: 0.8; }
#stake-pool-dashboard .cv-vd-back {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px;
    border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-color);
    font-size: 14px; font-weight: 600; text-decoration: none;
}
#stake-pool-dashboard .cv-vd-back:hover { border-color: var(--header-color); color: var(--header-color); }
#stake-pool-dashboard .cv-vd-spinner {
    width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
    border: 3px solid var(--border-color); border-top-color: var(--header-color);
    animation: cv-vd-spin 0.8s linear infinite;
}
@keyframes cv-vd-spin { to { transform: rotate(360deg); } }

/* Links to the validator page from the lists (name and avatar). */
#stake-pool-dashboard a.cv-vlink { color: inherit; text-decoration: none; }
#stake-pool-dashboard a.cv-name-text.cv-vlink:hover { color: var(--header-color); }
#stake-pool-dashboard a.cv-vlink-avatar { display: flex; flex-shrink: 0; border-radius: 50%; }
#stake-pool-dashboard a.cv-vlink-avatar:hover .validator-image-wrapper { box-shadow: 0 0 0 2px var(--header-color); }

/* Header */
#stake-pool-dashboard .cv-vd-header .pool-header-left { min-width: 0; flex: 1 1 320px; align-items: flex-start !important; }
#stake-pool-dashboard .cv-vd-header .pool-header-info { min-width: 0; }
#stake-pool-dashboard .cv-vd-avatar { width: 64px; height: 64px; flex-shrink: 0; }
#stake-pool-dashboard .cv-vd-avatar .validator-image {
    display: block; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--border-color); background: var(--logo-bg);
}
#stake-pool-dashboard .cv-vd-avatar .validator-image.fallback {
    display: flex; align-items: center; justify-content: center; color: var(--ph-ink); font-size: 24px; font-weight: 700;
    background: var(--ph-bg);
}
#stake-pool-dashboard #validator-detail-view.cv-vd-delinquent .cv-vd-avatar { filter: grayscale(1); opacity: 0.55; }
#stake-pool-dashboard .cv-vd-name-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#stake-pool-dashboard .cv-vd-name-line .pool-detail-name { overflow-wrap: anywhere; }
#stake-pool-dashboard .cv-vd-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
#stake-pool-dashboard .cv-vd-badge.is-inactive { color: #dc3545; background: rgba(220, 53, 69, 0.12); border: 1px solid rgba(220, 53, 69, 0.35); }
#stake-pool-dashboard .cv-vd-badge.is-new { color: #28a745; background: rgba(40, 167, 69, 0.12); border: 1px solid rgba(40, 167, 69, 0.35); }
#stake-pool-dashboard .cv-vd-keys { display: flex; flex-wrap: wrap; gap: 6px 8px; }
#stake-pool-dashboard .cv-vd-then { display: flex; flex-wrap: wrap; gap: 6px 10px; }
#stake-pool-dashboard .cv-vd-then:empty { display: none; }
/* Everything that describes a past epoch wears the same yellow as the
   "Viewing past epoch" pill. */
#stake-pool-dashboard .cv-vd-then-item,
#stake-pool-dashboard .cv-vd-asof {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid #ffe08a; background: #fff3cd; color: #7a5b00; font-size: 12px; line-height: 1.3;
}
body.dark-theme-body #stake-pool-dashboard .cv-vd-then-item,
body.dark-theme-body #stake-pool-dashboard .cv-vd-asof { border-color: #5c4a10; background: #3a2d07; color: #ffd166; }
#stake-pool-dashboard .cv-vd-then-item .cv-key { color: inherit; }
#stake-pool-dashboard .cv-vd-details .pool-details { margin-top: 4px; color: var(--text-color); }
#stake-pool-dashboard .cv-vd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#stake-pool-dashboard .cv-vd-chips:empty { display: none; }
#stake-pool-dashboard .cv-vd-chips .cv-meta { margin: 0; }
#stake-pool-dashboard .cv-vd-nodata { font-size: 12px; font-style: italic; color: var(--secondary-text-color); }
#stake-pool-dashboard .pool-metrics-grid.cv-vd-metrics { grid-template-columns: repeat(3, 1fr) !important; }
#stake-pool-dashboard .cv-vd-now { font-size: 12px; font-weight: 500; color: var(--secondary-text-color); white-space: nowrap; }
#stake-pool-dashboard .cv-vd-of { margin-left: 4px; font-size: 12px; font-weight: 400; opacity: 0.6; }

/* Charts */
#stake-pool-dashboard #validator-detail-view .chart-no-data { min-height: 96px; }
#stake-pool-dashboard .cv-chart-point { fill: var(--sparkline-color); }
#stake-pool-dashboard .chart-tooltip .cv-tip-date { margin-left: 4px; font-weight: 400; color: var(--secondary-text-color); }

/* Pools block and changes */
#stake-pool-dashboard .cv-vd-block { margin-top: 24px; padding: 20px; }
#stake-pool-dashboard .cv-vd-block h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--text-color); }
#stake-pool-dashboard .cv-vd-block h3 i { color: var(--header-color); }
#stake-pool-dashboard .cv-vd-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#stake-pool-dashboard .cv-vd-sub { margin: 4px 0 0; font-size: 13px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-toggle { display: inline-flex; overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; }
#stake-pool-dashboard .cv-vd-toggle button {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; cursor: pointer;
    background: var(--bg-color); color: var(--secondary-text-color); font-family: inherit; font-size: 13px;
}
#stake-pool-dashboard .cv-vd-toggle button.active { background: var(--header-color); color: #fff; }
#stake-pool-dashboard .cv-vd-sources .category-section { margin: 16px 0 0; }
/* Cards never get wider than their container (narrow phones). */
#stake-pool-dashboard .cv-vd-sources .sp-groups-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
#stake-pool-dashboard .cv-vd-sources .category-header .meta { white-space: nowrap; }
#stake-pool-dashboard .cv-src-card .cv-src-link { display: flex; align-items: center; gap: 15px; min-width: 0; color: inherit; text-decoration: none; }
#stake-pool-dashboard .cv-src-card a.cv-src-link:hover .pool-name { color: var(--header-color); }
#stake-pool-dashboard .cv-src-initials { font-size: 16px; font-weight: 700; }
#stake-pool-dashboard .cv-src-card .interactive-chart-container { min-height: 0; margin: 4px 0; }
#stake-pool-dashboard .cv-vd-small { margin-top: 14px; font-size: 13px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-small span { border-bottom: 1px dashed var(--secondary-text-color); cursor: help; }
#stake-pool-dashboard .cv-vd-src-text { display: flex; flex-direction: column; line-height: 1.25; }
#stake-pool-dashboard .cv-vd-src-name { font-weight: 600; }
#stake-pool-dashboard .cv-vd-src-cat { font-size: 11px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-muted { color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-pos { color: #28a745; }
#stake-pool-dashboard .cv-vd-neg { color: #dc3545; }
#stake-pool-dashboard .cv-vd-changes-list { display: flex; flex-direction: column; margin-top: 14px; }
#stake-pool-dashboard .cv-vd-change {
    display: grid; grid-template-columns: 110px 130px minmax(0, 1fr); align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; color: var(--text-color);
}
#stake-pool-dashboard .cv-vd-change:last-child { border-bottom: 0; }
#stake-pool-dashboard .cv-vd-change-epoch,
#stake-pool-dashboard .cv-vd-more {
    justify-self: start; padding: 3px 10px; border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer;
    background: var(--bg-color); color: var(--text-color); font-family: inherit; font-size: 12px; font-weight: 600;
}
#stake-pool-dashboard .cv-vd-change-epoch:hover,
#stake-pool-dashboard .cv-vd-more:hover { border-color: var(--header-color); color: var(--header-color); }
#stake-pool-dashboard .cv-vd-more { margin-top: 12px; padding: 6px 14px; }
#stake-pool-dashboard .cv-vd-change-kind { font-size: 13px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-change-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
#stake-pool-dashboard .cv-vd-arrow { font-size: 11px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-changes-foot { margin: 14px 0 0; font-size: 12px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-changes-empty { margin-top: 14px; font-size: 14px; color: var(--secondary-text-color); }
/* A pool page opened from a validator page scrolls to its table. */
#stake-pool-dashboard .pool-validators-section { scroll-margin-top: 150px; }
/* Validator avatar in the sub-header: a photo, not a padded logo. */
.cv-flow-logo.cv-vd-mini img { padding: 0; object-fit: cover; border-radius: 50%; }
@media (max-width: 768px) {
    #stake-pool-dashboard .pool-metrics-grid.cv-vd-metrics { grid-template-columns: repeat(2, 1fr) !important; }
    #stake-pool-dashboard .cv-vd-avatar,
    #stake-pool-dashboard .cv-vd-avatar .validator-image { width: 52px; height: 52px; }
    #stake-pool-dashboard .cv-vd-avatar .validator-image.fallback { font-size: 20px; }
    #stake-pool-dashboard .cv-vd-block { padding: 12px; }
    #stake-pool-dashboard .cv-vd-header .pool-header-left { flex: 0 0 auto; }
    #stake-pool-dashboard #cv-vd-epoch-info .epoch-separator { display: none; }
    #stake-pool-dashboard .cv-vd-sources .category-section { padding: 10px; }
    #stake-pool-dashboard .cv-vd-sources .category-header .title { font-size: 18px; }
    #stake-pool-dashboard .cv-vd-sources .sp-group-card { padding: 18px; }
    #stake-pool-dashboard .cv-vd-change { grid-template-columns: auto minmax(0, 1fr); }
    #stake-pool-dashboard .cv-vd-change-text { grid-column: 1 / -1; }
}

/* ---- v2.4.0 round 2: charts, donut, sources table, search ---- */
#stake-pool-dashboard #validator-detail-view .desc-wrap:not([data-collapsible="1"]) { cursor: default; }
#stake-pool-dashboard #validator-detail-view .chart-tooltip:empty { display: none; }
#stake-pool-dashboard .cv-grid-line { stroke: var(--secondary-text-color); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.35; }
#stake-pool-dashboard .cv-grid-label {
    font-size: 9px; fill: var(--secondary-text-color); stroke: var(--card-bg); stroke-width: 3px;
    stroke-linejoin: round; paint-order: stroke;
}
#stake-pool-dashboard .cv-chart-stats { margin-top: 3px; font-size: 11px; }
#stake-pool-dashboard .cv-chart-ep {
    padding: 0 5px; border: 1px solid var(--border-color); border-radius: 999px; background: transparent;
    color: var(--secondary-text-color); font-family: inherit; font-size: 10px; line-height: 1.5; cursor: pointer;
}
#stake-pool-dashboard .cv-chart-ep:hover { border-color: var(--header-color); color: var(--header-color); }
#stake-pool-dashboard .cv-vd-aux-block h3 .cv-vd-toggle { margin-left: auto; }
#stake-pool-dashboard .cv-vd-toggle-sm button { padding: 3px 9px; font-size: 11px; font-weight: 500; }
/* Donut */
#stake-pool-dashboard .cv-vd-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
#stake-pool-dashboard .cv-vd-donut .chart-no-data { flex: 1 1 100%; }
#stake-pool-dashboard .cv-donut-wrap { position: relative; flex: 0 0 180px; width: 180px; height: 180px; margin: 0 auto; }
#stake-pool-dashboard .cv-donut-svg { display: block; width: 180px; height: 180px; overflow: visible; }
#stake-pool-dashboard .cv-donut-seg { cursor: pointer; transition: stroke-width 0.15s ease, opacity 0.15s ease; }
#stake-pool-dashboard .cv-donut-svg:hover .cv-donut-seg { opacity: 0.5; }
#stake-pool-dashboard .cv-donut-svg .cv-donut-seg:hover { opacity: 1; stroke-width: 27; }
#stake-pool-dashboard .cv-donut-center { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); pointer-events: none; }
#stake-pool-dashboard .cv-donut-center .validator-image {
    display: block; width: 76px; height: 76px; box-sizing: border-box; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--border-color); background: var(--logo-bg);
}
#stake-pool-dashboard .cv-donut-center .validator-image.fallback {
    display: flex; align-items: center; justify-content: center; color: var(--ph-ink); font-size: 26px; font-weight: 700;
    background: var(--ph-bg);
}
#stake-pool-dashboard .cv-donut-legend { flex: 1 1 210px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#stake-pool-dashboard .cv-donut-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; color: var(--text-color); font-size: 13px; text-decoration: none; }
#stake-pool-dashboard a.cv-donut-row:hover { background: var(--bg-color); color: var(--header-color); }
#stake-pool-dashboard .cv-donut-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; }
#stake-pool-dashboard .cv-donut-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stake-pool-dashboard .cv-donut-share { flex-shrink: 0; font-weight: 600; }
#stake-pool-dashboard .cv-donut-sol { flex: 0 0 52px; text-align: right; font-size: 12px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-donut-more { padding: 4px 6px; font-size: 12px; color: var(--secondary-text-color); }
/* Pools block: sort bar and table */
#stake-pool-dashboard .cv-vd-sortbar { margin-top: 14px; }
#stake-pool-dashboard .cv-vd-flat-grid { margin-top: 16px; }
#stake-pool-dashboard .cv-st {
    margin-top: 14px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px;
    --cv-st-cols: minmax(210px, 2.1fr) 1.1fr 1.5fr 0.8fr 1fr 1fr 1fr 130px;
}
#stake-pool-dashboard .cv-st.no-counts { --cv-st-cols: minmax(210px, 2.1fr) 1.1fr 1.5fr 1fr 1fr 1fr 130px; }
#stake-pool-dashboard .cv-st-row {
    display: grid; grid-template-columns: var(--cv-st-cols); align-items: center; column-gap: 14px; padding: 10px 16px;
    border-bottom: 1px solid var(--border-color); color: var(--text-color); font-size: 14px; text-decoration: none;
}
#stake-pool-dashboard .cv-st > .cv-st-row:last-child { border-bottom: 0; }
#stake-pool-dashboard .cv-st-head { padding-top: 9px; padding-bottom: 9px; background: var(--bg-color); }
#stake-pool-dashboard .cv-st-h {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; padding: 0; border: 0; background: none;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--secondary-text-color); white-space: nowrap; cursor: pointer;
}
#stake-pool-dashboard .cv-st-h.cv-st-source { justify-content: flex-start; }
#stake-pool-dashboard div.cv-st-h { cursor: default; }
#stake-pool-dashboard .cv-st-h i { font-size: 10px; opacity: 0.45; }
#stake-pool-dashboard .cv-st-h.is-sorted { color: var(--header-color); }
#stake-pool-dashboard .cv-st-h.is-sorted i { opacity: 1; }
#stake-pool-dashboard .cv-st-c { min-width: 0; text-align: right; white-space: nowrap; }
#stake-pool-dashboard .cv-st-c i { font-size: 12px; }
#stake-pool-dashboard .cv-st-source { display: flex; align-items: center; gap: 12px; text-align: left; white-space: normal; }
#stake-pool-dashboard .cv-st .cv-flow-logo { flex: 0 0 36px; width: 36px; height: 36px; }
#stake-pool-dashboard .cv-st-share { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
#stake-pool-dashboard .cv-st-bar { flex: 1 1 auto; min-width: 24px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--border-color); }
#stake-pool-dashboard .cv-st-bar i { display: block; height: 100%; border-radius: 999px; background: var(--header-color); }
#stake-pool-dashboard .cv-st-pct { flex: 0 0 54px; font-weight: 600; }
#stake-pool-dashboard .cv-st-trend { display: flex; justify-content: flex-end; }
#stake-pool-dashboard .cv-mini-spark { width: 120px; height: 28px; overflow: visible; }
#stake-pool-dashboard .cv-mini-spark path { fill: none; stroke: var(--sparkline-color); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#stake-pool-dashboard .cv-st-group {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 16px;
    border-bottom: 1px solid var(--border-color); background: var(--bg-color); font-size: 13px; font-weight: 700; color: var(--text-color);
}
#stake-pool-dashboard .cv-st-group-meta { font-size: 12px; font-weight: 500; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-note { margin: 12px 0 0; font-size: 12px; color: var(--secondary-text-color); }
/* Validators List: former names, inactive matches, age */
#stake-pool-dashboard .cv-formerly { font-size: 12px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-formerly b { font-weight: 600; color: var(--text-color); }
#stake-pool-dashboard .validators-no-results.cv-no-active { padding: 22px 16px 4px; }
#stake-pool-dashboard .cv-inactive-block { margin-top: 18px; padding: 12px; border: 1px dashed var(--border-color); border-radius: 14px; }
#stake-pool-dashboard .cv-inactive-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 2px 4px 10px; font-size: 15px; font-weight: 700; color: var(--text-color); }
#stake-pool-dashboard .cv-inactive-head i { font-size: 13px; color: #dc3545; }
#stake-pool-dashboard .cv-inactive-head span { font-size: 12px; font-weight: 400; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-inactive-row {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: 10px; color: var(--text-color); text-decoration: none;
}
#stake-pool-dashboard .cv-inactive-row:hover { background: var(--bg-color); }
#stake-pool-dashboard .cv-inactive-row:hover .cv-inactive-name { color: var(--header-color); }
#stake-pool-dashboard .cv-inactive-avatar {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    box-sizing: border-box; border: 1.5px dashed var(--ph-ring);
    background: var(--ph-bg); color: var(--ph-ink); font-size: 15px; font-weight: 700; opacity: 0.8;
}
#stake-pool-dashboard .cv-inactive-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#stake-pool-dashboard .cv-inactive-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#stake-pool-dashboard .cv-inactive-meta { font-size: 12px; font-weight: 600; color: #dc3545; white-space: nowrap; }
#stake-pool-dashboard .cv-inactive-stake { font-size: 12px; color: var(--secondary-text-color); text-align: right; white-space: nowrap; }
#stake-pool-dashboard .cv-inactive-more { margin: 8px 10px 2px; font-size: 12px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-chip-age i { margin-right: 4px; font-size: 10px; }
.pool-tooltip-stat.accounts .label i { color: #8a63d2; }
@media (max-width: 1023px) {
    #stake-pool-dashboard .cv-inactive-row { grid-template-columns: 40px minmax(0, 1fr); }
    #stake-pool-dashboard .cv-inactive-meta,
    #stake-pool-dashboard .cv-inactive-stake { grid-column: 2; text-align: left; }
    #stake-pool-dashboard .cv-donut-legend { flex-basis: 100%; }
}

/* ---- v2.4.0 round 3 ---- */
#stake-pool-dashboard .cv-zero-run { stroke: var(--secondary-text-color); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.55; }
#stake-pool-dashboard .cv-mini-spark path.cv-mini-idle { stroke: var(--secondary-text-color); stroke-dasharray: 2 3; opacity: 0.5; }
#stake-pool-dashboard .cv-mini-spark path.cv-mini-mark { stroke: #f5c518; stroke-width: 7; }
/* Pools table: the numbers sit close together, the pool and the share bar take the rest. */
#stake-pool-dashboard .cv-st { --cv-st-cols: minmax(200px, 1.6fr) 110px minmax(130px, 1fr) 70px 96px 100px 96px 120px 18px; }
#stake-pool-dashboard .cv-st.no-counts { --cv-st-cols: minmax(200px, 1.6fr) 110px minmax(130px, 1fr) 96px 100px 96px 120px 18px; }
#stake-pool-dashboard .cv-st-row { column-gap: 12px; }
#stake-pool-dashboard .cv-st-row.is-past { color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-st-row.is-past .cv-flow-logo,
#stake-pool-dashboard .cv-src-card.is-past .card-header-logo { filter: grayscale(1); opacity: 0.6; }
#stake-pool-dashboard .cv-src-card.is-past .pool-name { color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-past-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
#stake-pool-dashboard .cv-src-card.is-past .cv-vd-past-line { margin: 0 0 10px; }
#stake-pool-dashboard .cv-vd-past-badge {
    padding: 1px 8px; border: 1px solid var(--border-color); border-radius: 999px;
    font-size: 11px; font-weight: 600; color: var(--secondary-text-color); white-space: nowrap;
}
#stake-pool-dashboard .cv-vd-filter { margin-top: 12px; font-size: 13px; color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-filter b { color: var(--text-color); }
#stake-pool-dashboard .cv-vd-linkbtn { padding: 0; border: 0; background: none; color: var(--header-color); font: inherit; text-decoration: underline; cursor: pointer; }
#stake-pool-dashboard .cv-vd-linkbtn:disabled { color: var(--secondary-text-color); text-decoration: none; cursor: default; }
/* Donut: a slice or a legend row picks a pool for the list below. */
#stake-pool-dashboard button.cv-donut-row { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
#stake-pool-dashboard button.cv-donut-row:hover,
#stake-pool-dashboard .cv-donut-row.is-selected { background: var(--bg-color); }
#stake-pool-dashboard .cv-donut-row.is-selected .cv-donut-name { color: var(--header-color); font-weight: 600; }
#stake-pool-dashboard .cv-donut-svg.has-selection .cv-donut-seg { opacity: 0.35; }
#stake-pool-dashboard .cv-donut-svg.has-selection .cv-donut-seg.is-selected { opacity: 1; stroke-width: 27; }
#stake-pool-dashboard .cv-donut-more span { border-bottom: 1px dashed var(--secondary-text-color); cursor: help; }
/* Cards by category: sections stand next to each other, a category with one
   card takes one column instead of a whole row. */
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin-top: 16px; }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section { min-width: 0; margin: 0; }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n2 { grid-column: span 2; }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 { grid-column: 1 / -1; }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section .sp-groups-grid { grid-template-columns: minmax(0, 1fr); }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n2 .sp-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 .sp-groups-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-header .title { font-size: 18px; }
/* Notes about the present on a past-epoch page are neutral, not yellow. */
#stake-pool-dashboard .cv-vd-then-item.is-now,
body.dark-theme-body #stake-pool-dashboard .cv-vd-then-item.is-now { border-color: var(--border-color); background: var(--bg-color); color: var(--secondary-text-color); }
#stake-pool-dashboard .cv-vd-then-item.is-now b { color: var(--text-color); }
#stake-pool-dashboard .cv-vd-unit { font-size: 0.72em; font-weight: 600; color: var(--secondary-text-color); }
/* Metric cards: six compact tiles in one row on wide screens. */
@media (min-width: 1100px) {
    #stake-pool-dashboard .pool-metrics-grid.cv-vd-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 10px !important; }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-card { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; padding: 12px 14px !important; }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-icon { width: auto !important; font-size: 16px !important; }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-value { font-size: 16px !important; overflow-wrap: anywhere; }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-label { font-size: 11px !important; }
}
/* Pool page: rank of the validator inside the pool. */
#stake-pool-dashboard .pv-rank { flex-shrink: 0; min-width: 34px; font-size: 13px; font-weight: 700; color: var(--secondary-text-color); text-align: center; }
/* Inactive validators in the search results. */
#stake-pool-dashboard a.cv-inactive-avatar { overflow: hidden; text-decoration: none; }
#stake-pool-dashboard .cv-inactive-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
#stake-pool-dashboard a.cv-inactive-name { color: var(--text-color); text-decoration: none; }
#stake-pool-dashboard a.cv-inactive-name:hover { color: var(--header-color); }
#stake-pool-dashboard .cv-inactive-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#stake-pool-dashboard .cv-inactive-chips:empty { display: none; }
#stake-pool-dashboard .cv-inactive-chips .cv-meta { margin: 0; }
/* Sub-header: label and title share a baseline, the logo is centred on them. */
.cv-subheader-logo { display: flex; align-items: center; align-self: center; line-height: 0; }
/* A tooltip pinned by a click: solid, outlined, selectable. */
.pool-tooltip.is-pinned {
    pointer-events: auto; user-select: text; -webkit-user-select: text; background-color: rgba(255, 255, 255, 0.98);
    border-color: var(--header-color); box-shadow: 0 0 0 1px var(--header-color), 0 12px 36px rgba(0, 0, 0, 0.25);
}
body.dark-theme-body .pool-tooltip.is-pinned { background-color: rgba(30, 30, 30, 0.98); border-color: #2dd4bf; box-shadow: 0 0 0 1px #2dd4bf, 0 12px 36px rgba(0, 0, 0, 0.5); }
@media (max-width: 1099px) {
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n2,
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 { grid-column: 1 / -1; }
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 .sp-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
}
@media (max-width: 720px) {
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow { grid-template-columns: minmax(0, 1fr); }
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n2,
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 { grid-column: auto; }
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section .sp-groups-grid,
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n2 .sp-groups-grid,
    #stake-pool-dashboard .cv-vd-sources .cv-cat-flow .category-section.cv-cat-n3 .sp-groups-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- v2.4.0 round 4 ---- */
/* One arrow for every name that opens another page of the dashboard. */
#stake-pool-dashboard svg.cv-go {
    display: inline-block; width: 0.82em; height: 0.82em; margin-left: 0.32em; vertical-align: -0.06em; fill: none;
    stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.15s ease;
}
#stake-pool-dashboard a:hover svg.cv-go,
#stake-pool-dashboard .sp-pool-card .card-header:hover svg.cv-go { opacity: 1; }
@media (hover: none) {
    #stake-pool-dashboard svg.cv-go { opacity: 0.5; }
}
#stake-pool-dashboard .cv-nw { white-space: nowrap; }
/* Pools table: the name is the link; the small chart closes the row. */
#stake-pool-dashboard .cv-st { --cv-st-cols: minmax(210px, 1.7fr) 110px minmax(130px, 1fr) 70px 96px 100px 84px 132px; }
#stake-pool-dashboard .cv-st.no-counts { --cv-st-cols: minmax(210px, 1.7fr) 110px minmax(130px, 1fr) 96px 100px 84px 132px; }
#stake-pool-dashboard .cv-st-trend { padding-left: 12px; }
#stake-pool-dashboard a.cv-vd-src-name { color: var(--text-color); text-decoration: none; }
#stake-pool-dashboard .cv-src-card a.cv-src-link:hover .pool-name { color: var(--header-color); }
@media (min-width: 769px) {
    /* (in the narrow table the name of a staker opens the details of its row:
       it is not a link there and does not light up like one) */
    #stake-pool-dashboard a.cv-vd-src-name:hover { color: var(--header-color); }
}
/* Which pools to show (next to Table / Cards). */
#stake-pool-dashboard .cv-vd-head-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
#stake-pool-dashboard .cv-vd-count { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(128, 128, 128, 0.22); font-size: 11px; font-weight: 600; }
#stake-pool-dashboard .cv-vd-toggle button.active .cv-vd-count { background: rgba(255, 255, 255, 0.28); }
#stake-pool-dashboard .cv-vd-kept { font-size: 12px; font-style: italic; color: var(--secondary-text-color); cursor: help; }
/* Donut legend: pool logos next to the colour dots. */
#stake-pool-dashboard .cv-donut-row .cv-flow-logo { flex: 0 0 20px; width: 20px; height: 20px; }
/* Validators list: the mark of a validator that is inactive now (past epochs). */
#stake-pool-dashboard .cv-gone-line { margin: 1px 0 2px; }
#stake-pool-dashboard .cv-gone-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid rgba(220, 53, 69, 0.35); border-radius: 999px;
    background: rgba(220, 53, 69, 0.1); color: #dc3545; font-size: 11px; font-weight: 600;
}
#stake-pool-dashboard .stake-stat.active[data-cv-flow] { cursor: default; }
/* Tooltip pieces (tooltips live in body, so no dashboard scope). */
.cv-tip-who { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(128, 128, 128, 0.3); font-size: 13px; font-weight: 700; }
.cv-tip-who .cv-flow-logo { flex: 0 0 22px; width: 22px; height: 22px; }
.pool-tooltip-title.cv-tip-pool { display: flex; align-items: center; gap: 8px; }
.cv-tip-dim { margin-left: 6px; font-weight: 400; opacity: 0.65; }
/* Sub-header: logo, label and title centred on one line. */
.cv-subheader-text { align-items: center; }
.cv-subheader-kind { position: relative; top: 1px; line-height: 1; }
.cv-subheader-title { line-height: 1.25; }

/* ---- v2.4.0 round 5 ---- */
/* A staker's logo opens its page too; on small screens a corner icon does
   (there is no hover arrow there). */
#stake-pool-dashboard a.cv-st-logo { display: flex; flex-shrink: 0; border-radius: 50%; }
@media (min-width: 769px) {
    #stake-pool-dashboard a.cv-st-logo:hover .cv-flow-logo { box-shadow: 0 0 0 2px var(--header-color); }
}
#stake-pool-dashboard .cv-corner { display: none; padding: 4px; color: var(--secondary-text-color); font-size: 13px; line-height: 1; text-decoration: none; }
#stake-pool-dashboard .cv-corner:hover { color: var(--header-color); }
/* Docs: the card about the validator page spans both columns. */
#stake-pool-dashboard .docs-grid-main .doc-wide { grid-column: 1 / -1; }
@media (min-width: 1280px) {
    /* Stake numbers of a list row, a little larger where there is room (narrower rows would wrap). */
    #stake-pool-dashboard .validator-item .stake-stat { font-size: 14.5px; }
    #stake-pool-dashboard .validator-item .stake-stat i { font-size: 13px; }
}
@media (max-width: 1023px) {
    #stake-pool-dashboard .cv-src-card .cv-corner { display: block; flex-shrink: 0; margin-left: auto; }
    #stake-pool-dashboard .cv-st svg.cv-go,
    #stake-pool-dashboard .cv-src-card svg.cv-go { display: none; }
}
@media (max-width: 768px) {
    #stake-pool-dashboard .cv-vd-head-tools { justify-content: flex-start; width: 100%; }
    /* Top card on phones: the cluster and the validators count give way (the count is in the list below). */
    #stake-pool-dashboard .sp-summary-card.cv-phone-hide { display: none; }
}

/* ---- v2.4.0 round 6 ---- */
/* A logo inside a link keeps its own colour (the Other Stakes icon is drawn with currentColor). */
#stake-pool-dashboard a.cv-st-logo { color: inherit; }
/* Stakers with no stake in the epoch: the numbers step back, the chart stays. */
#stake-pool-dashboard .cv-st-row.is-past .cv-st-c:not(.cv-st-source):not(.cv-st-trend) { opacity: 0.45; }
#stake-pool-dashboard .cv-src-card.is-past .stat-item .value,
#stake-pool-dashboard .cv-src-card.is-past .breakdown-item .value { color: var(--secondary-text-color); }
/* "Viewing past epoch" pill of the pool and validator pages in the dark theme
   (the older rule looked for .dark-theme above the dashboard root and never matched). */
body.dark-theme-body #stake-pool-dashboard .pool-epoch-stale { border-color: #5c4a10; background: #3a2d07; color: #ffd166; }
/* Docs: icons lead the lines of the validator page card. */
#stake-pool-dashboard .doc-wide ul { padding-left: 0; list-style: none; }
#stake-pool-dashboard .doc-wide li { position: relative; padding-left: 30px; }
#stake-pool-dashboard .doc-wide li > i:first-child { position: absolute; left: 0; top: 0.3em; width: 20px; text-align: center; color: var(--header-color); }
#stake-pool-dashboard .doc-wide .cv-doc-i { margin: 0 2px; color: var(--header-color); }
#stake-pool-dashboard .doc-wide .cv-doc-i.is-past { color: #d9a400; }
@media (max-width: 480px) {
    /* Phones: the past-epoch pill and the epoch select share one row. */
    #stake-pool-dashboard .controls-left,
    #stake-pool-dashboard .pool-controls-left { flex-wrap: nowrap; gap: 8px; }
    #stake-pool-dashboard .controls-left .epoch-control .label,
    #stake-pool-dashboard .pool-controls-left .pool-epoch-control .label { display: none; }
    #stake-pool-dashboard .epoch-stale,
    #stake-pool-dashboard .pool-epoch-stale { flex-shrink: 0; padding: 6px 9px; white-space: nowrap; }
    #stake-pool-dashboard #epoch-select,
    #stake-pool-dashboard #pool-epoch-select,
    #stake-pool-dashboard #validator-epoch-select { min-width: 0; }
}

/* ---- v2.4.0 round 7 ---- */
/* Donut: the ring and the legend hang from the top of the block, so the ring
   keeps its place when the legend gets longer or shorter between epochs. */
#stake-pool-dashboard .cv-vd-donut { align-items: flex-start; }

/* ============================================
   ISOMETRIC POOL SPRITES (v3.0.0)
   Places marked with data-logo-iso show the isometric sprite of a pool.
   The sprite stands on its own: no plate, no border, no padding.
   A pool without a sprite (or a sprite that failed to load) shows its
   flat logo in the same manner: no plate, turned a little, with a side
   face drawn by stacked shadows, so the row keeps one style.
   Small places (tooltips, legends, sort buttons, the bubbles of the
   validators list) are not marked and keep the flat logo on its plate.
   ============================================ */
#stake-pool-dashboard { --iso-side: #35575d; }
body.dark-theme-body #stake-pool-dashboard { --iso-side: #93a8ab; }

/* Wrappers lose the plate. */
#stake-pool-dashboard .card-header-logo:has(> img[data-logo-iso]),
#stake-pool-dashboard .cv-st .cv-flow-logo:has(> img[data-logo-iso]),
#stake-pool-dashboard .pool-validators-stat-card .stat-icon:has(> img[data-logo-iso]),
#stake-pool-dashboard .stake-distribution-block .stake-distribution-center:has(> img[data-logo-iso]) {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;
}
/* Stakers table on the validator page: the row logo grows to 40 px. */
#stake-pool-dashboard .cv-st .cv-flow-logo:has(> img[data-logo-iso]) {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}
#stake-pool-dashboard .pool-validators-stat-card .stat-icon:has(> img[data-logo-iso]) {
    width: 40px;
    height: 40px;
}
/* Pool page: the header image is its own plate. */
#stake-pool-dashboard .pool-detail-image[data-logo-iso] {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

/* The sprite itself. */
#stake-pool-dashboard .card-header-logo > img[data-logo-iso][src^="/pool-logos/"],
#stake-pool-dashboard .cv-st .cv-flow-logo > img[data-logo-iso][src^="/pool-logos/"],
#stake-pool-dashboard .pool-validators-stat-card .stat-icon > img[data-logo-iso][src^="/pool-logos/"] {
    padding: 0;
    object-fit: contain;
}
#stake-pool-dashboard .pool-detail-image[data-logo-iso][src^="/pool-logos/"] {
    padding: 0 !important;
}
/* A square sprite inside the round hole of the donut: 15% padding keeps
   its corners inside the ring. */
#stake-pool-dashboard .stake-distribution-block .stake-distribution-center > img[data-logo-iso][src^="/pool-logos/"] {
    padding: 15%;
}

/* The flat logo standing in for a sprite. */
#stake-pool-dashboard .card-header-logo > img[data-logo-iso]:not([src^="/pool-logos/"]),
#stake-pool-dashboard .cv-st .cv-flow-logo > img[data-logo-iso]:not([src^="/pool-logos/"]),
#stake-pool-dashboard .pool-validators-stat-card .stat-icon > img[data-logo-iso]:not([src^="/pool-logos/"]) {
    padding: 10%;
    object-fit: contain;
    transform: skewY(-14deg) scaleX(0.88);
    filter: drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side));
}
#stake-pool-dashboard .pool-detail-image[data-logo-iso]:not([src^="/pool-logos/"]) {
    padding: 6px !important;
    transform: skewY(-14deg) scaleX(0.88);
    filter: drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side));
}
#stake-pool-dashboard .stake-distribution-block .stake-distribution-center > img[data-logo-iso]:not([src^="/pool-logos/"]) {
    padding: 18%;
    transform: skewY(-14deg) scaleX(0.88);
    filter: drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side));
}

/* ============================================
   STAKEMAP 3.0.0 DETAILS
   ============================================ */
/* Pool cards of the main view: the name is the way to the pool page, so it
   takes the link colour under the pointer, like names do elsewhere. */
#stake-pool-dashboard .sp-pool-card .card-header .pool-name { transition: color 0.15s ease; }
#stake-pool-dashboard .sp-pool-card:not(.sp-pool-card-nonclickable) .card-header:hover .pool-name { color: var(--header-color); }

/* "Other Stakes" in the stakers table of the validator page: the same size
   as the sprites next to it, the glyph in the proportion of the cards. */
#stake-pool-dashboard .cv-st .cv-flow-logo.is-other {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}
#stake-pool-dashboard .cv-st .cv-flow-logo.is-other svg {
    width: 58%;
    height: 58%;
}

/* A signpost from the map kit next to the Documentation title. */
#stake-pool-dashboard .cv-docs-title .cv-decor-sign {
    width: 46px;
    height: 50px;
    margin: -14px 0 -8px 14px;
    vertical-align: middle;
    pointer-events: none;
    user-select: none;
}

/* ============================================
   PALETTE (v3.0.0)
   Cream paper for the light page and the brand teal as the accent, in
   place of the earlier grey page and blue accent. Everything follows
   through the variables; removing this block brings the earlier colours
   back. Status colours keep their meaning: green = activating or latest,
   red = deactivating, yellow = a past epoch.
   ============================================ */
.sofzp-dashboard-section {
    --bg-color: #faf6ea; --card-bg: #ffffff; --border-color: #e7e0cc; --logo-bg: #f3efe2;
    --header-color: #0c7c73;
    --sparkline-color: #0c7c73; --sparkline-gradient-start: rgba(12, 124, 115, 0.28); --sparkline-gradient-end: rgba(12, 124, 115, 0);
    --chart-bg-color: rgba(12, 124, 115, 0.05);
}
.sofzp-dashboard-section.dark-theme {
    --bg-color: #14130f; --card-bg: #1f1e1a; --border-color: #38352d; --logo-bg: #2b2a25;
    --header-color: #2dd4bf;
    --sparkline-color: #2dd4bf; --sparkline-gradient-start: rgba(45, 212, 191, 0.28); --sparkline-gradient-end: rgba(45, 212, 191, 0);
    --chart-bg-color: rgba(45, 212, 191, 0.05);
}
/* The dark-theme accent is light, so text and icons on an accent fill
   turn dark there (white on it was hard to read). */
body.dark-theme-body #stake-pool-dashboard .sp-tab-link.active,
body.dark-theme-body #stake-pool-dashboard .sort-btn.active,
body.dark-theme-body #stake-pool-dashboard .validators-sort-btn.active,
body.dark-theme-body #stake-pool-dashboard .validators-load-more-btn,
body.dark-theme-body #stake-pool-dashboard .epoch-dynamics-scale-toggle.active,
body.dark-theme-body #stake-pool-dashboard .pool-validators-sort-btn.active,
body.dark-theme-body #stake-pool-dashboard .cv-vd-toggle button.active {
    color: #062a27;
}
/* The Learn More / Website button is filled on wide screens only; on
   narrow ones it is an outline and keeps the accent colour for its text. */
@media (min-width: 769px) {
    body.dark-theme-body #stake-pool-dashboard .pool-official-link,
    body.dark-theme-body #stake-pool-dashboard .pool-official-link:hover {
        color: #062a27 !important;
    }
}

/* ============================================
   THE "OTHER" SPRITE (v3.0.0)
   ============================================ */
/* A group without a registry image ("Other Stakes") with a sprite of its
   own: the sprite sits in front of the glyph, the glyph is the fallback. */
#stake-pool-dashboard .card-header-logo:has(> img[data-logo-stem]) > svg,
#stake-pool-dashboard .cv-flow-logo:has(> img[data-logo-stem]) > svg,
#stake-pool-dashboard .pool-detail-svg-fallback:has(> img[data-logo-stem]) > svg {
    display: none;
}
#stake-pool-dashboard .pool-detail-svg-fallback:has(> img[data-logo-stem]) {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
#stake-pool-dashboard .pool-detail-svg-fallback > img[data-logo-stem] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   MAIN NAVIGATION (v3.0.0): Pools / Validators / Documentation
   Three stations in one bar in place of the tab ears: the open one is
   filled, each carries its piece of the map kit (a flagged plot, a
   building that follows the theme, a signpost).
   ============================================ */
#stake-pool-dashboard .sp-tabs-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    margin-bottom: 22px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
#stake-pool-dashboard .sp-tab-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 60px;
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--bg-color);
    box-shadow: none;
    transform: none;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#stake-pool-dashboard .sp-tab-link::before {
    content: none;
}
#stake-pool-dashboard .sp-tab-link:hover {
    background: var(--bg-color);
    border-color: var(--header-color);
    color: var(--header-color);
    transform: none;
    box-shadow: none;
}
#stake-pool-dashboard .sp-tab-link.active,
#stake-pool-dashboard .sp-tab-link.active:hover {
    background: var(--header-color);
    border-color: var(--header-color);
    color: #fff;
    font-weight: 700;
    transform: none;
    box-shadow: none;
}
#stake-pool-dashboard .cv-nav-ico {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}
#stake-pool-dashboard .cv-nav-short {
    display: none;
}
/* A piece that has a day and a night version follows the page theme. */
:root[data-theme='dark'] #stake-pool-dashboard .cv-only-light,
:root:not([data-theme='dark']) #stake-pool-dashboard .cv-only-dark {
    display: none;
}
@media (max-width: 768px) {
    #stake-pool-dashboard .sp-tabs-nav {
        gap: 6px;
        padding: 6px;
        margin-bottom: 18px;
    }
    #stake-pool-dashboard .sp-tab-link {
        flex-direction: column;
        gap: 2px;
        min-height: 0;
        padding: 8px 4px 9px;
        font-size: 13px;
        text-align: center;
    }
    #stake-pool-dashboard .cv-nav-ico {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    #stake-pool-dashboard .cv-nav-full {
        display: none;
    }
    #stake-pool-dashboard .cv-nav-short {
        display: inline;
    }
}

/* ============================================
   SMALL THINGS (v3.0.0)
   ============================================ */
/* Documentation title: the signpost follows the text on wide screens and
   moves to the free right side when the title wraps on narrow ones. */
#stake-pool-dashboard .cv-docs-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
#stake-pool-dashboard .cv-docs-title .cv-decor-sign {
    flex: none;
    margin: -14px 0 -8px 0;
}
@media (max-width: 768px) {
    #stake-pool-dashboard .cv-docs-title .cv-decor-sign {
        margin-left: auto;
    }
}

/* A label with a shorter twin for narrow screens. */
#stake-pool-dashboard .cv-narrow-only { display: none; }
@media (max-width: 480px) {
    #stake-pool-dashboard .cv-wide-only { display: none; }
    #stake-pool-dashboard .cv-narrow-only { display: inline; }
}
.support-banner .support-links a { white-space: nowrap; }

/* Bar under the header: on a tab it shows the piece of the map kit of
   that tab instead of a plain glyph. */
.cv-subheader-logo .cv-flow-logo.is-kit {
    width: 30px;
    height: 30px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;
}
.cv-subheader-logo .cv-flow-logo.is-kit img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}
:root[data-theme='dark'] .cv-subheader-logo .cv-only-light,
:root:not([data-theme='dark']) .cv-subheader-logo .cv-only-dark {
    display: none;
}

/* Support buttons of the Documentation tab: the brand teal in place of the
   bright one, on which white text was hard to read in the light theme. */
.support-banner .support-links a {
    background-color: #0c7c73 !important;
}
.support-banner .support-links a:hover {
    background-color: #0a675f !important;
    box-shadow: 0 8px 18px rgba(12, 124, 115, 0.3);
}
.dark-theme .support-banner .support-links a {
    background-color: #0f8f84 !important;
}
.dark-theme .support-banner .support-links a:hover {
    background-color: #12a195 !important;
}

/* ============================================
   TOP OF THE PAGE (v3.1.0)
   The bar under the header carries the way back to a list, the epoch
   picker and the freshness of the data. The breadcrumbs row, the epoch
   selectors inside the pages and the info card above the chart are gone
   from view. The hidden elements stay in the markup: the code keeps its
   state in them (selected epoch, past-epoch flag, the breadcrumb route).
   ============================================ */
#stake-pool-dashboard #breadcrumbs-nav,
#stake-pool-dashboard #main-dashboard-view > .controls-bar,
#stake-pool-dashboard #pool-detail-view .pool-controls-bar,
#stake-pool-dashboard #validator-detail-view .pool-controls-bar {
    display: none !important;
}
#stake-pool-dashboard #info-notes-container:empty {
    display: none;
}
/* The stake block is the first thing on the main page now: no divider above it. */
#stake-pool-dashboard #summary-container .total-stake-card {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
/* Scroll targets stop below the sticky header and the bar: the script
   measures the offset into --cv-sticky-offset, and the page-level
   scroll-padding-top in the site's global.css reads it. The table section
   needs no margin of its own any more. */
#stake-pool-dashboard .pool-validators-section {
    scroll-margin-top: 0;
}

/* The way back to the list on a pool or a validator page. */
.cv-sub-crumb {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin: 0 0 0 -4px;
    padding: 3px 8px 3px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: #495057;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cv-sub-crumb:hover {
    background: rgba(128, 128, 128, 0.14);
    color: #212529;
}
body.dark-theme-body .cv-sub-crumb {
    color: #c3c8cd;
}
body.dark-theme-body .cv-sub-crumb:hover {
    color: #f1f3f5;
}
.cv-sub-crumb[hidden],
.cv-sub-sep[hidden],
.cv-ep-meta[hidden] {
    display: none;
}
.cv-sub-crumb-logo {
    display: flex;
    line-height: 0;
}
.cv-sub-crumb-logo .cv-flow-logo.is-kit {
    width: 26px;
    height: 26px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    overflow: visible;
}
.cv-sub-crumb-logo .cv-flow-logo.is-kit img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: contain;
}
:root[data-theme='dark'] .cv-sub-crumb-logo .cv-only-light,
:root:not([data-theme='dark']) .cv-sub-crumb-logo .cv-only-dark {
    display: none;
}
.cv-sub-sep {
    flex-shrink: 0;
    font-size: 10px;
    color: #adb5bd;
}

/* The epoch number is a picker: a native select lies over it. */
.cv-ep-num {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.cv-ep-caret {
    font-size: 10px;
    opacity: 0.75;
}
.cv-ep-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px;
    color: #212529;
    background: #ffffff;
}
body.dark-theme-body .cv-ep-select {
    color: #f1f3f5;
    background: #1f1e1a;
}
.cv-ep-num:hover {
    filter: brightness(0.95);
}
.cv-ep-num:focus-within {
    outline: 2px solid #0c7c73;
    outline-offset: 1px;
}
body.dark-theme-body .cv-ep-num:focus-within {
    outline-color: #2dd4bf;
}
.cv-ep-meta {
    margin-left: 6px;
    font-size: 12.5px;
    color: #6c757d;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
body.dark-theme-body .cv-ep-meta {
    color: #9aa0a6;
}
.cv-ep-pct {
    font-weight: 600;
}
.cv-ep-past {
    font-weight: 600;
    color: #b45309;
}
body.dark-theme-body .cv-ep-past {
    color: #f59e0b;
}
@media (max-width: 760px) {
    .cv-ep-ago {
        display: none;
    }
}
@media (max-width: 600px) {
    /* Narrow screens: the kit piece alone is the way back, and the name of
       the pool or the validator gets the room. */
    .cv-subheader-inner {
        gap: 6px;
    }
    .cv-sub-crumb {
        padding: 3px 2px;
    }
    .cv-sub-crumb-title,
    .cv-sub-sep {
        display: none;
    }
    .cv-subheader-epochs .cv-ep-btn {
        width: 26px;
    }
    .cv-ep-meta {
        display: none;
    }
    .cv-ep-btn[data-ep="latest"]:disabled {
        display: none;
    }
}

/* ============================================
   FIXES AFTER THE FIRST LOCAL REVIEW (v3.1.0)
   ============================================ */
/* Learn More / Website as an outline (narrow screens): the hover state of
   the filled button made its text white on a light page. */
@media (max-width: 768px) {
    #stake-pool-dashboard .pool-official-link:hover,
    #stake-pool-dashboard .pool-official-link:focus-visible {
        color: var(--header-color) !important;
        background: var(--chart-bg-color) !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }
}

/* Validator page: the name copies like the ID and Vote keys next to it -
   it IS a key button (the same cursor, hover and "copied" states); only the
   type is the heading's. */
#stake-pool-dashboard .cv-key.cv-key-name {
    gap: 10px;
    padding: 2px 8px;
    margin-left: -8px;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: var(--text-color);
    text-align: left;
}
#stake-pool-dashboard .cv-key.cv-key-name.is-copied {
    color: #28a745;
}
/* The text wraps between words; a single long word (a key) breaks only when
   it cannot fit. "anywhere" would let the name shrink to one letter per line. */
#stake-pool-dashboard .cv-key.cv-key-name .cv-key-name-text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}
#stake-pool-dashboard .cv-key.cv-key-name .cv-copy-icon,
#stake-pool-dashboard .cv-key.cv-key-name .cv-copied-icon {
    flex-shrink: 0;
    font-size: 14px;
}
/* A full key inside a tooltip breaks instead of running out of the box. */
.pool-tooltip.cv-tip .cv-tip-line {
    overflow-wrap: anywhere;
}

/* Validator page, the chart with the Accounts / Rank switch on narrow
   screens: the validator's name always sits on its own line under the
   title, so the header keeps one shape in both modes. */
@media (max-width: 600px) {
    #stake-pool-dashboard .cv-vd-aux-block h3 #cv-vd-aux-title {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
    }
    #stake-pool-dashboard .cv-vd-aux-block h3 .cv-vd-toggle {
        flex-shrink: 0;
    }
    #stake-pool-dashboard .cv-vd-aux-block h3 #cv-vd-aux-title .cv-vd-of {
        margin-left: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Validator page, Stakers on narrow screens: three separate groups - which
   stakers (left), how to show them (right, two icons), and the sorting on
   its own row under a divider. Labels never break inside a button; when
   the two switches do not fit in one row, the view switch drops below. */
@media (max-width: 768px) {
    #stake-pool-dashboard .cv-vd-head-tools {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    #stake-pool-dashboard .cv-vd-head-tools #cv-vd-view-toggle {
        margin-left: auto;
    }
    #stake-pool-dashboard .cv-vd-head-tools .cv-vd-toggle button {
        white-space: nowrap;
    }
    #stake-pool-dashboard .cv-vd-sortbar {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
    }
}
@media (max-width: 560px) {
    /* Phones: the two switches take the full width, one under another, in
       equal halves - one left edge and one right edge for both. */
    #stake-pool-dashboard .cv-vd-head-tools {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
    }
    #stake-pool-dashboard .cv-vd-head-tools #cv-vd-scope:empty {
        display: none;
    }
    #stake-pool-dashboard .cv-vd-head-tools .cv-vd-toggle {
        display: flex;
        width: 100%;
    }
    #stake-pool-dashboard .cv-vd-head-tools .cv-vd-toggle button {
        flex: 1 1 0;
        justify-content: center;
        padding: 8px 10px;
    }
    #stake-pool-dashboard .cv-vd-head-tools #cv-vd-view-toggle {
        margin-left: 0;
    }
}

/* Main page on phones: the four stake cards stand two in a row with short
   numbers (the full number is in the tooltip), so the charts and the cards
   take about one screen. */
.cv-num-short {
    display: none;
}
@media (max-width: 560px) {
    #stake-pool-dashboard .total-stake-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-width: none;
    }
    .cv-num-full {
        display: none;
    }
    .cv-num-short {
        display: inline;
    }
}

/* The cards under the validators search (the Validators tab and a pool
   page) on phones: two in a row with short numbers, like the main cards. */
@media (max-width: 560px) {
    #stake-pool-dashboard #validators-stats-summary,
    #stake-pool-dashboard .pool-validators-stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #stake-pool-dashboard .validators-stat-card,
    #stake-pool-dashboard .pool-validators-stat-card {
        min-width: 0;
        padding: 10px;
        gap: 8px;
    }
    #stake-pool-dashboard .validators-stat-card > img.cv-ico,
    #stake-pool-dashboard .pool-validators-stat-card .stat-icon.stat-icon-plain img.cv-ico {
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .validators-stat-card .stat-info,
    #stake-pool-dashboard .pool-validators-stat-card .stat-info {
        min-width: 0;
    }
    #stake-pool-dashboard .validators-stat-card .stat-value,
    #stake-pool-dashboard .pool-validators-stat-card .stat-value {
        font-size: 17px;
        line-height: 1.15;
    }
    #stake-pool-dashboard .validators-stat-card .stat-label,
    #stake-pool-dashboard .pool-validators-stat-card .stat-label {
        font-size: 11px;
        line-height: 1.2;
    }
}

/* The notes block of a pool page is gone like the one of the main page
   (the counting rule is in the Documentation, the bar marks a past epoch). */
#stake-pool-dashboard .pool-validators-info-notes:empty {
    display: none;
}
/* Compact cards on phones: the "in epoch N" note gives way, the bar under
   the header already shows the epoch. */
@media (max-width: 560px) {
    #stake-pool-dashboard .total-stake-item .epoch-inline-note,
    #stake-pool-dashboard .validators-stat-card .epoch-inline-note,
    #stake-pool-dashboard .pool-validators-stat-card .epoch-inline-note {
        display: none;
    }
}

/* The past-epoch badge of a pool page looks and sits like the one of the
   Validators tab. */
.pool-validators-sort-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid #ffe08a;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5b00;
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
}
.dark-theme .pool-validators-sort-badge {
    border-color: #5c4a10;
    background: #3a2d07;
    color: #ffd166;
}
@media (max-width: 768px) {
    .pool-validators-sort-badge {
        order: -1;
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
        justify-content: center;
    }
}

/* A tooltip that names a pool: a lead line, then the pool's logo and name. */
.pool-tooltip.cv-flow-tip .cv-tip-lead {
    margin-bottom: 6px;
    font-size: 12px;
    opacity: 0.8;
}
.pool-tooltip.cv-flow-tip .cv-tip-lead + .pool-tooltip-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Validator page, the cards under the name on phones: short numbers and no
   "in epoch N" (the bar under the header shows the epoch). */

/* ============================================
   STAT CARD ICONS AND COMPACT CARDS (v3.1.0)
   The isometric icons of the StakeMap set stand in the stat cards of all
   three pages; controls and small glyphs stay flat.
   ============================================ */
#stake-pool-dashboard img.cv-ico {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
}
#stake-pool-dashboard .total-stake-item img.cv-ico {
    width: 44px;
    height: 44px;
}
#stake-pool-dashboard .validators-stat-card > img.cv-ico {
    width: 36px;
    height: 36px;
}
#stake-pool-dashboard .pool-validators-stat-card .stat-icon.stat-icon-plain {
    width: auto;
    height: auto;
}
#stake-pool-dashboard .pool-validators-stat-card .stat-icon.stat-icon-plain img.cv-ico {
    width: 36px;
    height: 36px;
}
#stake-pool-dashboard .pool-metric-card img.cv-ico-metric {
    width: 36px;
    height: 36px;
}
#stake-pool-dashboard .cv-vd-metrics .pool-metric-card img.cv-ico-metric {
    width: 32px;
    height: 32px;
}
@media (max-width: 560px) {
    /* A number never breaks inside a compact card. */
    #stake-pool-dashboard .validators-stat-card .stat-value,
    #stake-pool-dashboard .pool-validators-stat-card .stat-value {
        white-space: nowrap;
    }
}

/* Validator page header on phones: one centred column, as the header of a
   pool page is - the avatar, the name, the keys (two chips in one row,
   while they fit), the chips and the notes. The description under them
   stays at the left edge: it is text to read. */
@media (max-width: 560px) {
    /* (the base rules of this header carry !important, so these do too) */
    #stake-pool-dashboard .cv-vd-header .pool-header-left {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100%;
    }
    #stake-pool-dashboard .cv-vd-header .pool-header-info {
        align-items: center !important;
        width: 100%;
        min-width: 0;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-avatar,
    #stake-pool-dashboard .cv-vd-header .cv-vd-avatar .validator-image {
        width: 72px;
        height: 72px;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-avatar .validator-image.fallback {
        font-size: 26px;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-name-line {
        flex-direction: column;
        gap: 6px;
        max-width: 100%;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-keys,
    #stake-pool-dashboard .cv-vd-header .cv-vd-chips,
    #stake-pool-dashboard .cv-vd-header .cv-vd-then {
        justify-content: center;
        max-width: 100%;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-chips .cv-meta {
        justify-content: center;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-keys {
        gap: 6px;
    }
    /* A centred line holds nothing a visitor does not see: the name is
       centred by its letters alone, and the glyph of the copy stands out of
       the flow, right after the last letter (in the room the button keeps on
       both of its sides). */
    #stake-pool-dashboard .cv-vd-header .cv-key.cv-key-name {
        position: relative;
        display: block;
        margin: 0;
        padding: 2px 28px;
        text-align: center;
    }
    #stake-pool-dashboard .cv-vd-header .cv-key.cv-key-name .cv-copy-icon,
    #stake-pool-dashboard .cv-vd-header .cv-key.cv-key-name .cv-copied-icon {
        position: absolute;
        margin: 0.56em 0 0 8px;
    }
}
/* (the empty places of the name line take no gap) */
#stake-pool-dashboard .cv-vd-name-line > span:empty {
    display: none;
}
@media (min-width: 641px) {
    /* A wide header: the two keys stand one under the other, in chips of
       one width, with their short names and the keys in two columns. */
    #stake-pool-dashboard .cv-vd-header .cv-vd-keys {
        display: grid;
        grid-template-columns: minmax(0, max-content);
        justify-content: start;
        gap: 6px;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-keys .cv-keychip .cv-key-label {
        min-width: 30px;
        text-align: left;
    }
    #stake-pool-dashboard .cv-vd-header .cv-vd-keys .cv-keychip .cv-key-full {
        flex: 1 1 auto;
        text-align: left;
    }
}

/* Documentation: the heart of "Support the Project" is a piece of the set. */
#stake-pool-dashboard .cv-decor-heart {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    vertical-align: -7px;
}

/* ============================================
   TOP CARDS (v3.1.0)
   Phones: one shape on all three pages - the icon and the number in one
   row, the label under them, centred; no unit (the label names the
   measure). Desktop: larger icons and numbers on a validator page.
   These rules stand last, after the base sizes above.
   ============================================ */
@media (max-width: 939px) {
    /* Two cards in a row on the main page: stake and validators first, then
       activating and deactivating side by side. */
    #stake-pool-dashboard .total-stake-grid .total-stake-item:nth-child(1) { order: 1; }
    #stake-pool-dashboard .total-stake-grid .total-stake-item:nth-child(4) { order: 2; }
    #stake-pool-dashboard .total-stake-grid .total-stake-item:nth-child(2) { order: 3; }
    #stake-pool-dashboard .total-stake-grid .total-stake-item:nth-child(3) { order: 4; }
}
@media (max-width: 560px) {
    #stake-pool-dashboard .total-stake-item,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card {
        /* Two flexible side columns centre the pair "icon + number" and
           take the label's extra width, so a long label never pushes the
           icon away from its number. */
        display: grid !important;
        grid-template-columns: 1fr auto auto 1fr;
        align-items: center !important;
        gap: 4px 0 !important;
        padding: 10px 6px !important;
    }
    #stake-pool-dashboard .total-stake-item .stake-info,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .pool-metric-info {
        display: contents !important;
    }
    #stake-pool-dashboard .total-stake-item img.cv-ico,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card img.cv-ico-metric {
        grid-column: 2;
        grid-row: 1;
        width: 30px;
        height: 30px;
        margin-right: 8px;
    }
    #stake-pool-dashboard .total-stake-item .stake-info .value,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .pool-metric-value {
        grid-column: 3;
        grid-row: 1;
        font-size: 18px !important;
        line-height: 1.15;
        white-space: nowrap;
    }
    #stake-pool-dashboard .total-stake-item .stake-info .label,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .pool-metric-label {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        align-items: center;
        margin-top: 0;
        font-size: 11.5px !important;
        line-height: 1.2;
        text-align: center;
    }
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .cv-unit,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .cv-vd-unit,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .cv-vd-now {
        display: none;
    }
}
@media (max-width: 370px) {
    #stake-pool-dashboard .total-stake-item img.cv-ico,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card img.cv-ico-metric {
        width: 26px;
        height: 26px;
        margin-right: 6px;
    }
    #stake-pool-dashboard .total-stake-item .stake-info .value,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .pool-metric-value {
        font-size: 17px !important;
    }
}
@media (max-width: 340px) {
    #stake-pool-dashboard .total-stake-item img.cv-ico,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card img.cv-ico-metric {
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }
    #stake-pool-dashboard .total-stake-item .stake-info .value,
    #stake-pool-dashboard .pool-metrics-grid .pool-metric-card .pool-metric-value {
        font-size: 15px !important;
    }
}
@media (min-width: 561px) {
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-card img.cv-ico-metric {
        width: 40px;
        height: 40px;
    }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-value {
        font-size: 19px !important;
        white-space: nowrap;
        overflow-wrap: normal;
    }
}

/* ============================================
   POOL PLOTS (v3.2.0)
   A pool's sprite stands on a tile of the map: on its card of the Pools
   tab, on its card of a validator page and in the header of its own page.
   The script measures the drawn part of the sprite and places it (a wide
   logo takes more of the tile). A pool without a sprite, or with a sprite
   that failed to load, keeps the plain logo.
   ============================================ */
#stake-pool-dashboard { --plot-w: 128px; }
#stake-pool-dashboard .cv-plot:has(> img[data-logo-iso][src^="/pool-logos/"]) {
    position: relative;
    display: block;
    flex: 0 0 var(--plot-w);
    width: var(--plot-w);
    height: calc(var(--plot-w) * 0.9);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url("/brand/tiles/tile-light.webp") center bottom / 100% auto no-repeat;
    overflow: visible;
}
body.dark-theme-body #stake-pool-dashboard .cv-plot:has(> img[data-logo-iso][src^="/pool-logos/"]) {
    background-image: url("/brand/tiles/tile-dark.webp");
}
/* The sprite. These values hold it until the script has measured it. */
#stake-pool-dashboard .cv-plot > img[data-logo-iso][src^="/pool-logos/"] {
    position: absolute;
    left: 22%;
    top: 20%;
    width: 56%;
    height: auto;
    max-width: none;
    max-height: none;
    padding: 0;
    object-fit: contain;
}
/* The image of a pool page carries fixed sizes and a plate in its base
   styles (with !important), so the plot overrides them the same way. */
#stake-pool-dashboard .cv-plot > img.pool-detail-image[data-logo-iso][src^="/pool-logos/"] {
    width: 56% !important;
    height: auto !important;
    border: 0 !important;
}
/* Without a sprite the wrapper of a pool page steps aside. */
#stake-pool-dashboard #pool-detail-plot:not(:has(> img[data-logo-iso][src^="/pool-logos/"])) {
    display: contents;
}
/* "Other Stakes" on its page: the sprite stands on the plot, the glyph is
   the fallback. */
#stake-pool-dashboard .cv-plot:has(> img[data-logo-stem]) > .pool-detail-svg-fallback {
    display: none !important;
}
#stake-pool-dashboard #pool-detail-plot { --plot-w: 150px; }
/* Next to the plot a long pool name is shown in full: a little smaller and
   on up to four lines. */
#stake-pool-dashboard .sp-pool-card .card-header .pool-name,
#stake-pool-dashboard .cv-src-card .card-header .pool-name {
    font-size: 18px;
    -webkit-line-clamp: 4;
}
@media (max-width: 560px) {
    #stake-pool-dashboard { --plot-w: 112px; }
    /* Pool page on phones: the plot stands above the name, both centred,
       so a long name keeps the full width. */
    #stake-pool-dashboard #pool-detail-plot { --plot-w: 132px; }
    #stake-pool-dashboard .pool-header-left:has(> #pool-detail-plot > img[data-logo-iso][src^="/pool-logos/"]) {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
        text-align: center;
    }
    #stake-pool-dashboard .pool-header-left:has(> #pool-detail-plot > img[data-logo-iso][src^="/pool-logos/"]) .pool-header-info {
        align-items: center !important;
    }
    #stake-pool-dashboard .pool-header-left:has(> #pool-detail-plot > img[data-logo-iso][src^="/pool-logos/"]) .pool-categories-tags {
        justify-content: center;
    }
}

/* ============================================
   MAIN PAGE: TWO CHARTS (v3.2.0)
   The total active stake on the left; on the right the number of
   validators or the stake in motion. Both are drawn by the same function
   and keep one shape: a title row (the right chart's title is its switch),
   the chart, two labels at the edges.
   ============================================ */
#stake-pool-dashboard .cv-net-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    /* (the card centres its children on phones: the pair takes the full width itself) */
    align-self: stretch;
    width: 100%;
    margin-top: 15px;
    box-sizing: border-box;
}
#stake-pool-dashboard .cv-net-charts.is-single {
    grid-template-columns: minmax(0, 1fr);
}
/* The base rule makes this wrapper span the whole grid; inside the pair it
   takes one column. */
#stake-pool-dashboard .cv-net-charts .summary-chart-wrapper {
    grid-column: auto;
    min-width: 0;
    margin: 0;
}
#stake-pool-dashboard .cv-net-charts .summary-chart-wrapper .interactive-chart-container {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}
#stake-pool-dashboard .cv-net-charts .chart-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}
#stake-pool-dashboard .cv-net-charts .chart-title .cv-vd-toggle button {
    white-space: nowrap;
}
#stake-pool-dashboard .cv-net-charts .chart-range-labels > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-net-charts .chart-range-labels .cv-chart-ep {
    align-self: center;
}
/* The validators chart is purple, like the validators chart of a pool page. */
#stake-pool-dashboard .interactive-chart-container[data-chart-variant="validators"] {
    --sparkline-color: #9945FF;
    --sparkline-gradient-start: rgba(153, 69, 255, 0.3);
    --sparkline-gradient-end: rgba(153, 69, 255, 0);
}
#stake-pool-dashboard .interactive-chart-container[data-chart-variant="flow"] .chart-path-line {
    stroke-width: 1.8;
}
@media (max-width: 900px) {
    #stake-pool-dashboard .cv-net-charts {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
}
@media (max-width: 560px) {
    /* Each label is two centred lines: what it is (and its epoch pill),
       then the value. The same in every chart and in both modes. */
    #stake-pool-dashboard .cv-net-charts .chart-range-labels > span {
        flex: 1 1 0;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
        text-align: center;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels > span > .value {
        flex-basis: 100%;
        order: 3;
    }
}

/* ============================================
   VALIDATOR PAGE (v3.2.0)
   ============================================ */
/* The six cards under the name on wide screens: a larger icon on top, the
   number and its label under it, all centred (as on phones). */
@media (min-width: 561px) {
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-card {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center;
    }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-info {
        align-items: center !important;
    }
    #stake-pool-dashboard .cv-vd-metrics .pool-metric-card img.cv-ico-metric {
        width: 48px;
        height: 48px;
    }
}
/* Stakers table: the validator's totals stand in the first row. */
#stake-pool-dashboard .cv-st-total {
    background: var(--chart-bg-color);
    font-weight: 600;
}
#stake-pool-dashboard .cv-st-total .cv-st-total-ico {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
#stake-pool-dashboard .cv-st-total .cv-st-total-ico img.cv-ico {
    width: 34px;
    height: 34px;
}
/* Stakers without stake in the selected epoch (the "All epochs" scope):
   hatched and dimmed, so they never read as current ones. */
#stake-pool-dashboard .cv-st-row.is-past,
#stake-pool-dashboard .cv-src-card.is-past {
    background-color: var(--bg-color);
    background-image: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.10) 0 5px, transparent 5px 13px);
}
#stake-pool-dashboard .cv-src-card.is-past {
    border-style: dashed;
}
#stake-pool-dashboard .cv-st-row.is-past .cv-vd-src-name {
    font-weight: 500;
}
#stake-pool-dashboard .cv-st-group.cv-st-group-past {
    border-top: 2px dashed var(--border-color);
}
/* ==========================================================================
   SORT BARS (v3.2.0)
   One look for the four lists (pools, validators, the validators of a pool,
   the stakers of a validator): a small sign, then the options in a fixed
   order. The active option of a measure carries the caret of its direction.
   ========================================================================== */
.cv-sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
}
/* (on wide screens the options stand in the bar itself, next to its note) */
.cv-sortbar .cv-sort-row {
    display: contents;
}
.cv-sortbar .cv-sort-sign {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--secondary-text-color);
    font-size: 14px;
}
.cv-sortbar .sort-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
}
.cv-sortbar .sort-btn > i {
    font-size: 12px;
}
.cv-sortbar .sort-btn > .sort-arrow {
    margin-left: -1px;
    font-size: 11px;
}
.cv-sortbar .sort-btn > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cv-sortbar .sort-btn .pool-icon,
.cv-sortbar .sort-btn .sort-pool-icon,
.cv-sortbar .sort-btn .sort-pool-icon-initials {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 2px;
    border: 1px solid var(--logo-border);
    border-radius: 50%;
    background: var(--logo-bg);
    box-sizing: border-box;
    object-fit: contain;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-color);
}
.cv-sortbar .validators-sort-badge,
.cv-sortbar .pool-validators-sort-badge {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 12px;
}
@media (max-width: 560px) {
    /* Phones: the options are one row that scrolls sideways - nothing wraps,
       and nothing moves when an option gets its caret. The right edge fades
       while more options wait there. A note of the bar stands under the row;
       the past-epoch mark is left to the bar above. */
    .cv-sortbar {
        display: block;
        margin-bottom: 13px;
    }
    .cv-sortbar .cv-sort-row {
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding: 2px 0;
    }
    .cv-sortbar .cv-sort-row::-webkit-scrollbar {
        display: none;
    }
    .cv-sortbar .cv-sort-row.has-more {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    }
    .cv-sortbar .cv-sort-row.has-less {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
        mask-image: linear-gradient(90deg, transparent, #000 36px);
    }
    .cv-sortbar .cv-sort-row.has-less.has-more {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    }
    .cv-sortbar .cv-sort-sign {
        width: 18px;
    }
    .cv-sortbar .sort-btn {
        gap: 5px;
        padding: 7px 11px;
    }
    .cv-sortbar .validators-sort-badge,
    .cv-sortbar .pool-validators-sort-badge {
        display: none;
    }
    #stake-pool-dashboard .cv-sortbar .cv-vd-kept {
        display: block;
        margin-top: 8px;
    }
}

/* ==========================================================================
   CARD CELLS (v3.2.0)
   Under the chart of a pool card (Pools tab, stakers of a validator): small
   cells - the sign of a measure, its value and a small name. A cell with
   nothing in it is muted, so the cards where stake moves stand out.
   ========================================================================== */
#stake-pool-dashboard .cv-cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#stake-pool-dashboard .cv-cell {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: var(--bg-color);
}
#stake-pool-dashboard .cv-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
#stake-pool-dashboard .cv-cell img.cv-ico {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}
#stake-pool-dashboard .cv-cell-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: left;
}
#stake-pool-dashboard .cv-cell-text b {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-cell-text b.cv-vd-pos {
    color: #28a745;
}
#stake-pool-dashboard .cv-cell-text b.cv-vd-neg {
    color: #dc3545;
}
#stake-pool-dashboard .cv-cell-text small {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-cell.is-zero b,
#stake-pool-dashboard .cv-src-card.is-past .cv-cell b {
    font-weight: 500;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-cell.is-zero img.cv-ico {
    opacity: 0.4;
    filter: grayscale(0.7);
}

/* ==========================================================================
   POOL CARDS, SECOND PASS (v3.2.0)
   A card from top to bottom: the plot and the name, two head cells, the
   chart, four small cells, one line of the description, the site and keys.
   The same family on the Pools tab and among the stakers of a validator.
   ========================================================================== */
/* A card never asks for more width than its place has (phones under 400 px). */
#stake-pool-dashboard #groups-grid-container.sp-groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}
#stake-pool-dashboard #groups-grid-container .category-section .sp-groups-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
@media (min-width: 1100px) {
    #stake-pool-dashboard #groups-grid-container .category-section .sp-groups-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* The plot and the name are one real link to the page of the pool. */
#stake-pool-dashboard .sp-pool-card .card-header > .cv-card-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 15px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
#stake-pool-dashboard .sp-pool-card .card-header > .cv-card-link:hover .pool-name {
    color: var(--header-color);
}
/* A name next to its plot is never cut: a word longer than its line breaks,
   and on the narrowest phones the plot and the name are a little smaller. */
#stake-pool-dashboard .sp-pool-card .card-header .pool-name,
#stake-pool-dashboard .cv-src-card .card-header .pool-name {
    overflow-wrap: anywhere;
}
@media (max-width: 359px) {
    #stake-pool-dashboard {
        --plot-w: 88px;
    }
    #stake-pool-dashboard .sp-pool-card .card-header > .cv-card-link,
    #stake-pool-dashboard .cv-src-card .cv-src-link {
        gap: 10px;
    }
    #stake-pool-dashboard .sp-pool-card .card-header .pool-name,
    #stake-pool-dashboard .cv-src-card .card-header .pool-name {
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    /* Stakers as cards on a phone: the sign of "opens the pool page" stands
       in the corner of the card, and the name gets the whole line. */
    #stake-pool-dashboard .cv-src-card {
        position: relative;
    }
    #stake-pool-dashboard .cv-src-card .cv-corner {
        position: absolute;
        top: 6px;
        right: 6px;
        margin: 0;
    }
    #stake-pool-dashboard .cv-src-card .cv-nw {
        white-space: normal;
    }
}
/* The number of pools of a category stays one piece next to a long title. */
#stake-pool-dashboard .category-header .meta {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* Wide screens: the name stands next to a large plot and gets a larger size. */
@media (min-width: 901px) {
    #stake-pool-dashboard .sp-pool-card .card-header .pool-name,
    #stake-pool-dashboard .cv-src-card .card-header .pool-name {
        font-size: 20px;
    }
}
#stake-pool-dashboard .sp-pool-card .card-main-content,
#stake-pool-dashboard .cv-src-card .card-main-content {
    gap: 8px;
}
#stake-pool-dashboard .sp-pool-card .interactive-chart-container,
#stake-pool-dashboard .cv-src-card .interactive-chart-container {
    margin: 0;
}
#stake-pool-dashboard .sp-pool-card .interactive-chart-container {
    min-height: 106px;
}
/* Head cells: the two main numbers of the card, on the tint of the chart. */
#stake-pool-dashboard .cv-heads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#stake-pool-dashboard .cv-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: var(--chart-bg-color);
}
#stake-pool-dashboard .cv-head img.cv-ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
}
#stake-pool-dashboard .cv-head .cv-cell-text b {
    font-weight: 700;
    line-height: 1.15;
}
/* Nothing in a card is cut. The text of a cell takes the room its sign
   leaves, a label may take a second line, and the size of a number follows
   the width of its place (a narrow card, a long amount). */
#stake-pool-dashboard .cv-head > .cv-cell-text,
#stake-pool-dashboard .cv-cell > .cv-cell-text {
    flex: 1 1 0;
    container-type: inline-size;
}
#stake-pool-dashboard .cv-cell-text small {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}
#stake-pool-dashboard .cv-head .cv-cell-text b {
    font-size: 17px;
    font-size: clamp(14px, 22cqi, 19px);
}
#stake-pool-dashboard .cv-cell .cv-cell-text b {
    font-size: clamp(12.5px, 23cqi, 15px);
}
/* A single cell (the peak of a staker that left) stands in the middle and
   is as wide as its text. */
#stake-pool-dashboard .cv-cell:only-child {
    justify-content: center;
}
#stake-pool-dashboard .cv-cell:only-child > .cv-cell-text {
    flex: 0 1 auto;
    container-type: normal;
}
#stake-pool-dashboard .cv-cell:only-child .cv-cell-text b {
    font-size: 15px;
}
/* The cells follow the width of their card, not of the screen: a narrow
   card (a phone, three columns on a small laptop) gets tighter cells, and
   the narrowest ones leave the signs out. */
#stake-pool-dashboard .sp-pool-card .card-main-content,
#stake-pool-dashboard .cv-src-card .card-main-content {
    container: cvcard / inline-size;
}
@container cvcard (max-width: 300px) {
    #stake-pool-dashboard .cv-head {
        gap: 6px;
        padding: 9px 8px;
    }
    #stake-pool-dashboard .cv-head img.cv-ico {
        width: 26px;
        height: 26px;
    }
    #stake-pool-dashboard .cv-cell {
        gap: 7px;
        padding: 8px;
    }
    #stake-pool-dashboard .cv-cell img.cv-ico {
        width: 24px;
        height: 24px;
    }
}
@container cvcard (max-width: 228px) {
    #stake-pool-dashboard .cv-head img.cv-ico,
    #stake-pool-dashboard .cv-cell img.cv-ico {
        display: none;
    }
}
@media (max-width: 560px) {
    /* Phones: less frame around a card, more room for its numbers (the
       same measures as among the stakers of a validator). */
    #stake-pool-dashboard #groups-grid-container .category-section {
        padding: 10px;
    }
    #stake-pool-dashboard .sp-pool-card {
        padding: 18px;
    }
}
#stake-pool-dashboard .cv-src-card.is-past .cv-head b {
    font-weight: 600;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-src-card.is-past .cv-head img.cv-ico,
#stake-pool-dashboard .cv-src-card.is-past .cv-cell img.cv-ico {
    opacity: 0.5;
    filter: grayscale(1);
}
/* About the pool: one line that opens in place, then the site and the keys. */
#stake-pool-dashboard .cv-pc-about {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-pc-desc {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    border-radius: 6px;
}
#stake-pool-dashboard .cv-pc-desc > p {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
#stake-pool-dashboard .cv-pc-desc.is-open > p {
    display: block;
    -webkit-line-clamp: unset;
}
#stake-pool-dashboard .cv-pc-desc > i {
    flex: 0 0 auto;
    margin-top: 5px;
    font-size: 10px;
    transition: transform 0.2s ease;
}
#stake-pool-dashboard .cv-pc-desc.is-open > i {
    transform: rotate(180deg);
}
#stake-pool-dashboard .cv-pc-desc:not(.is-short):hover,
#stake-pool-dashboard .cv-pc-desc.is-open {
    color: var(--text-color);
}
#stake-pool-dashboard .cv-pc-desc.is-short {
    cursor: default;
}
#stake-pool-dashboard .cv-pc-desc.is-short > i {
    display: none;
}
#stake-pool-dashboard .cv-pc-desc:focus-visible {
    outline: 2px solid var(--header-color);
    outline-offset: 3px;
}
#stake-pool-dashboard .cv-pc-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-height: 26px;
}
#stake-pool-dashboard .cv-pc-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-weight: 500;
    color: var(--header-color);
    text-decoration: none;
}
#stake-pool-dashboard .cv-pc-site:hover {
    text-decoration: underline;
}
#stake-pool-dashboard .cv-pc-site > i {
    font-size: 10px;
}
#stake-pool-dashboard .cv-pc-keys {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
#stake-pool-dashboard .cv-key.cv-key-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-color);
    font-family: inherit;
    font-size: 11px;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-key.cv-key-ico:hover {
    border-color: var(--header-color);
    background: var(--chart-bg-color);
    color: var(--header-color);
}
#stake-pool-dashboard .cv-key.cv-key-ico.is-copied {
    border-color: #28a745;
}
#stake-pool-dashboard .cv-key.cv-key-ico.is-copied .cv-key-glyph {
    display: none;
}
#stake-pool-dashboard .cv-key.cv-key-ico .cv-copied-icon {
    font-size: 11px;
}
#stake-pool-dashboard .cv-pc-more {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary-text-color);
    text-decoration: none;
}
#stake-pool-dashboard .cv-pc-more:hover {
    border-color: var(--header-color);
    color: var(--header-color);
}

/* ==========================================================================
   TOP OF THE MAIN PAGE, SECOND PASS (v3.2.0)
   ========================================================================== */
/* The sign of the block: a tile of the map next to the title, of the scale
   of the signs of the three stations under it (the block is the first of
   them: the stake of the whole network, then its pools, validators, docs). */
#stake-pool-dashboard .total-stake-card > .title {
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-color);
}
#stake-pool-dashboard .total-stake-card > .title > .cv-hero-mark {
    flex: 0 0 auto;
    width: 52px;
    height: auto;
    margin: -7px 0 -5px;
}
/* The title of the first chart is a chip with the look of an active option. */
#stake-pool-dashboard .cv-vd-toggle .cv-vd-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: var(--header-color);
    font-size: 11px;
    font-weight: 500;
    line-height: normal;
    color: #fff;
    white-space: nowrap;
}
body.dark-theme-body #stake-pool-dashboard .cv-vd-toggle .cv-vd-chip {
    color: #062a27;
}
#stake-pool-dashboard .cv-net-charts .chart-range-labels .cv-side-short {
    display: none;
}
@media (max-width: 560px) {
    /* Phones: the first screen holds both charts, the four cards and the
       start of the tabs. Labels under a chart are one small line each. */
    #stake-pool-dashboard .dashboard-content-container {
        padding-top: 14px;
    }
    #stake-pool-dashboard #summary-container {
        padding: 14px;
    }
    /* (the block and its parts take the whole width of their place) */
    #stake-pool-dashboard #summary-container .total-stake-card {
        gap: 6px;
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
    #stake-pool-dashboard #summary-container .summary-chart-wrapper,
    #stake-pool-dashboard #summary-container .interactive-chart-container,
    #stake-pool-dashboard #summary-container .total-stake-grid {
        max-width: none;
    }
    #stake-pool-dashboard .total-stake-card > .title {
        gap: 10px;
        font-size: 16px;
    }
    #stake-pool-dashboard .cv-net-charts {
        gap: 8px;
        margin-top: 6px;
    }
    #stake-pool-dashboard .cv-net-charts .summary-chart-wrapper .interactive-chart-container {
        min-height: 0;
        padding: 10px 0 9px;
    }
    #stake-pool-dashboard .cv-net-charts .chart-title {
        min-height: 24px;
        margin-bottom: 4px;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels {
        margin-top: 2px;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels > span {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px;
        font-size: 11px;
        text-align: left;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels > span > .value {
        flex-basis: auto;
        order: 0;
        font-size: 14px;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels .cv-side-short + .value,
    #stake-pool-dashboard .cv-net-charts .chart-range-labels .cv-side-short {
        display: inline;
    }
    #stake-pool-dashboard .cv-net-charts .chart-range-labels .cv-side-name:has(+ .cv-side-short) {
        display: none;
    }
    #stake-pool-dashboard .total-stake-grid {
        gap: 6px;
        margin-top: 2px;
    }
    #stake-pool-dashboard .total-stake-item {
        padding: 9px 8px;
    }
}

/* ==========================================================================
   NAVIGATION AND SMALL ITEMS (v3.2.0)
   ========================================================================== */
/* The tabs and the way back in the bar are links now: the look stays. */
#stake-pool-dashboard a.sp-tab-link,
a.cv-sub-crumb {
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* Stakers table: the totals of the validator are not one more staker - a
   tile of the map for a sign and a line of the accent colour under the row. */
#stake-pool-dashboard .cv-st > .cv-st-row.cv-st-total {
    border-bottom: 2px solid var(--header-color);
}
/* (the tile is wider than the place of a logo and reaches a little out of it) */
#stake-pool-dashboard .cv-st-total .cv-st-total-ico img.cv-total-tile {
    flex: 0 0 auto;
    width: 56px;
    max-width: none;
    height: auto;
    margin: 0 -8px;
}

/* ==========================================================================
   ROUND C3 (v3.2.0)
   ========================================================================== */
/* Scroll hints: small arrows over the faded edges of a box that scrolls
   without a visible bar. A place that uses them keeps the box and the two
   arrows together (one grid cell or one positioned wrapper) and shows an
   arrow while the box has the matching class (has-more / has-less). */
.cv-scroll-arrow {
    display: none;
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    font-size: 10px;
    color: var(--header-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 560px) {
    /* Sort bars on phones: the row and its arrows share one cell. The arrow
       at the right stands while options wait there, the one at the left
       appears once the row has moved. */
    .cv-sortbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .cv-sortbar > .cv-sort-row,
    .cv-sortbar > .cv-scroll-arrow {
        grid-area: 1 / 1;
        align-self: center;
    }
    .cv-sortbar > .cv-sort-row.has-more ~ .cv-scroll-next {
        display: inline-flex;
        justify-self: end;
    }
    .cv-sortbar > .cv-sort-row.has-less ~ .cv-scroll-prev {
        display: inline-flex;
        justify-self: start;
    }
    .cv-sortbar .cv-sort-row.has-more {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 66px), transparent calc(100% - 22px));
        mask-image: linear-gradient(90deg, #000 calc(100% - 66px), transparent calc(100% - 22px));
    }
    .cv-sortbar .cv-sort-row.has-less {
        -webkit-mask-image: linear-gradient(90deg, transparent 22px, #000 66px);
        mask-image: linear-gradient(90deg, transparent 22px, #000 66px);
    }
    .cv-sortbar .cv-sort-row.has-less.has-more {
        -webkit-mask-image: linear-gradient(90deg, transparent 22px, #000 66px, #000 calc(100% - 66px), transparent calc(100% - 22px));
        mask-image: linear-gradient(90deg, transparent 22px, #000 66px, #000 calc(100% - 66px), transparent calc(100% - 22px));
    }
}

/* Pool cards: the site and the keys. Five places for keys fit the line of
   the site on a wide card; when they do not, the keys go to a line of their
   own and start at the left. */
#stake-pool-dashboard .cv-pc-foot {
    justify-content: space-between;
    gap: 8px 10px;
}
#stake-pool-dashboard .cv-pc-keys {
    gap: 2px;
    margin-left: 0;
}
#stake-pool-dashboard .cv-key.cv-key-ico {
    width: 24px;
    height: 24px;
    font-size: 10px;
}
#stake-pool-dashboard .cv-key.cv-key-ico .cv-copied-icon {
    font-size: 10px;
}
#stake-pool-dashboard .cv-pc-more {
    height: 24px;
    padding: 0 8px;
}
@media (max-width: 560px) {
    /* (a finger needs larger signs than a pointer) */
    #stake-pool-dashboard .cv-pc-keys {
        gap: 6px;
    }
    #stake-pool-dashboard .cv-key.cv-key-ico {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    #stake-pool-dashboard .cv-pc-more {
        height: 28px;
    }
}

/* The plot and the name of a card are closer in weight: a slightly smaller
   plot, a slightly larger name. */
@media (min-width: 561px) {
    #stake-pool-dashboard {
        --plot-w: 120px;
    }
}
@media (min-width: 1200px) {
    #stake-pool-dashboard .sp-pool-card .card-header .pool-name,
    #stake-pool-dashboard .cv-src-card .card-header .pool-name {
        font-size: 22px;
    }
}
@media (max-width: 560px) {
    #stake-pool-dashboard {
        --plot-w: 100px;
    }
    #stake-pool-dashboard .sp-pool-card .card-header .pool-name,
    #stake-pool-dashboard .cv-src-card .card-header .pool-name {
        font-size: 20px;
    }
    /* The tile by the title of the top block: the size of a station sign. */
    #stake-pool-dashboard .total-stake-card > .title > .cv-hero-mark {
        width: 42px;
        margin: -5px 0 -4px;
    }
}
@media (max-width: 359px) {
    #stake-pool-dashboard {
        --plot-w: 84px;
    }
    #stake-pool-dashboard .sp-pool-card .card-header .pool-name,
    #stake-pool-dashboard .cv-src-card .card-header .pool-name {
        font-size: 17px;
    }
}

/* Reset in the title row of a donut block: stands at the right while a
   selection is on, so nothing below moves when it appears. */
#stake-pool-dashboard .cv-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--secondary-text-color);
    cursor: pointer;
}
#stake-pool-dashboard .cv-reset:hover {
    border-color: var(--header-color);
    color: var(--header-color);
}
#stake-pool-dashboard .cv-reset[hidden] {
    display: none;
}
#stake-pool-dashboard .pool-chart-block h3 .cv-reset > i {
    font-size: 10px;
    color: inherit;
}

/* ==========================================================================
   STAKERS TABLE ON NARROW SCREENS (v3.2.0)
   A real table: the first column (the staker) stands still, the numbers
   scroll sideways under the header row, rows are thin lines. An arrow over
   the faded right edge says that more columns wait there.
   ========================================================================== */
#stake-pool-dashboard .cv-st-wrap {
    position: relative;
    margin-top: 14px;
}
#stake-pool-dashboard .cv-st-wrap > .cv-st {
    margin-top: 0;
}
@media (max-width: 1023px) {
    #stake-pool-dashboard .cv-st {
        /* staker | active | share | accounts | activating | deactivating | change | trend */
        --cv-st-cols: minmax(140px, 1fr) 96px 52px 64px 74px 88px 68px 96px;
        --cv-st-min: 746px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    #stake-pool-dashboard .cv-st.no-counts {
        --cv-st-cols: minmax(140px, 1fr) 96px 52px 74px 88px 68px 96px;
        --cv-st-min: 674px;
    }
    #stake-pool-dashboard .cv-st::-webkit-scrollbar {
        display: none;
    }
    #stake-pool-dashboard .cv-st.has-more {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent calc(100% - 2px));
        mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent calc(100% - 2px));
    }
    #stake-pool-dashboard .cv-st-row {
        --cv-st-bg: var(--card-bg);
        column-gap: 8px;
        width: 100%;
        min-width: var(--cv-st-min);
        padding: 0 12px 0 0;
        box-sizing: border-box;
        font-size: 13px;
    }
    #stake-pool-dashboard .cv-st-row > .cv-st-c,
    #stake-pool-dashboard .cv-st-row > .cv-st-h {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* The first column stays in place: an opaque cell over the scrolling ones. */
    #stake-pool-dashboard .cv-st-row > .cv-st-source {
        position: sticky;
        left: 0;
        z-index: 1;
        align-self: stretch;
        gap: 8px;
        padding-left: 12px;
        padding-right: 6px;
        background: var(--cv-st-bg);
    }
    #stake-pool-dashboard .cv-st.has-less .cv-st-row > .cv-st-source {
        box-shadow: 9px 0 9px -9px rgba(0, 0, 0, 0.18);
    }
    body.dark-theme-body #stake-pool-dashboard .cv-st.has-less .cv-st-row > .cv-st-source {
        box-shadow: 9px 0 9px -9px rgba(0, 0, 0, 0.5);
    }
    #stake-pool-dashboard .cv-st-head {
        --cv-st-bg: var(--bg-color);
        padding-top: 0;
        padding-bottom: 0;
    }
    #stake-pool-dashboard .cv-st-head > .cv-st-h {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 11px;
    }
    #stake-pool-dashboard .cv-st-total {
        --cv-st-bg: linear-gradient(var(--chart-bg-color), var(--chart-bg-color)), var(--card-bg);
    }
    #stake-pool-dashboard .cv-st-row.is-past {
        --cv-st-bg: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.10) 0 5px, transparent 5px 13px), var(--bg-color);
    }
    #stake-pool-dashboard .cv-st .cv-flow-logo {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
    }
    #stake-pool-dashboard .cv-st .cv-flow-logo:has(> img[data-logo-iso]) {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin: 0 -2px;
    }
    #stake-pool-dashboard .cv-st-source .cv-vd-src-text {
        min-width: 0;
    }
    #stake-pool-dashboard .cv-st-source .cv-vd-src-name {
        display: block;
        font-size: 13px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    #stake-pool-dashboard .cv-st-source .cv-vd-src-cat {
        font-size: 10.5px;
    }
    /* (the share is its number here; the bar is for wide screens) */
    #stake-pool-dashboard .cv-st-share .cv-st-bar {
        display: none;
    }
    #stake-pool-dashboard .cv-st-share .cv-st-pct {
        flex: 1 1 auto;
    }
    #stake-pool-dashboard .cv-st-trend {
        padding-left: 0;
    }
    #stake-pool-dashboard .cv-st .cv-mini-spark {
        width: 96px;
    }
    #stake-pool-dashboard .cv-st-row .cv-corner {
        display: none;
    }
    /* The totals row: a smaller tile in the place of a logo. */
    #stake-pool-dashboard .cv-st-total .cv-st-total-ico {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
    }
    #stake-pool-dashboard .cv-st-total .cv-st-total-ico img.cv-total-tile {
        width: 36px;
        margin: 0 -5px;
    }
    /* A heading of a group of rows keeps to the left edge while the columns scroll. */
    #stake-pool-dashboard .cv-st-group {
        position: sticky;
        left: 0;
        width: 100%;
        padding: 6px 12px;
        box-sizing: border-box;
        font-size: 12px;
    }
    /* The arrows: at the right over the faded edge; the one that leads back
       stands in the free end of the header cell of the first column. */
    #stake-pool-dashboard .cv-st-wrap > .cv-st.has-more ~ .cv-scroll-next,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.has-less ~ .cv-scroll-prev {
        display: inline-flex;
        position: absolute;
        top: 4px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-next {
        right: 5px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-prev {
        left: 110px;
    }
}
@media (max-width: 768px) {
    /* Phones: the table takes the whole width of its block (no side frame),
       the first column is as narrow as a name allows, and the category of a
       row is left to the Category order above the table. */
    #stake-pool-dashboard .cv-st-wrap {
        margin-left: -12px;
        margin-right: -12px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-st {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    /* Five columns that fit a phone: the staker, its stake, the stake on the
       move and the chart. The first column is wide enough for the longest
       word of a name; only on the narrowest phones the table scrolls a
       little, to its chart. */
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(120px, 1fr) 50px 42px 42px 46px;
        --cv-st-min: 328px;
    }
    #stake-pool-dashboard .cv-st-source .cv-vd-src-cat {
        display: none;
    }
    #stake-pool-dashboard .cv-st-total .cv-st-source .cv-vd-src-cat {
        display: block;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-prev {
        left: 108px;
    }
}
@media (max-width: 379px) {
    /* Small phones: narrower columns and a smaller arrow, so the stake and
       the share of a row are in sight whole next to the name. */
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(118px, 1fr) 48px 40px 40px 30px;
        --cv-st-min: 304px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-st .cv-st-row,
    #stake-pool-dashboard .cv-st-wrap > .cv-st .cv-st-source .cv-vd-src-name {
        font-size: 12.5px;
    }
    #stake-pool-dashboard .cv-st.has-more {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent calc(100% - 2px));
        mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent calc(100% - 2px));
    }
    #stake-pool-dashboard .cv-st-row > .cv-st-source {
        gap: 6px;
        padding-right: 4px;
    }
    #stake-pool-dashboard .cv-st .cv-flow-logo {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
    #stake-pool-dashboard .cv-st .cv-flow-logo:has(> img[data-logo-iso]) {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .cv-st-total .cv-st-total-ico {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
    }
    #stake-pool-dashboard .cv-st-total .cv-st-total-ico img.cv-total-tile {
        width: 34px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-arrow {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-st.has-more ~ .cv-scroll-next,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.has-less ~ .cv-scroll-prev {
        top: 6px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-next {
        right: 3px;
    }
    #stake-pool-dashboard .cv-st-wrap > .cv-scroll-prev {
        left: 97px;
    }
}
@media (min-width: 769px) and (max-width: 879px) {
    /* Small tablets: tighter columns, so the whole table fits without scrolling. */
    #stake-pool-dashboard .cv-st {
        --cv-st-cols: minmax(150px, 1fr) 96px 50px 54px 70px 84px 62px 48px;
        --cv-st-min: 668px;
    }
    #stake-pool-dashboard .cv-st.no-counts {
        --cv-st-cols: minmax(150px, 1fr) 96px 50px 70px 84px 62px 48px;
        --cv-st-min: 608px;
    }
    #stake-pool-dashboard .cv-st-row {
        column-gap: 6px;
    }
    #stake-pool-dashboard .cv-st .cv-mini-spark {
        width: 48px;
    }
}
@media (max-width: 1023px) {
    /* A staker without stake in the epoch: its note stays inside the first column. */
    #stake-pool-dashboard .cv-st .cv-vd-past-line {
        gap: 4px;
    }
    #stake-pool-dashboard .cv-st .cv-vd-past-badge {
        border-radius: 8px;
        font-size: 10.5px;
        line-height: 1.25;
        white-space: normal;
    }
}
@media (max-width: 359px) {
    /* The narrowest phones: both halves of the "which stakers" switch stay
       whole (each takes the room its words need). */
    #stake-pool-dashboard .cv-vd-head-tools #cv-vd-scope .cv-vd-toggle button {
        flex: 1 1 auto;
        gap: 4px;
        padding: 8px 6px;
        font-size: 12.5px;
    }
}
/* ==========================================================================
   VALIDATORS OF A POOL (v3.2.0)
   A row of the list on a pool page is a line of tiles of one family, from
   left to right (or top to bottom on a narrow screen): who the validator is
   - rank, logo and name, the chips and the signs of its keys; its total
   stake, with small logos of the other stakers; three tiles of this pool.
   The tiles of the pool are the accent of a row in both themes (a deeper
   sand on the light card, a lifted warm tone on the dark one - a neutral
   tone: a tile says "of this pool", not "growing"), the validator and its
   total stake stand on a quiet tone. A tile of the pool is a sign and a
   number: the mark of the pool (with an arrow for stake on the move) says
   what the number is, and the tooltip names it in full. The layout follows
   the width of the list, not of the screen; in a narrow list every
   validator is a sheet of its own.
   ========================================================================== */
#stake-pool-dashboard #pool-validators-table {
    container: cvrows / inline-size;
    overflow: visible;
}
@media (max-width: 560px) {
    /* Phones: the block keeps less air at its sides (as the chart blocks
       above it do), the list gets it. */
    #stake-pool-dashboard .pool-validators-section {
        padding: 18px 14px;
    }
}
#stake-pool-dashboard .cv-vrows {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
}
/* (the tone of the tiles of the pool as a solid colour: the mark on an
   arrow is cut out of its tile with it) */
#stake-pool-dashboard .cv-vrow {
    --cv-pool-tile: #f0e8d3;
    --cv-quiet-tile: var(--bg-color);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
}
/* (dark theme: the page colour is the deepest tone there is, and a tile of
   it would be the loudest thing of a row - the quiet tiles take a tone next
   to the card, the tiles of the pool rise above it) */
body.dark-theme-body #stake-pool-dashboard .cv-vrow {
    --cv-pool-tile: #2f2c26;
    --cv-quiet-tile: #1a1915;
}
#stake-pool-dashboard .cv-vrow:last-child {
    border-bottom: 0;
}
/* Who: a tile with the grammar of the others - a sign (the logo), a strong
   line (the name) and a small line under it (the chips and the keys). */
#stake-pool-dashboard .cv-vrow-who {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "rank logo name" "rank logo sub";
    align-items: center;
    gap: 5px 9px;
    min-width: 0;
    padding: 10px 11px;
    border-radius: 12px;
    background: var(--cv-quiet-tile);
}
/* (the rank keeps one width, so the logos of the rows stand in one column) */
#stake-pool-dashboard .cv-vrow .pv-rank {
    grid-area: rank;
    min-width: 34px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
#stake-pool-dashboard .cv-vrow .cv-vlink-avatar {
    grid-area: logo;
}
#stake-pool-dashboard .cv-vrow .validator-image-wrapper,
#stake-pool-dashboard .cv-vrow .validator-image,
#stake-pool-dashboard .cv-vrow .validator-image.fallback {
    width: 40px;
    height: 40px;
}
#stake-pool-dashboard .cv-vrow .validator-image.fallback {
    font-size: 14px;
}
/* (the name is the largest text of a row: no number is larger) */
#stake-pool-dashboard .cv-vrow-name {
    grid-area: name;
    align-self: end;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
}
#stake-pool-dashboard .cv-vrow-sub {
    grid-area: sub;
    align-self: start;
}
/* (the signs of the keys keep one place in every row, whatever the chips
   before them: the right edge of the tile) */
#stake-pool-dashboard .cv-vrow-sub > .cv-key-signs {
    margin-left: auto;
}
/* Cells */
#stake-pool-dashboard .cv-vrow-cells {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}
#stake-pool-dashboard .cv-vrow-total {
    grid-column: 1 / -1;
}
/* The total stake of the validator: a head cell that also holds the logos
   of its other stakers. Like the tile of the validator, it is neutral. */
#stake-pool-dashboard .cv-vrow-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: var(--cv-quiet-tile);
}
#stake-pool-dashboard .cv-vrow-total > .cv-head {
    flex: 1 1 104px;
    padding: 0;
    border-radius: 0;
    background: none;
}
/* One size for the numbers of every row, whatever stands next to them. */
#stake-pool-dashboard .cv-vrow-total > .cv-head .cv-cell-text b,
#stake-pool-dashboard .cv-vrow-in .cv-cell-text b,
#stake-pool-dashboard .cv-vrow-flow .cv-cell-text b {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}
#stake-pool-dashboard .cv-vrow-others {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    margin-left: auto;
}
#stake-pool-dashboard .cv-vrow-others > small {
    font-size: 10px;
    line-height: 1.2;
    color: var(--secondary-text-color);
    white-space: nowrap;
}
/* (nobody else stakes with the validator: one quiet line says so) */
#stake-pool-dashboard .cv-vrow-others.is-none > small {
    font-size: 10.5px;
    font-style: italic;
    opacity: 0.85;
}
#stake-pool-dashboard .cv-vrow-logos {
    display: flex;
    align-items: center;
    gap: 3px;
}
#stake-pool-dashboard .cv-vrow-other {
    display: inline-flex;
}
#stake-pool-dashboard .cv-vrow-other .cv-flow-logo {
    width: 22px;
    height: 22px;
}
#stake-pool-dashboard .cv-vrow-other .cv-flow-logo.is-other svg {
    width: 13px;
    height: 13px;
}
#stake-pool-dashboard .cv-vrow-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--card-bg);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--secondary-text-color);
}
/* The three tiles of this pool share one tone. */
#stake-pool-dashboard .cv-vrow-in,
#stake-pool-dashboard .cv-vrow-flow {
    background: var(--cv-pool-tile);
}
/* (a tile of the pool shows no name of its measure - the sign says it, the
   tooltip spells it; the name stays in the page for screen readers) */
#stake-pool-dashboard .cv-vrow-in .cv-cell-text small,
#stake-pool-dashboard .cv-vrow-flow .cv-cell-text small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#stake-pool-dashboard .cv-vrow-flow {
    gap: 8px;
}
#stake-pool-dashboard .cv-vrow-in.is-zero .cv-cell-text b,
#stake-pool-dashboard .cv-vrow-flow.is-zero .cv-cell-text b {
    font-weight: 600;
    color: var(--secondary-text-color);
}
/* The sign of the stake in the pool is the sprite of the pool (or the flat
   logo standing in for it, in the manner of the other places of a sprite). */
#stake-pool-dashboard .cv-vrow-sign {
    display: inline-flex;
    flex: 0 0 auto;
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo {
    width: 34px;
    height: 34px;
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo:has(> img[data-logo-iso]) {
    overflow: visible;
    border-color: transparent;
    border-radius: 0;
    background: transparent;
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo > img[data-logo-iso][src^="/pool-logos/"] {
    padding: 0;
    object-fit: contain;
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo > img[data-logo-iso]:not([src^="/pool-logos/"]) {
    padding: 10%;
    object-fit: contain;
    transform: skewY(-14deg) scaleX(0.88);
    filter: drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side)) drop-shadow(1px 1px 0 var(--iso-side));
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo.is-other svg {
    width: 58%;
    height: 58%;
}
#stake-pool-dashboard .cv-vrow-sign .cv-flow-logo.is-initials {
    font-size: 12px;
}
/* The stake on the move is the stake of this pool: the small logo of the
   pool stands first and the arrow starts from it - its tail lies over the
   edge of the logo, its head is free. */
#stake-pool-dashboard .cv-vrow-flowsign {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}
#stake-pool-dashboard .cv-vrow-flowsign > img.cv-ico {
    width: 28px;
    height: 28px;
    margin-left: -7px;
}
#stake-pool-dashboard .cv-vrow-mark {
    display: inline-flex;
    border-radius: 50%;
}
/* (the tail of a rising arrow is low, of a falling one high: the logo
   stands where the arrow starts) */
#stake-pool-dashboard .cv-vrow-flowsign.is-activating > .cv-vrow-mark {
    transform: translateY(4px);
}
#stake-pool-dashboard .cv-vrow-flowsign.is-deactivating > .cv-vrow-mark {
    transform: translateY(-4px);
}
#stake-pool-dashboard .cv-vrow-mark .cv-flow-logo {
    width: 18px;
    height: 18px;
}
#stake-pool-dashboard .cv-vrow-mark .cv-flow-logo.is-other svg {
    width: 11px;
    height: 11px;
}
#stake-pool-dashboard .cv-vrow-mark .cv-flow-logo.is-initials {
    font-size: 8px;
}
#stake-pool-dashboard .cv-vrow-flow.is-zero .cv-vrow-mark {
    opacity: 0.6;
}

/* While the total stake stands under the validator, every validator is a
   sheet of its own: a tone of its own (the block around it keeps the tone
   of the card), a clear edge, and more air between two sheets than there is
   between the parts of one. The validator and its total stake stand on the
   sheet, divided by a line, and the tiles of the pool close it. */
@container cvrows (max-width: 699.98px) {
    #stake-pool-dashboard .cv-vrows {
        border: 0;
        border-radius: 0;
        background: none;
    }
    #stake-pool-dashboard .cv-vrow {
        --cv-sheet: #fdfbf5;
        --cv-sheet-edge: #ddd3b8;
        gap: 0;
        padding: 0;
        border: 1px solid var(--cv-sheet-edge);
        border-radius: 16px;
        background: var(--cv-sheet);
    }
    body.dark-theme-body #stake-pool-dashboard .cv-vrow {
        --cv-sheet: #262520;
        --cv-sheet-edge: #45413a;
    }
    #stake-pool-dashboard .cv-vrow + .cv-vrow {
        margin-top: 18px;
    }
    #stake-pool-dashboard .cv-vrow:last-child {
        border-bottom: 1px solid var(--cv-sheet-edge);
    }
    #stake-pool-dashboard .cv-vrow-who {
        padding: 12px 10px 10px;
        border-radius: 0;
        background: none;
    }
    #stake-pool-dashboard .cv-vrow-cells {
        padding: 0 8px 8px;
    }
    #stake-pool-dashboard .cv-vrow-total {
        margin: 0 -8px;
        padding: 10px 10px 2px;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        background: none;
    }
}
/* A narrow list (phones): the chips of the validator stand under its logo
   and name, in one line. */
@container cvrows (max-width: 479.98px) {
    #stake-pool-dashboard .cv-vrow-who {
        grid-template-areas: "rank logo name" "sub sub sub";
        row-gap: 9px;
    }
    /* (no tooltip under a finger: a long name takes a second line instead
       of being cut) */
    #stake-pool-dashboard .cv-vrow-name .cv-name-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #stake-pool-dashboard .cv-vrow-name {
        align-self: center;
    }
    #stake-pool-dashboard .cv-vrow .pv-rank {
        min-width: 30px;
    }
}
/* Phones: the three tiles of the pool are upright, in one line - a sign
   over its number, both in the middle of the tile. */
@container cvrows (max-width: 429.98px) {
    #stake-pool-dashboard .cv-vrow-in,
    #stake-pool-dashboard .cv-vrow-flow {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 9px 6px 8px;
    }
    #stake-pool-dashboard .cv-vrow-in > .cv-cell-text,
    #stake-pool-dashboard .cv-vrow-flow > .cv-cell-text {
        flex: 0 0 auto;
        align-self: stretch;
        text-align: center;
    }
    #stake-pool-dashboard .cv-vrow-sign .cv-flow-logo {
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .cv-vrow-in .cv-cell-text b,
    #stake-pool-dashboard .cv-vrow-flow .cv-cell-text b {
        font-size: clamp(13px, 24cqi, 17px);
    }
}
/* The narrowest phones: less air in the tiles and smaller logos of the
   other stakers, so every number fits and the logos stay on their line. */
@container cvrows (max-width: 271.98px) {
    #stake-pool-dashboard .cv-vrow-cells {
        gap: 5px;
        padding: 0 5px 5px;
    }
    #stake-pool-dashboard .cv-vrow-in,
    #stake-pool-dashboard .cv-vrow-flow {
        padding: 9px 6px;
    }
    #stake-pool-dashboard .cv-vrow-who {
        padding: 10px 8px 9px;
        column-gap: 8px;
    }
    #stake-pool-dashboard .cv-vrow-name {
        font-size: 16px;
    }
    #stake-pool-dashboard .cv-vrow .validator-image-wrapper,
    #stake-pool-dashboard .cv-vrow .validator-image,
    #stake-pool-dashboard .cv-vrow .validator-image.fallback {
        width: 36px;
        height: 36px;
    }
    #stake-pool-dashboard .cv-vrow-total {
        gap: 6px 8px;
        margin: 0 -5px;
        padding: 9px 8px 2px;
    }
    #stake-pool-dashboard .cv-vrow-total > .cv-head {
        flex-basis: 98px;
    }
    #stake-pool-dashboard .cv-vrow-total > .cv-head img.cv-ico {
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .cv-vrow-logos {
        gap: 3px;
    }
    #stake-pool-dashboard .cv-vrow-other .cv-flow-logo,
    #stake-pool-dashboard .cv-vrow-more {
        width: 20px;
        height: 20px;
    }
    #stake-pool-dashboard .cv-vrow-more {
        min-width: 20px;
        width: auto;
        padding: 0 4px;
    }
}
@container cvrows (max-width: 249.98px) {
    #stake-pool-dashboard .cv-vrow-total > .cv-head {
        flex-basis: 94px;
    }
}
/* From 700 px all four cells stand in one line. */
@container cvrows (min-width: 700px) {
    #stake-pool-dashboard .cv-vrow-cells {
        grid-template-columns: minmax(263px, 1.9fr) repeat(3, minmax(0, 1fr));
    }
    #stake-pool-dashboard .cv-vrow-total {
        grid-column: auto;
    }
}
/* A wide list: who on the left, the cells on the right. */
@container cvrows (min-width: 1060px) {
    #stake-pool-dashboard .cv-vrow {
        grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
    }
}
/* ==========================================================================
   VALIDATORS LIST: ROWS (v3.2.0)
   Who a validator is reads in two lines: the name (the largest text of a
   row), then one line of small things - the signs of its keys first (they
   start where the name starts, in every row), then the chips. Its stake
   reads in the same two lines: the total stake, and under it the stake on
   the move. The numbers are small chips with the signs of the set. On a
   phone the whole card is centred: the logo over the name, then the same
   line of keys and chips; the rank stands in the top corner.
   ========================================================================== */
#stake-pool-dashboard .validator-item > .validator-main-info {
    display: grid;
    grid-template-columns: auto auto 330px;
    grid-template-areas: "rank logo info" "rank logo sub";
    align-items: center;
    gap: 6px 16px;
}
#stake-pool-dashboard .validator-item .validator-rank {
    grid-area: rank;
}
#stake-pool-dashboard .validator-item .cv-vlink-avatar {
    grid-area: logo;
}
#stake-pool-dashboard .validator-item .validator-info {
    grid-area: info;
    align-self: end;
}
#stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline {
    grid-area: sub;
    align-self: start;
}
/* (the signs of the keys open the line: one place in every row, whatever
   the chips after them, and next to the validator they belong to) */
#stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline > .cv-key-signs,
#stake-pool-dashboard .cv-inactive-main > .cv-chipline > .cv-key-signs {
    margin-right: 3px;
}
#stake-pool-dashboard .validator-item .validator-name {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}
/* The stake: the total in the first line, the stake on the move under it. */
#stake-pool-dashboard .validator-item > .validator-stake-stats {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}
#stake-pool-dashboard .validator-stake-stats .stake-flows {
    display: flex;
    align-items: center;
    gap: 6px;
}
#stake-pool-dashboard .validator-stake-stats .stake-stat {
    gap: 6px;
    padding: 4px 10px 4px 6px;
    border-radius: 10px;
    background: var(--bg-color);
    font-size: 13.5px;
    line-height: 1.2;
}
/* (in the dark theme a chip stands out of its card as softly as it does in
   the light one) */
body.dark-theme-body #stake-pool-dashboard .validator-stake-stats .stake-stat {
    background: #191814;
}
#stake-pool-dashboard .validator-stake-stats .stake-stat img.cv-ico {
    width: 22px;
    height: 22px;
}
/* The amount under the logo of a staker is strong enough to read at a glance. */
#stake-pool-dashboard .validator-pools .pool-badge-stake {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--secondary-text-color) !important;
}
/* Inactive validators found by the search: the chips of their last epoch
   and the signs of their keys are one line too. */
#stake-pool-dashboard .cv-chipline > .cv-inactive-chips {
    display: contents;
}
#stake-pool-dashboard .cv-inactive-main > .cv-chipline {
    margin-top: 3px;
}
@media (min-width: 769px) {
    /* (the rank keeps one width and ends at the logo, like the number of a
       list item: the logos, the names and the signs of the keys stand in the
       same columns in the first row and in the six hundredth) */
    #stake-pool-dashboard .validator-item .validator-rank {
        width: 38px;
        min-width: 38px;
        text-align: right;
        white-space: nowrap;
    }
    /* (one width for the column of the stake, so the logos of the stakers
       start on one line in every row) */
    #stake-pool-dashboard .validator-item > .validator-stake-stats {
        flex: 0 0 204px;
        min-width: 0;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    /* Tablets: the stakers stand under the row, across its whole width (the
       gap of the row is the air above their line: no margin on top of it). */
    #stake-pool-dashboard .validator-item > .validator-pools {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    /* Phones: the card is centred from top to bottom, as its stake and its
       stakers are. The logo stands in the middle with the rank in the corner
       beside it, the name under it (a long name takes a second line instead
       of being cut: no tooltip under a finger), then the keys and the chips
       in one centred line. */
    #stake-pool-dashboard .validator-item > .validator-main-info {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas: "rank logo ." "info info info" "sub sub sub";
        justify-items: center;
        gap: 8px 12px;
        min-width: 0;
    }
    #stake-pool-dashboard .validator-item .validator-rank {
        justify-self: start;
        min-width: 0;
        text-align: left;
    }
    #stake-pool-dashboard .validator-item .validator-info {
        align-self: center;
        min-width: 0;
        max-width: 100%;
        text-align: center;
    }
    #stake-pool-dashboard .validator-item .validator-name {
        justify-content: center;
        overflow: visible;
        white-space: normal;
    }
    /* A centred line holds nothing a visitor does not see. The name is
       centred by its letters alone: the arrow of the link stands out of the
       flow, right after the last letter (in the room the link keeps on both
       of its sides), and the button that copies the name is not here (the
       page of the validator copies it, as the desktop row does). */
    #stake-pool-dashboard .validator-item .validator-name > a.cv-name-text {
        position: relative;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        padding: 0 24px;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #stake-pool-dashboard .validator-item .validator-name .cv-name-run {
        display: block;
    }
    #stake-pool-dashboard .validator-item .validator-name svg.cv-go {
        position: absolute;
        margin-top: 0.24em;
    }
    #stake-pool-dashboard .validator-item .validator-name > .cv-copy-btn {
        display: none;
    }
    #stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline {
        justify-content: center;
    }
    #stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline > .cv-key-signs {
        margin-right: 2px;
    }
    #stake-pool-dashboard .validator-item > .validator-stake-stats {
        align-items: center;
        gap: 8px;
    }
    #stake-pool-dashboard .validator-stake-stats .stake-flows {
        justify-content: center;
        gap: 8px;
    }
}
@media (max-width: 345px) {
    /* The narrowest phones: slightly smaller signs, so the keys and the
       chips of most validators still stand in one line. */
    #stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline {
        gap: 4px;
    }
    #stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline > .cv-key-signs {
        gap: 4px;
        margin-right: 1px;
    }
    #stake-pool-dashboard .validator-item .cv-key-signs .cv-key.cv-key-ico {
        width: 24px;
        height: 24px;
    }
}
/* ==========================================================================
   POOL PAGE: THE LEGEND OF THE DONUT (v3.2.0)
   Rows in the manner of the validator page: the colour, the logo of the
   validator, its name, the share in bold and the amount in grey. The legend
   scrolls without a bar: the edge where more rows wait fades, and a small
   arrow stands over it.
   ========================================================================== */
#stake-pool-dashboard .cv-legend-wrap {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
}
#stake-pool-dashboard .stake-distribution-block .stake-distribution-legend {
    flex: 1 1 auto;
    gap: 2px;
    max-height: 232px;
    padding-right: 0;
    font-size: 13px;
    scrollbar-width: none;
}
#stake-pool-dashboard .stake-distribution-block .stake-distribution-legend::-webkit-scrollbar {
    display: none;
}
#stake-pool-dashboard .stake-distribution-legend.has-more {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent 100%);
}
#stake-pool-dashboard .stake-distribution-legend.has-less {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px);
    mask-image: linear-gradient(180deg, transparent 0, #000 36px);
}
#stake-pool-dashboard .stake-distribution-legend.has-more.has-less {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}
#stake-pool-dashboard .cv-legend-wrap > .stake-distribution-legend.has-more ~ .cv-scroll-next,
#stake-pool-dashboard .cv-legend-wrap > .stake-distribution-legend.has-less ~ .cv-scroll-prev {
    display: inline-flex;
    position: absolute;
    left: 50%;
    margin-left: -13px;
}
#stake-pool-dashboard .cv-legend-wrap > .cv-scroll-next {
    bottom: 0;
}
#stake-pool-dashboard .cv-legend-wrap > .cv-scroll-prev {
    top: 0;
}
#stake-pool-dashboard .stake-distribution-block .legend-item {
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    color: var(--text-color);
}
#stake-pool-dashboard .stake-distribution-block .legend-item .legend-color {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
#stake-pool-dashboard .stake-distribution-block .legend-item .legend-name {
    max-width: none;
}
#stake-pool-dashboard .stake-distribution-block .legend-avatar {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}
#stake-pool-dashboard .stake-distribution-block .legend-avatar .validator-image {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
}
#stake-pool-dashboard .stake-distribution-block .legend-avatar .validator-image.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ph-bg);
    font-size: 8px;
    font-weight: 700;
    color: var(--ph-ink);
}
#stake-pool-dashboard .stake-distribution-block .legend-avatar.is-icon {
    font-size: 10px;
}
#stake-pool-dashboard .stake-distribution-block .legend-share {
    flex-shrink: 0;
    font-weight: 600;
}
#stake-pool-dashboard .stake-distribution-block .legend-sol {
    flex: 0 0 52px;
    font-size: 12px;
    color: var(--secondary-text-color);
    text-align: right;
}
#stake-pool-dashboard .stake-distribution-block .legend-item.disabled .legend-avatar {
    filter: grayscale(1);
}
/* (the title row: the note and Reset keep to the right) */
#stake-pool-dashboard .stake-distribution-block h3 .cv-reset {
    align-self: center;
    margin-left: 0;
}
@media (max-width: 768px) {
    /* The legend stands under the donut and takes the whole width. */
    #stake-pool-dashboard .cv-legend-wrap {
        flex: 0 0 auto;
        width: 100%;
    }
    #stake-pool-dashboard .stake-distribution-block h3 .cv-reset {
        margin-left: auto;
    }
}
/* ==========================================================================
   BUBBLES OF THE STAKERS BLOCK (v3.2.0)
   Every staker of the epoch is a bubble of glass: a highlight, some depth,
   the logo inside and, when there is room, the amount. The glass takes the
   colour of stake on the move (green in, red out, both for both; a dashed
   rim when the whole stake is arriving or leaving), as strongly as that
   stake moves. The script gives every bubble its size (--d), its place and
   the strength of its movement (--mv, 0..1); --i is its number, largest
   first. Everything else of the view is one panel: the three totals, the
   stakers without stake in the epoch, the note about the smallest ones.
   ========================================================================== */
/* (this view has no sort bar) */
#stake-pool-dashboard .cv-vd-sortbar:empty {
    display: none;
}
/* A phone: the totals above the map, the rest of the panel under it. */
#stake-pool-dashboard .cv-bwrap {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}
#stake-pool-dashboard .cv-binfo {
    display: contents;
}
#stake-pool-dashboard .cv-bubble-chips {
    order: 1;
}
#stake-pool-dashboard .cv-bmap,
#stake-pool-dashboard .cv-bmap-empty {
    order: 2;
}
#stake-pool-dashboard .cv-bpast {
    order: 3;
}
#stake-pool-dashboard .cv-binfo > .cv-vd-small {
    order: 4;
}
/* The three totals: tiles of the family of the other tiles (a sign, a
   strong number, a small name), not pills - they do not sort anything. A
   click opens the split by staker. */
#stake-pool-dashboard .cv-bubble-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
#stake-pool-dashboard .cv-bubble-chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ico" "value" "label";
    justify-items: start;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 10px 10px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--bg-color);
    font: inherit;
    line-height: 1.2;
    text-align: left;
    color: var(--secondary-text-color);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
#stake-pool-dashboard .cv-bubble-chip:hover,
#stake-pool-dashboard .cv-bubble-chip.is-picked {
    border-color: var(--header-color);
}
#stake-pool-dashboard .cv-bubble-chip img.cv-ico {
    grid-area: ico;
    width: 28px;
    height: 28px;
    margin-bottom: 4px;
}
#stake-pool-dashboard .cv-bubble-chip > span {
    grid-area: label;
    overflow: hidden;
    max-width: 100%;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-bubble-chip b {
    grid-area: value;
    overflow: hidden;
    max-width: 100%;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-bubble-chip b small {
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-bubble-chip.is-up b {
    color: #28a745;
}
#stake-pool-dashboard .cv-bubble-chip.is-down b {
    color: #dc3545;
}
@media (max-width: 899px) {
    /* (the unit is left out here; the whole amount is in the tooltip) */
    #stake-pool-dashboard .cv-bubble-chip b small {
        display: none;
    }
}
@media (min-width: 561px) and (max-width: 899px) {
    /* A tablet: wide tiles keep the sign next to the number. */
    #stake-pool-dashboard .cv-bubble-chip {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "ico value" "ico label";
        align-items: center;
        gap: 1px 11px;
        padding: 12px 14px;
    }
    #stake-pool-dashboard .cv-bubble-chip img.cv-ico {
        width: 36px;
        height: 36px;
        margin-bottom: 0;
    }
    #stake-pool-dashboard .cv-bubble-chip b {
        font-size: 17px;
    }
}
/* The map. */
#stake-pool-dashboard .cv-bmap {
    position: relative;
    min-height: 120px;
    margin-top: 10px;
    background: radial-gradient(ellipse at 50% 46%, rgba(12, 124, 115, 0.07) 0, rgba(12, 124, 115, 0) 68%);
}
body.dark-theme-body #stake-pool-dashboard .cv-bmap {
    background: radial-gradient(ellipse at 50% 46%, rgba(45, 212, 191, 0.07) 0, rgba(45, 212, 191, 0) 68%);
}
#stake-pool-dashboard .cv-bmap-empty {
    margin: 18px 0 8px;
    text-align: center;
}
#stake-pool-dashboard .cv-bub {
    --tint: 12, 124, 115;
    --gloss: 0.85;
    --k: 1;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--d, 60px) * 0.035);
    box-sizing: border-box;
    width: var(--d, 60px);
    height: var(--d, 60px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, var(--gloss)) 0, rgba(255, 255, 255, 0.16) 21%, rgba(255, 255, 255, 0) 43%),
        radial-gradient(circle at var(--gx, 70%) var(--gy, 84%), rgba(var(--tint), calc(var(--ga, 0.26) * var(--k))) 0, rgba(var(--tint), 0) var(--gr, 48%)),
        radial-gradient(circle at 50% 50%, rgba(var(--tint), calc(0.05 * var(--k))) 0, rgba(var(--tint), calc(0.14 * var(--k))) 60%, rgba(var(--tint), calc(0.42 * var(--k))) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(var(--tint), var(--rim, 0.5)), inset 0 -7px 14px rgba(8, 60, 55, 0.12), 0 5px 14px rgba(8, 60, 55, 0.16);
    font-family: inherit;
    color: var(--text-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    animation: cvBubIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, cvBubFloat 7s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 22ms), calc(var(--i, 0) * -0.9s);
}
body.dark-theme-body #stake-pool-dashboard .cv-bub {
    --tint: 45, 212, 191;
    --gloss: 0.5;
    --rim: 0.55;
    box-shadow: inset 0 0 0 1.5px rgba(var(--tint), var(--rim)), inset 0 -8px 16px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.3);
}
@keyframes cvBubIn {
    from { opacity: 0; scale: 0.55; }
    to { opacity: 1; scale: 1; }
}
@keyframes cvBubFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
    #stake-pool-dashboard .cv-bub {
        animation: none;
    }
}
#stake-pool-dashboard .cv-bub:hover,
#stake-pool-dashboard .cv-bub:focus-visible {
    z-index: 2;
    transform: scale(1.05);
}
#stake-pool-dashboard .cv-bub:focus-visible {
    outline: 2px solid var(--header-color);
    outline-offset: 3px;
}
#stake-pool-dashboard .cv-bub.is-picked,
#stake-pool-dashboard .cv-bub.is-both.is-picked {
    z-index: 3;
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 5px var(--header-color), inset 0 0 0 1.5px rgba(var(--tint), 0.5), 0 8px 20px rgba(0, 0, 0, 0.28);
}
/* Stake on the move tints the glass, as strongly as it moves: the largest
   movement of the epoch gives the full colour, a small one a pale glass of
   the same colour (--k scales the tint, --rim the ring). */
#stake-pool-dashboard .cv-bub.is-up,
#stake-pool-dashboard .cv-bub.is-new,
#stake-pool-dashboard .cv-bub.is-down,
#stake-pool-dashboard .cv-bub.is-exit,
#stake-pool-dashboard .cv-bub.is-both {
    --k: calc(0.45 + 0.8 * var(--mv, 1));
    --rim: calc(0.4 + 0.5 * var(--mv, 1));
}
/* (the colour gathers where the sign of the movement stands on the rim:
   at the top right for stake that arrives, at the bottom right for stake
   that leaves - --gx, --gy; --ga and --gr are its strength and its reach) */
#stake-pool-dashboard .cv-bub.is-up,
#stake-pool-dashboard .cv-bub.is-new {
    --tint: 24, 150, 78;
    --gx: 84%;
    --gy: 15%;
    --ga: 0.44;
    --gr: 62%;
}
#stake-pool-dashboard .cv-bub.is-down,
#stake-pool-dashboard .cv-bub.is-exit {
    --tint: 214, 54, 70;
    --gx: 84%;
    --gy: 85%;
    --ga: 0.44;
    --gr: 62%;
}
body.dark-theme-body #stake-pool-dashboard .cv-bub.is-up,
body.dark-theme-body #stake-pool-dashboard .cv-bub.is-new {
    --tint: 32, 214, 122;
}
body.dark-theme-body #stake-pool-dashboard .cv-bub.is-down,
body.dark-theme-body #stake-pool-dashboard .cv-bub.is-exit {
    --tint: 255, 108, 108;
}
/* (the whole stake is arriving or leaving: a dashed rim) */
#stake-pool-dashboard .cv-bub.is-new,
#stake-pool-dashboard .cv-bub.is-exit {
    outline: 2px dashed rgba(var(--tint), 0.9);
    outline-offset: 2px;
}
/* (both at once: each colour gathers at its own sign - green at the top
   right, where the stake that arrives is marked, red at the bottom right,
   where the stake that leaves is - and fades towards the other; the larger
   of the two movements reaches further (--act is the part that arrives).
   The rim turns from one colour into the other on the way down.) */
#stake-pool-dashboard .cv-bub.is-both {
    --up: 24, 150, 78;
    --down: 214, 54, 70;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, var(--gloss)) 0, rgba(255, 255, 255, 0.16) 21%, rgba(255, 255, 255, 0) 43%),
        radial-gradient(circle at 84% 15%, rgba(var(--up), calc(0.5 * var(--k))) 0, rgba(var(--up), 0) calc(30% + var(--act, 50%) * 0.5)),
        radial-gradient(circle at 84% 85%, rgba(var(--down), calc(0.5 * var(--k))) 0, rgba(var(--down), 0) calc(80% - var(--act, 50%) * 0.5)),
        linear-gradient(180deg, rgba(var(--up), calc(0.14 * var(--k))) 0, rgba(var(--up), calc(0.14 * var(--k))) calc(var(--act, 50%) - 14%), rgba(var(--down), calc(0.14 * var(--k))) calc(var(--act, 50%) + 14%), rgba(var(--down), calc(0.14 * var(--k))) 100%);
    box-shadow: inset 0 -7px 14px rgba(8, 60, 55, 0.12), 0 5px 14px rgba(8, 60, 55, 0.16);
}
body.dark-theme-body #stake-pool-dashboard .cv-bub.is-both {
    --up: 32, 214, 122;
    --down: 255, 108, 108;
    box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.3);
}
#stake-pool-dashboard .cv-bub.is-both::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2.5px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgb(var(--up)) 0, rgb(var(--up)) calc(var(--act, 50%) - 8%), rgb(var(--down)) calc(var(--act, 50%) + 8%), rgb(var(--down)) 100%);
    opacity: var(--rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
/* Inside: the logo and the amount. */
#stake-pool-dashboard .cv-bub-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 50%;
    color: var(--secondary-text-color);
    pointer-events: none;
}
#stake-pool-dashboard .cv-bub.is-small .cv-bub-face {
    width: 62%;
    height: 62%;
}
#stake-pool-dashboard .cv-bub-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
#stake-pool-dashboard .cv-bub-face svg {
    width: 78%;
    height: 78%;
}
#stake-pool-dashboard .cv-bub-face:has(> img) > svg {
    display: none;
}
#stake-pool-dashboard .cv-bub-initials {
    font-size: calc(var(--d, 60px) * 0.26);
    font-weight: 700;
    color: var(--text-color);
}
#stake-pool-dashboard .cv-bub-val {
    font-size: clamp(11px, calc(var(--d, 60px) * 0.115), 21px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}
body.dark-theme-body #stake-pool-dashboard .cv-bub-val {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
#stake-pool-dashboard .cv-bub.is-small .cv-bub-val {
    display: none;
}
/* A small sign on the rim repeats the direction for those who do not tell
   the colours apart. */
#stake-pool-dashboard .cv-bub-flow {
    position: absolute;
    right: calc(var(--d, 60px) * 0.146 - 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-size: 10px;
    color: #fff;
    pointer-events: none;
}
#stake-pool-dashboard .cv-bub-flow.is-up {
    top: calc(var(--d, 60px) * 0.146 - 10px);
    background: #1e9e57;
}
#stake-pool-dashboard .cv-bub-flow.is-down {
    bottom: calc(var(--d, 60px) * 0.146 - 10px);
    background: #d73846;
}
#stake-pool-dashboard .cv-bub.is-small .cv-bub-flow {
    right: -3px;
    width: 16px;
    height: 16px;
    font-size: 8px;
}
#stake-pool-dashboard .cv-bub.is-small .cv-bub-flow.is-up {
    top: -3px;
}
#stake-pool-dashboard .cv-bub.is-small .cv-bub-flow.is-down {
    bottom: -3px;
}
/* Stakers without stake in the epoch: apart, small, grey and struck out. */
#stake-pool-dashboard .cv-bpast {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed var(--border-color);
}
#stake-pool-dashboard .cv-bpast-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-bpast-head small {
    font-size: 12px;
    font-weight: 400;
}
#stake-pool-dashboard .cv-bpast-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
#stake-pool-dashboard .cv-bub-past {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
    border: 1.5px dashed var(--secondary-text-color);
    border-radius: 50%;
    background: var(--bg-color);
    font-family: inherit;
    opacity: 0.6;
    filter: grayscale(1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#stake-pool-dashboard .cv-bub-past:hover,
#stake-pool-dashboard .cv-bub-past.is-picked {
    opacity: 0.95;
}
#stake-pool-dashboard .cv-bub-past .cv-bub-face {
    width: 58%;
    height: 58%;
}
#stake-pool-dashboard .cv-bub-past .cv-bub-initials {
    font-size: 11px;
}
#stake-pool-dashboard .cv-bub-past::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    border-top: 1.5px solid var(--secondary-text-color);
    transform: rotate(-38deg);
    pointer-events: none;
}
/* A tooltip that a click keeps open offers the way to the page of the staker. */
.pool-tooltip .cv-tip-go {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--header-color, #0c7c73);
    text-decoration: none;
}
body.dark-theme-body .pool-tooltip .cv-tip-go {
    color: #2dd4bf;
}
.pool-tooltip.is-pinned .cv-tip-go {
    display: flex;
}
.pool-tooltip .cv-tip-go svg.cv-go {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
@media (min-width: 900px) {
    /* A wide screen: the panel stands at the left - the totals as cards,
       the stakers without stake in the epoch, the note - and the map has
       all the rest. */
    #stake-pool-dashboard .cv-bwrap {
        display: grid;
        grid-template-columns: 268px minmax(0, 1fr);
        align-items: center;
        gap: 22px;
    }
    #stake-pool-dashboard .cv-binfo {
        display: flex;
        flex-direction: column;
        align-self: start;
        gap: 10px;
        min-width: 0;
    }
    #stake-pool-dashboard .cv-bubble-chips {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    #stake-pool-dashboard .cv-bubble-chip {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "ico label" "ico value";
        align-items: center;
        gap: 2px 13px;
        padding: 15px 16px;
        border-radius: 14px;
    }
    #stake-pool-dashboard .cv-bubble-chip img.cv-ico {
        width: 42px;
        height: 42px;
        margin-bottom: 0;
    }
    #stake-pool-dashboard .cv-bubble-chip > span {
        font-size: 12.5px;
    }
    #stake-pool-dashboard .cv-bubble-chip b {
        font-size: 19px;
    }
    #stake-pool-dashboard .cv-bubble-chip b small {
        font-size: 12px;
    }
    #stake-pool-dashboard .cv-bmap {
        margin-top: 0;
    }
    #stake-pool-dashboard .cv-bpast {
        margin-top: 0;
        padding: 13px 15px 14px;
        border: 1px dashed var(--border-color);
        border-radius: 14px;
    }
    #stake-pool-dashboard .cv-bpast-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    #stake-pool-dashboard .cv-binfo > .cv-vd-small {
        margin: 2px 0 0 2px;
    }
}
/* ==========================================================================
   ROUND C4 (v3.2.0)
   ========================================================================== */
/* Main page: the title of the top block, with its tile, stands in the
   middle at every width (it did on phones only). */
#stake-pool-dashboard .total-stake-card > .title {
    justify-content: center;
}
/* The small line of a validator in a list: its chips, then the signs of its
   keys, all in one wrapping line. */
#stake-pool-dashboard .cv-chipline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
#stake-pool-dashboard .cv-chipline .cv-meta {
    display: contents;
}
/* The keys of a validator in a list are two round signs after its chips
   (identity, vote account): the kind and the key are in the tooltip, a click
   copies. The same signs as the keys of a pool on its card. */
#stake-pool-dashboard .cv-key-signs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#stake-pool-dashboard .cv-key-signs .cv-key.cv-key-ico {
    width: 22px;
    height: 22px;
    font-size: 10px;
}
@media (max-width: 560px) {
    /* (a finger needs larger signs than a pointer) */
    #stake-pool-dashboard .cv-key-signs {
        gap: 6px;
    }
    #stake-pool-dashboard .cv-key-signs .cv-key.cv-key-ico {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}
/* ==========================================================================
   STAKERS TABLE ON A PHONE (v3.2.0)
   Five columns: the staker, its stake, the stake on the move, the chart.
   The share, the stake accounts and the change against the epoch before are
   in the tooltip a tap on a row opens (and in the cards). Short numbers,
   and the signs of the set in the place of two long column names.
   ========================================================================== */
#stake-pool-dashboard .cv-st .cv-st-short,
#stake-pool-dashboard .cv-st .cv-st-hs,
#stake-pool-dashboard .cv-st-hint {
    display: none;
}
/* No stake on the move in a row: a small dot in the place of a number, at
   every width. */
#stake-pool-dashboard .cv-st .cv-st-none {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--secondary-text-color);
    opacity: 0.45;
    vertical-align: middle;
}
@media (max-width: 768px) {
    #stake-pool-dashboard .cv-st .cv-st-x,
    #stake-pool-dashboard .cv-st .cv-st-full,
    #stake-pool-dashboard .cv-st .cv-st-h.has-short > .cv-st-hl {
        display: none;
    }
    #stake-pool-dashboard .cv-st .cv-st-short {
        display: inline;
    }
    #stake-pool-dashboard .cv-st .cv-st-h.has-short > .cv-st-hs {
        display: inline-flex;
        align-items: center;
    }
    #stake-pool-dashboard .cv-st .cv-st-hs img.cv-ico {
        width: 20px;
        height: 20px;
    }
    #stake-pool-dashboard .cv-st .cv-st-hs > i {
        font-size: 12px;
        opacity: 0.7;
    }
    /* (the order is named in the bar above the table: a header shows its
       caret only while the table is sorted by it) */
    #stake-pool-dashboard .cv-st .cv-st-h:not(.is-sorted) > i {
        display: none;
    }
    #stake-pool-dashboard .cv-st .cv-st-h {
        gap: 3px;
    }
    #stake-pool-dashboard .cv-st-row {
        column-gap: 5px;
        padding-right: 8px;
    }
    #stake-pool-dashboard .cv-st-row > .cv-st-source {
        gap: 6px;
        padding-left: 9px;
        padding-right: 2px;
    }
    #stake-pool-dashboard .cv-st .cv-flow-logo:has(> img[data-logo-iso]) {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .cv-st-row > .cv-st-c:not(.cv-st-source) {
        font-variant-numeric: tabular-nums;
    }
    /* (the arrow of a column is its header here; a number keeps its colour) */
    #stake-pool-dashboard .cv-st-row > .cv-st-c > span > i {
        display: none;
    }
    /* The stake on the move stands under the sign of its column, in the
       middle of it; the chart keeps its distance from the numbers. */
    #stake-pool-dashboard .cv-st-row > .cv-st-flow {
        text-align: center;
    }
    #stake-pool-dashboard .cv-st .cv-st-h[data-src-sort="activating"],
    #stake-pool-dashboard .cv-st .cv-st-h[data-src-sort="deactivating"] {
        justify-content: center;
    }
    #stake-pool-dashboard .cv-st-row > .cv-st-trend {
        padding-left: 5px;
    }
    #stake-pool-dashboard .cv-st .cv-mini-spark {
        width: 100%;
    }
    /* A staker without stake in the epoch: its note takes the place of the
       three zeros, the chart stays in its column. */
    #stake-pool-dashboard .cv-st-row.is-past > .cv-st-c:not(.cv-st-source):not(.cv-st-trend) {
        display: none;
    }
    #stake-pool-dashboard .cv-st-row.is-past > .cv-st-source {
        grid-column: 1 / span 4;
    }
    /* A row opens its details on a tap. */
    #stake-pool-dashboard .cv-st-row[data-cv-rowtip] {
        cursor: pointer;
    }
    #stake-pool-dashboard .cv-st-row.is-picked {
        --cv-st-bg: linear-gradient(var(--chart-bg-color), var(--chart-bg-color)), var(--card-bg);
        background: var(--chart-bg-color);
        box-shadow: inset 3px 0 0 var(--header-color);
    }
    #stake-pool-dashboard .cv-st-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 10px 0 0;
        font-size: 11.5px;
        color: var(--secondary-text-color);
    }
    #stake-pool-dashboard .cv-st-hint > i {
        font-size: 11px;
        opacity: 0.7;
    }
}
@media (min-width: 481px) and (max-width: 768px) {
    /* A wide phone or a small tablet: the same five columns with more room
       (the chart takes the spare width first, then the name). */
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(140px, 1fr) 68px 58px 58px minmax(60px, 110px);
        --cv-st-min: 0px;
    }
    #stake-pool-dashboard .cv-st-row {
        column-gap: 8px;
        padding-right: 10px;
    }
}
@media (min-width: 1024px) and (max-width: 1159px) {
    /* A small laptop: the same eight columns, tighter, so the whole table is
       in sight (its last column, the chart, was cut off at these widths). */
    #stake-pool-dashboard .cv-st {
        --cv-st-cols: minmax(180px, 1.5fr) 104px minmax(90px, 0.8fr) 72px 90px 96px 78px 100px;
    }
    #stake-pool-dashboard .cv-st.no-counts {
        --cv-st-cols: minmax(180px, 1.5fr) 104px minmax(90px, 0.8fr) 90px 96px 78px 100px;
    }
    #stake-pool-dashboard .cv-st-row {
        column-gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    #stake-pool-dashboard .cv-st .cv-mini-spark {
        width: 100px;
    }
}
@media (max-width: 355px) {
    /* The narrowest phones: four columns fit, the chart does not (the cards
       of the stakers have it). */
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(116px, 1fr) 48px 40px 40px;
        --cv-st-min: 0px;
    }
    #stake-pool-dashboard .cv-st .cv-st-trend {
        display: none;
    }
}
/* ==========================================================================
   ROUND C5 (v3.2.0)
   ========================================================================== */
/* A validator without a logo. Its stand-in is a quiet piece of the map, not
   a colour of its own (nobody takes it for a logo): sand, a dashed rim - an
   empty plot - and the initials in the ink of the outlines of the sprites. */
#stake-pool-dashboard {
    --ph-bg: #f2ebd8;
    --ph-ink: #5e7376;
    --ph-ring: #c9bf9f;
}
body.dark-theme-body #stake-pool-dashboard {
    --ph-bg: #2b2a25;
    --ph-ink: #9db0b2;
    --ph-ring: #5c5747;
}
#stake-pool-dashboard .validator-image.fallback {
    box-sizing: border-box;
    border: 1.5px dashed var(--ph-ring);
    letter-spacing: 0.01em;
}
/* (where the circle around a logo has its own rim, that rim is the dashed one) */
#stake-pool-dashboard #validators-list-items-container .validator-image-wrapper:has(> .validator-image.fallback) {
    border-style: dashed;
    border-color: var(--ph-ring);
    background: var(--ph-bg);
}
#stake-pool-dashboard #validators-list-items-container .validator-image-wrapper > .validator-image.fallback {
    border: 0;
}
#stake-pool-dashboard .cv-vd-avatar .validator-image.fallback,
#stake-pool-dashboard .cv-donut-center .validator-image.fallback {
    border: 2px dashed var(--ph-ring);
}
/* (the small circle of a legend row has a rim of its own) */
#stake-pool-dashboard .stake-distribution-block .legend-avatar .validator-image.fallback {
    border: 0;
}

/* Validator page: a key is a chip - the sign of the key (a key for the
   identity, a ballot box for the vote account), its short name and the key
   itself. A wide header shows the whole key, a narrow one its short form.
   The same chip, always short, stands in the list of changes. */
#stake-pool-dashboard .cv-key.cv-keychip {
    gap: 6px;
    max-width: 100%;
    margin: 0;
    padding: 2px 10px 2px 3px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    font-size: 11.5px;
    line-height: 1.2;
}
#stake-pool-dashboard .cv-key.cv-keychip:hover {
    border-color: var(--header-color);
    background: var(--chart-bg-color);
}
#stake-pool-dashboard .cv-key.cv-keychip.is-copied {
    border-color: #28a745;
}
#stake-pool-dashboard .cv-keychip img.cv-keychip-ico {
    width: 22px;
    height: 22px;
}
/* (one width for the short names, so two chips that stand one under the
   other are of one length) */
#stake-pool-dashboard .cv-vd-keys .cv-keychip .cv-key-label {
    min-width: 24px;
}
#stake-pool-dashboard .cv-keychip .cv-key-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stake-pool-dashboard .cv-keychip .cv-key-short,
#stake-pool-dashboard .cv-keychip.is-compact .cv-key-full {
    display: none;
}
#stake-pool-dashboard .cv-keychip.is-compact .cv-key-short {
    display: inline;
}
#stake-pool-dashboard .cv-keychip.is-compact {
    padding: 1px 8px 1px 2px;
    background: var(--card-bg);
    font-size: 11px;
}
#stake-pool-dashboard .cv-keychip.is-compact img.cv-keychip-ico {
    width: 18px;
    height: 18px;
}
@media (max-width: 640px) {
    /* A narrow header: the sign and the short key, two chips in one row. */
    /* (no glyph of the copy at the end of a chip here: the chip itself is
       the control, and it keeps its width when the key is copied) */
    #stake-pool-dashboard .cv-keychip .cv-key-full,
    #stake-pool-dashboard .cv-vd-keys .cv-keychip .cv-key-label,
    #stake-pool-dashboard .cv-vd-keys .cv-keychip .cv-copy-icon,
    #stake-pool-dashboard .cv-vd-keys .cv-keychip .cv-copied-icon {
        display: none;
    }
    #stake-pool-dashboard .cv-keychip .cv-key-short {
        display: inline;
    }
    #stake-pool-dashboard .cv-vd-keys .cv-key.cv-keychip {
        padding: 3px 10px 3px 4px;
        font-size: 12px;
    }
}

/* "Validator not found" is a state of the whole page, as the 404 page is:
   empty plots of the map (a day and a night version of one picture) fill
   the page from the bar under the header down to the footer, from edge to
   edge of the window, and the message stands on a card. The backdrop is
   painted on the root of the page, which already spans the window. */
#stake-pool-dashboard.cv-is-notfound {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    /* (covers the top margin of the footer, as the sea of the 404 page does) */
    margin-bottom: -40px;
    background: #79c676 url("/brand/decor/plots-day.webp") center / cover no-repeat;
}
body.dark-theme-body #stake-pool-dashboard.cv-is-notfound {
    background-color: #1f3d37;
    background-image: url("/brand/decor/plots-night.webp");
}
#stake-pool-dashboard .cv-vd-msg.is-plots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
}
#stake-pool-dashboard .cv-vd-msg-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    padding: 24px 24px 22px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    box-shadow: 0 12px 34px rgba(16, 40, 30, 0.22);
}
@media (max-width: 560px) {
    #stake-pool-dashboard .cv-vd-msg.is-plots {
        padding: 36px 0;
    }
    #stake-pool-dashboard .cv-vd-msg-card {
        padding: 20px 16px 18px;
    }
}

/* Tooltips of a staker: every measure has the sign of the set. The change
   against the epoch before is history, so its colour is quieter than the
   colour of the stake that moves now. (A tooltip stands outside the block of
   the page, so these rules are not scoped by it.) */
.pool-tooltip .cv-tip-ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.pool-tooltip .cv-flow-row:has(> .cv-tip-ico) {
    padding: 2px 0;
}
.pool-tooltip-stat .label .cv-tip-ico {
    margin: -3px 0;
}
.cv-flow-val.is-up.is-soft {
    font-weight: 500;
    color: #4d9562;
}
.cv-flow-val.is-down.is-soft {
    font-weight: 500;
    color: #bd6870;
}
body.dark-theme-body .cv-flow-val.is-up.is-soft {
    color: #86bd92;
}
body.dark-theme-body .cv-flow-val.is-down.is-soft {
    color: #d49198;
}
/* ==========================================================================
   TOOLTIPS: NO BROKEN VALUES (v3.2.0)
   A value is one piece: an amount never leaves its unit on the next line,
   and a line "Label: value" breaks after the colon. (A tooltip stands
   outside the block of the page, so these rules are not scoped by it.)
   ========================================================================== */
.pool-tooltip.cv-tip .cv-tip-val {
    white-space: nowrap;
}
.pool-tooltip .cv-flow-val,
.pool-tooltip .pool-tooltip-stat .value {
    flex: 0 0 auto;
    white-space: nowrap;
}
.pool-tooltip .pool-tooltip-stat {
    gap: 12px;
}
/* ==========================================================================
   AUTHORITY KEYS OF A POOL (v3.2.0)
   The keys of a pool on its page are chips of the family of the keys of a
   validator: a sign, the kind of the key, the key itself (whole on a wide
   screen, short on a narrow one); a click copies. A small round link next
   to a chip opens the stake accounts of the key in Solscan.
   ========================================================================== */
#stake-pool-dashboard .pool-authority-keys h3 {
    margin-bottom: 10px;
    opacity: 0.85;
}
#stake-pool-dashboard .authority-keys-list {
    gap: 6px;
}
#stake-pool-dashboard .authority-keys-list .authority-keys-collapsible.expanded {
    gap: 6px;
}
#stake-pool-dashboard .authority-key-item.cv-authkey {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    opacity: 1;
}
#stake-pool-dashboard .cv-authkey .cv-key.cv-keychip {
    min-width: 0;
}
/* (one width for the kinds and for the keys - a key is 43 or 44 letters of
   a fixed-width type - so the keys of a list start in one column and their
   links stand in another) */
#stake-pool-dashboard .cv-authkey .cv-keychip .cv-key-label {
    min-width: 62px;
    text-align: left;
}
#stake-pool-dashboard .cv-authkey .cv-keychip .cv-key-full {
    min-width: 44ch;
    text-align: left;
}
#stake-pool-dashboard .cv-authkey a.cv-key-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-color);
    font-size: 10px;
    color: var(--secondary-text-color);
    text-decoration: none;
    opacity: 1;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#stake-pool-dashboard .cv-authkey a.cv-key-link:hover {
    border-color: var(--header-color);
    background: var(--chart-bg-color);
    color: var(--header-color);
    text-decoration: none;
}
@media (max-width: 640px) {
    /* A narrow page: the sign, the kind and the short key (no glyph of the
       copy at the end of a chip: the chip itself is the control). */
    #stake-pool-dashboard .cv-authkey .cv-keychip .cv-copy-icon,
    #stake-pool-dashboard .cv-authkey .cv-keychip .cv-copied-icon {
        display: none;
    }
    #stake-pool-dashboard .cv-authkey .cv-key.cv-keychip {
        padding: 3px 10px 3px 4px;
        font-size: 12px;
    }
    #stake-pool-dashboard .cv-authkey a.cv-key-link {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }
}
/* ==========================================================================
   NEW AND LEAVING STAKERS (v3.2.0)
   The whole stake of a staker arrives ("new": nothing active yet, all of it
   activating) or leaves ("leaving": all of its active stake deactivating).
   One sign in every view: a dashed green or a dashed red outline - the ring
   of a badge in the lists, the outline of a bubble, and here the edge of a
   card and of a table row - with a word that says it.
   ========================================================================== */
#stake-pool-dashboard .cv-state,
.pool-tooltip .cv-state {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 16px;
    padding: 0 6px;
    border: 1px dashed currentColor;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: default;
}
#stake-pool-dashboard .cv-state.is-new,
.pool-tooltip .cv-state.is-new {
    color: #28a745;
    background: rgba(40, 167, 69, 0.08);
}
#stake-pool-dashboard .cv-state.is-leaving,
.pool-tooltip .cv-state.is-leaving {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
}
/* (in a tooltip the word opens a line that spells the state out) */
.pool-tooltip .cv-tip-state {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 6px;
    font-size: 11.5px;
    line-height: 1.3;
    opacity: 0.92;
}
/* A row of the table: the outline lies over the row, inside its edges. */
#stake-pool-dashboard .cv-st-row.is-new,
#stake-pool-dashboard .cv-st-row.is-leaving {
    position: relative;
}
#stake-pool-dashboard .cv-st-row.is-new::after,
#stake-pool-dashboard .cv-st-row.is-leaving::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 3px;
    right: 4px;
    bottom: 3px;
    left: 4px;
    border: 1.5px dashed;
    border-radius: 10px;
    pointer-events: none;
}
#stake-pool-dashboard .cv-st-row.is-new::after {
    border-color: rgba(40, 167, 69, 0.75);
    background: rgba(40, 167, 69, 0.05);
}
#stake-pool-dashboard .cv-st-row.is-leaving::after {
    border-color: rgba(220, 53, 69, 0.75);
    background: rgba(220, 53, 69, 0.05);
}
#stake-pool-dashboard .cv-st .cv-vd-src-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 7px;
    margin-top: 1px;
}
/* A card: its own edge is the outline. */
#stake-pool-dashboard .cv-src-card.is-new,
#stake-pool-dashboard .cv-src-card.is-leaving {
    border-style: dashed;
    border-width: 1.5px;
}
#stake-pool-dashboard .cv-src-card.is-new {
    border-color: rgba(40, 167, 69, 0.8);
    background-image: linear-gradient(rgba(40, 167, 69, 0.05), rgba(40, 167, 69, 0.05));
}
#stake-pool-dashboard .cv-src-card.is-leaving {
    border-color: rgba(220, 53, 69, 0.8);
    background-image: linear-gradient(rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.05));
}
/* (the word stands in the corner of the card, out of the flow of its
   header: the name keeps its whole width) */
#stake-pool-dashboard .cv-src-card.is-new,
#stake-pool-dashboard .cv-src-card.is-leaving {
    position: relative;
}
#stake-pool-dashboard .cv-src-card .card-header > .cv-state {
    position: absolute;
    top: 9px;
    right: 12px;
}
@media (max-width: 480px) {
    /* (on a phone the sign of "opens the page" stands in that corner of a
       card: the word stands left of it) */
    #stake-pool-dashboard .cv-src-card .card-header > .cv-state {
        top: 8px;
        right: 36px;
    }
}
/* ==========================================================================
   ZERO, NOTHING AND NO DATA (v3.2.0)
   In the table of stakers a small dot stands where there is nothing, a
   quiet "0" where zero is the fact, "-" where the data has no value. A
   metric card with nothing on the move prints a quiet "0" as well.
   ========================================================================== */
#stake-pool-dashboard .cv-st .cv-st-pct > .cv-st-none {
    margin-right: 1px;
}
#stake-pool-dashboard .cv-st-row.is-past .cv-st-bar {
    visibility: hidden;
}
#stake-pool-dashboard .pool-metric-value.is-zero,
#stake-pool-dashboard .pool-metric-value.positive.is-zero,
#stake-pool-dashboard .pool-metric-value.negative.is-zero {
    color: var(--secondary-text-color) !important;
}
/* ==========================================================================
   STAKERS TABLE ON A PHONE: SIGNED AMOUNTS (v3.2.0)
   The stake on the move carries "+" or "-" where the arrow of the direction
   is the header of the column; the two columns get the room for it.
   ========================================================================== */
/* (the sign stands close to its number: the figures of the table are of
   one width each, a sign of that width would stand apart) */
#stake-pool-dashboard .cv-st .cv-st-sign {
    font-variant-numeric: normal;
}
@media (max-width: 480px) {
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(118px, 1fr) 50px 45px 45px 42px;
        --cv-st-min: 328px;
    }
}
@media (max-width: 379px) {
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(116px, 1fr) 48px 42px 42px 28px;
        --cv-st-min: 304px;
    }
}
@media (max-width: 355px) {
    #stake-pool-dashboard .cv-st-wrap > .cv-st,
    #stake-pool-dashboard .cv-st-wrap > .cv-st.no-counts {
        --cv-st-cols: minmax(116px, 1fr) 48px 41px 41px;
        --cv-st-min: 0px;
    }
}
/* ==========================================================================
   BUBBLES OF A POOL PAGE (v3.2.0)
   The validators of a pool as a map of bubbles: the glass, the tints and the
   signs of the stakers block of a validator page (its rules apply here as
   they are). A bubble holds the avatar of a validator - round, like every
   avatar of the site - and, when there is room, the stake of the pool with
   it. The switch of the view stands next to the search of the list.
   ========================================================================== */
#stake-pool-dashboard .cv-pv-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 20px;
}
#stake-pool-dashboard .cv-pv-tools > .pool-validators-search-container {
    flex: 1 1 300px;
    min-width: 0;
    margin-bottom: 0 !important;
}
#stake-pool-dashboard .cv-pv-tools > .cv-vd-toggle {
    flex: 0 0 auto;
}
#stake-pool-dashboard .cv-pv-tools > .cv-vd-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* (the sort bar belongs to the list: the map has no order to choose) */
#stake-pool-dashboard #pool-validators-sort-bar:empty {
    display: none;
}
#stake-pool-dashboard .cv-pbmap {
    margin-top: 6px;
}
#stake-pool-dashboard .cv-pbub .cv-bub-face {
    width: 54%;
    height: 54%;
}
#stake-pool-dashboard .cv-pbub.is-small .cv-bub-face {
    width: 70%;
    height: 70%;
}
#stake-pool-dashboard .cv-pbub .cv-bub-face img {
    border-radius: 50%;
    object-fit: cover;
    background: var(--logo-bg, #fff);
    filter: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
#stake-pool-dashboard .cv-pbub .cv-bub-initials {
    font-size: calc(var(--d, 60px) * 0.24);
    color: var(--ph-ink);
    letter-spacing: 0.01em;
}
/* A map of many bubbles stands still: they arrive quickly and do not float
   (a hundred endless animations are too much for a phone). */
#stake-pool-dashboard .cv-bmap.is-many .cv-bub {
    animation: cvBubIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
    animation-delay: calc(var(--i, 0) * 12ms);
}
@media (prefers-reduced-motion: reduce) {
    #stake-pool-dashboard .cv-bmap.is-many .cv-bub {
        animation: none;
    }
}
@media (max-width: 560px) {
    /* Phones: the switch takes a line of its own, two equal halves. */
    #stake-pool-dashboard .cv-pv-tools > .cv-vd-toggle {
        display: flex;
        flex: 1 1 100%;
    }
    #stake-pool-dashboard .cv-pv-tools > .cv-vd-toggle button {
        flex: 1 1 0;
        justify-content: center;
    }
}
/* ==========================================================================
   ROUND C7 (v3.2.0)
   Small things after the review of 09.10: the note of the validators card on
   the map of a pool, the rank of a phone card in its corner, a quieter accent
   of the pool tiles in the dark theme, the colours of stake on the move and
   of the change against the epoch before, links that are not links, keys in
   tooltips, the sign of the top block.
   ========================================================================== */
/* The card of validators on the map of a pool: how many of them are drawn.
   The note stands after the label, a dot between them; where the card is too
   narrow for one line it goes under the label, and the dot stays behind (it
   hangs in the gap before the note, and at the start of a line that gap is
   outside the label). While the note is there the cards stand by their top
   edge, so the signs and the numbers of the four keep one line when the note
   makes this card taller than its neighbours. */
#stake-pool-dashboard .stat-label.cv-stat-parts {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.9em;
    overflow: hidden;
}
#stake-pool-dashboard .cv-stat-onmap {
    position: relative;
}
#stake-pool-dashboard .cv-stat-onmap::before {
    content: "\00b7";
    position: absolute;
    top: 0;
    left: -0.9em;
    width: 0.9em;
    text-align: center;
}
#stake-pool-dashboard .stat-label.cv-stat-parts > .epoch-inline-note {
    flex: 0 0 100%;
}
#stake-pool-dashboard .pool-validators-stats-summary:has(.cv-stat-onmap) .pool-validators-stat-card {
    align-items: flex-start;
}
/* Phones, two cards in a row: the note of the map says "N on map", which
   fits a line of the card. */
@media (max-width: 400px) {
    #stake-pool-dashboard .cv-stat-the {
        display: none;
    }
}
/* The narrowest phones: the cards under a search (a pool page and the
   Validators tab) keep smaller signs and less air, so every number and label
   stays inside its card. */
@media (max-width: 359px) {
    #stake-pool-dashboard .validators-stat-card,
    #stake-pool-dashboard .pool-validators-stat-card {
        padding: 10px 8px;
        gap: 6px;
    }
    #stake-pool-dashboard .validators-stat-card > img.cv-ico,
    #stake-pool-dashboard .pool-validators-stat-card .stat-icon.stat-icon-plain img.cv-ico {
        width: 28px;
        height: 28px;
    }
    #stake-pool-dashboard .pool-validators-stat-card .stat-icon:not(.stat-icon-plain),
    #stake-pool-dashboard .pool-validators-stat-card .stat-icon:has(> img[data-logo-iso]) {
        width: 30px;
        height: 30px;
    }
    #stake-pool-dashboard .validators-stat-card .stat-label,
    #stake-pool-dashboard .pool-validators-stat-card .stat-label {
        font-size: 10.5px;
    }
}
/* The change against the epoch before, wherever it stands: the quiet green
   and red of its tooltip row (the bright ones belong to stake that moves now). */
#stake-pool-dashboard .cv-vd-pos.is-soft,
#stake-pool-dashboard .cv-cell-text b.cv-vd-pos.is-soft {
    color: #4d9562;
}
#stake-pool-dashboard .cv-vd-neg.is-soft,
#stake-pool-dashboard .cv-cell-text b.cv-vd-neg.is-soft {
    color: #bd6870;
}
body.dark-theme-body #stake-pool-dashboard .cv-vd-pos.is-soft,
body.dark-theme-body #stake-pool-dashboard .cv-cell-text b.cv-vd-pos.is-soft {
    color: #86bd92;
}
body.dark-theme-body #stake-pool-dashboard .cv-vd-neg.is-soft,
body.dark-theme-body #stake-pool-dashboard .cv-cell-text b.cv-vd-neg.is-soft {
    color: #d49198;
}
/* A card of a staker without stake in the epoch is not a link: it stays in
   its place under the pointer. */
#stake-pool-dashboard .cv-src-card.is-past:hover {
    transform: none;
}
/* A key in a tooltip: one piece. It stands in one line where the tooltip has
   the room (it may be wider for that) and in two equal halves where it has not. */
.pool-tooltip.cv-tip:has(.cv-tip-key) {
    max-width: min(336px, calc(100vw - 20px));
}
.pool-tooltip.cv-tip .cv-tip-key {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace;
    font-size: 11px;
    letter-spacing: 0;
}
.pool-tooltip.cv-tip .cv-tip-key > span {
    display: inline-block;
    white-space: nowrap;
}
/* The sign of the top block. The tile is not an image to drag, select or
   save: the pointer meets its wrapper, which keeps a tooltip for those who
   look at the mountain. */
#stake-pool-dashboard .total-stake-card > .title > .cv-hero-mark {
    display: block;
    line-height: 0;
}
#stake-pool-dashboard .cv-hero-mark > img.cv-hero-tile {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.25s ease;
}
@media (hover: hover) {
    #stake-pool-dashboard .cv-hero-mark:hover > img.cv-hero-tile {
        transform: translateY(-2px) scale(1.06);
    }
}
.pool-tooltip .cv-tip-ico.cv-tip-summit {
    flex-basis: 30px;
    width: 30px;
    height: 25px;
}
/* The rank of a phone card of the validators list stands in its corner, as
   far from the top edge as from the left one. */
@media (max-width: 768px) {
    #stake-pool-dashboard .validator-item .validator-rank {
        align-self: start;
        line-height: 1;
    }
}
/* Bubbles of a pool page. A map of forty-one to a hundred and twenty bubbles
   sways like a small one: its bubbles arrive quickly, and each takes one of
   eight phases, so neighbours move apart. (A larger map stands still.) */
#stake-pool-dashboard .cv-bmap.is-crowd .cv-bub {
    animation: cvBubIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, cvBubFloat 7s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 12ms), calc(var(--f, 0) * -0.875s);
}
@media (prefers-reduced-motion: reduce) {
    #stake-pool-dashboard .cv-bmap.is-crowd .cv-bub {
        animation: none;
    }
}
/* A map out of sight does not sway (its bubbles still arrive). */
#stake-pool-dashboard .cv-bmap.is-away .cv-bub {
    animation-play-state: running, paused;
}
/* The smallest bubbles of a crowd: the avatar fills the glass, and the sign
   of stake on the move is as small as it can be read. */
#stake-pool-dashboard .cv-pbub.is-tiny .cv-bub-face {
    width: 78%;
    height: 78%;
}
#stake-pool-dashboard .cv-pbub.is-tiny .cv-bub-initials {
    font-size: max(6px, calc(var(--d, 60px) * 0.24));
    letter-spacing: 0;
}
#stake-pool-dashboard .cv-pbub.is-tiny .cv-bub-flow {
    right: -3px;
    width: 12px;
    height: 12px;
    font-size: 6.5px;
}
#stake-pool-dashboard .cv-pbub.is-tiny .cv-bub-flow.is-up {
    top: -3px;
}
#stake-pool-dashboard .cv-pbub.is-tiny .cv-bub-flow.is-down {
    bottom: -3px;
}
/* The sign of a commission in the details of a bubble: the letter of its chip. */
.pool-tooltip .cv-flow-logo.cv-tip-letter {
    font-size: 10.5px;
    color: var(--secondary-text-color);
}
.pool-tooltip .cv-flow-val.is-none {
    font-weight: 500;
    color: var(--secondary-text-color);
}
#stake-pool-dashboard .cv-stat-of {
    white-space: nowrap;
}
/* New and leaving validators in the list of a pool: the dashed green or red
   outline of the other views, and the word in the corner of the tile of the
   validator (the end of its name line). A row of the wide list keeps the
   outline inside its edges; a sheet of the narrow list wears it as its own
   edge. */
#stake-pool-dashboard .cv-vrow-name > .cv-state {
    margin-left: auto;
}
#stake-pool-dashboard .cv-vrow.is-new,
#stake-pool-dashboard .cv-vrow.is-leaving {
    position: relative;
}
#stake-pool-dashboard .cv-vrow.is-new::after,
#stake-pool-dashboard .cv-vrow.is-leaving::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 5px;
    bottom: 4px;
    left: 5px;
    border: 1.5px dashed;
    border-radius: 15px;
    pointer-events: none;
}
#stake-pool-dashboard .cv-vrow.is-new::after {
    border-color: rgba(40, 167, 69, 0.75);
    background: rgba(40, 167, 69, 0.05);
}
#stake-pool-dashboard .cv-vrow.is-leaving::after {
    border-color: rgba(220, 53, 69, 0.75);
    background: rgba(220, 53, 69, 0.05);
}
@container cvrows (max-width: 699.98px) {
    #stake-pool-dashboard .cv-vrow.is-new,
    #stake-pool-dashboard .cv-vrow.is-leaving {
        border-style: dashed;
        border-width: 1.5px;
    }
    #stake-pool-dashboard .cv-vrow.is-new {
        border-color: rgba(40, 167, 69, 0.8);
        background-image: linear-gradient(rgba(40, 167, 69, 0.05), rgba(40, 167, 69, 0.05));
    }
    #stake-pool-dashboard .cv-vrow.is-leaving {
        border-color: rgba(220, 53, 69, 0.8);
        background-image: linear-gradient(rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0.05));
    }
    #stake-pool-dashboard .cv-vrow.is-new::after,
    #stake-pool-dashboard .cv-vrow.is-leaving::after {
        content: none;
    }
}
/* ==========================================================================
   ROUND C8 (v3.2.0)
   The last small things before the release: two key chips that stand one
   under the other are one block; the age chip of the Age order has a line of
   its own.
   ========================================================================== */
/* Key chips one under the other (the header of a validator page, the keys
   of a pool): a small gap, so the two read as one block. Side by side they
   keep the gap they had. */
#stake-pool-dashboard .cv-vd-keys,
#stake-pool-dashboard .cv-vd-header .cv-vd-keys {
    row-gap: 3px;
}
#stake-pool-dashboard .authority-keys-list,
#stake-pool-dashboard .authority-keys-list .authority-keys-collapsible.expanded {
    gap: 3px;
}
/* In the Age order the age of the vote account stands on a line of its own
   under the chips and the keys, in every row of both lists: the first line
   is the one a row has in any other order, and no row breaks where its
   neighbour does not. */
#stake-pool-dashboard .cv-chipline .cv-age-line {
    display: flex;
    flex: 0 0 100%;
    order: 9;
    min-width: 0;
}
@media (max-width: 768px) {
    /* (the phone card of the validators list is centred, and so is this line) */
    #stake-pool-dashboard .validator-item .validator-main-info > .cv-chipline .cv-age-line {
        justify-content: center;
    }
}