/* --- Глобальні змінні --- */
    .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(0, 123, 255, 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-fit, 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 WordPress/Astra 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%; }

    /* --- Elementor reset --- */
    .elementor-widget-container .pool-keys-toggle:hover,
    .elementor-widget-container .pool-keys-toggle:focus { background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; transition: none !important; }

    /* --- 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-fit, 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    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);
}

body.elementor-editor-active #sofzp-loader-overlay {
    display: none !important;
}

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

/* Breadcrumbs Navigation - посилені стилі для Elementor */
#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(0, 123, 255, 0.05) !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, 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	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: 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;
	}
}