/* ===========================================================================
   best.css v8.5.5 FINAL
   
   ✅ Патч v8.4.2: align-items: baseline для .emitent-link-btn
   ✅ Оптимизация: 5 !important (было 21)
   ✅ Размер: 83 KB
   
   Date: 2025-10-26
   Status: PRODUCTION READY
   
   =========================================================================== */

/* ===========================================================================
   1. NORMALIZE & BASE STYLES
   =========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: var(--font-md);
    line-height: 1.5;
    color: #1e3a3a;
    background-color: #e8eef1;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

a {
    color: #4a9d9d;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #356b6b;
    text-decoration: underline;
}

img {
    border-style: none;
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    overflow: visible;
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/* ===========================================================================
   2. FONTS - Inter only
   =========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Inter Regular'), local('Inter-Regular'),
         url('/fonts/Inter-Regular.woff2') format('woff2'),
         url('/fonts/Inter-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Inter Medium'), local('Inter-Medium'),
         url('/fonts/Inter-Medium.woff2') format('woff2'),
         url('/fonts/Inter-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Inter SemiBold'), local('Inter-SemiBold'),
         url('/fonts/Inter-SemiBold.woff2') format('woff2'),
         url('/fonts/Inter-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Inter Bold'), local('Inter-Bold'),
         url('/fonts/Inter-Bold.woff2') format('woff2'),
         url('/fonts/Inter-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
         url('/fonts/Inter-ExtraBold.woff2') format('woff2'),
         url('/fonts/Inter-ExtraBold.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Inter Black'), local('Inter-Black'),
         url('/fonts/Inter-Black.woff2') format('woff2'),
         url('/fonts/Inter-Black.woff') format('woff');
}

/* ===========================================================================
   3. UTILITY CLASSES
   =========================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

.hidden {
    display: none;
}

/* Timer label declensions fix - prevent showing all three forms */
.timer-label span.hidden,
.timer-label [data-label].hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.btn {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: var(--radius-xs);
    font-size: var(--font-md);
    font-weight: 500;
    transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.btn-default {
    background: #f8f9fa;
}

.btn-collapser {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-xs);
    cursor: pointer;
}

.btn-collapser .icon-bar {
    width: 24px;
    height: 3px;
    background: #fff;
    display: block;
    border-radius: 2px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.text-white {
    color: #ffffff;
}

.text-white-rgba {
    color: rgba(255, 255, 255, 0.9);
}

.width-100-percents {
    width: 100%;
}

.line-height-normal {
    line-height: normal;
}

/* ===========================================================================
   4. LAZY LOADING ANIMATION
   =========================================================================== */

.lazy-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer var(--duration-slowest) infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===========================================================================
   5. PREMIUM BREADCRUMBS v4.3 GRADIENT
   =========================================================================== */

.breadcrumbs {
    margin: var(--spacing-lg) 0;
    padding: 11px var(--spacing-lg);
    font-size: var(--font-md);
    color: #4a6a6a;
    background: linear-gradient(to bottom, #f0f8f8 0%, #e0f2f2 100%);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 4px 12px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(209, 220, 226, 0.5);
    position: sticky;
    top: 42px;
    z-index: var(--z-breadcrumb);
    overflow: hidden;
    transition: box-shadow var(--duration-normal) ease;
}

.breadcrumbs:hover {
    box-shadow: var(--shadow-xl);
}

.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm);
    position: relative;
    z-index: var(--z-breadcrumb);
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";
    margin-left: var(--gap-sm);
    color: #7a9292;
    font-size: var(--font-2xl);
    font-weight: 300;
    transition: color var(--duration-fast) ease;
}

.breadcrumbs li:has(+ li a:hover)::after {
    color: #666;
}

.breadcrumbs a {
    color: #0066cc;
    text-decoration: none;
    padding: 4px var(--spacing-xs);
    border-radius: var(--radius-sm);
    position: relative;
    transition: 
        color var(--duration-normal) var(--ease-smooth),
        background var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
}

.breadcrumbs a:hover {
    color: #0052a3;
    background: rgba(0, 102, 204, 0.08);
    transform: translateY(-1px);
}

.breadcrumbs a:active {
    transform: translateY(0);
}

.breadcrumbs a:focus {
    outline: 2px solid #4facfe;
    outline-offset: 2px;
    background: rgba(79, 172, 254, 0.1);
}

.breadcrumbs a:focus:not(:focus-visible) {
    outline: none;
}

.breadcrumbs li.active span,
.breadcrumbs .current {
    color: #1e3a3a;
    font-weight: 500;
    padding: 4px var(--spacing-xs);
}

.breadcrumb-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #0066cc 0%, #4facfe 100%);
    border-radius: 2px 2px 0 0;
    filter: blur(1px);
    opacity: 0;
    transition: 
        left 0.4s var(--ease-smooth),
        width 0.4s var(--ease-smooth),
        opacity var(--duration-normal) ease;
    z-index: var(--z-base);
    pointer-events: none;
}

.breadcrumb-indicator.active {
    opacity: 1;
}

.breadcrumbs.style-slash li:not(:last-child)::after {
    content: "/";
    font-size: var(--font-md);
}

.breadcrumbs.style-arrow li:not(:last-child)::after {
    content: "→";
    font-size: var(--font-md);
}

.breadcrumbs.style-dot li:not(:last-child)::after {
    content: "•";
    font-size: var(--font-sm);
    margin-left: var(--gap-md);
}

.breadcrumbs.dark {
    background: #1e1e1e;
    color: #ccc;
    box-shadow: var(--shadow-teal-sm);
}

.breadcrumbs.dark a {
    color: #66b3ff;
}

.breadcrumbs.dark a:hover {
    color: #99ccff;
    background: rgba(102, 179, 255, 0.1);
}

.breadcrumbs.dark li.active span,
.breadcrumbs.dark .current {
    color: #fff;
}

.breadcrumbs.dark li:not(:last-child)::after {
    color: #666;
}

.breadcrumbs span {
    margin: 0 var(--spacing-xs);
    color: #7a9292;
}

/* ===========================================================================
   6. DESIGN v6.0 COMPACT TEAL - CSS VARIABLES
   =========================================================================== */

:root {
    /* Theme Colors */
    --header-bg: #356b6b;
    --page-bg: #e8eef1;
    --card-bg: #ffffff;
    --card-border: #d1dce2;
    --text-primary: #1e3a3a;
    --text-secondary: #4a6a6a;
    --text-muted: #7a9292;
    --accent-teal: #4a9d9d;
    --accent-light: #e0f2f2;
    --success: #5a9a72;
    --warning: #d4a520;
    --danger: #c44569;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 20px;
    --spacing-xl: 24px;
    --spacing-2xl: 30px;
    --spacing-3xl: 40px;
    
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 20px;
    
    /* Gaps */
    --gap-xs: 6px;
    --gap-sm: 8px;
    --gap-md: 10px;
    --gap-lg: 12px;
    --gap-xl: 14px;
    --gap-2xl: 16px;
    
    /* Font Sizes */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-base: 13px;
    --font-md: 14px;
    --font-lg: 15px;
    --font-xl: 16px;
    --font-2xl: 18px;
    --font-3xl: 20px;
    --font-3-5xl: 22px;
    --font-4xl: 24px;
    --font-4-5xl: 36px;
    --font-5xl: 28px;
    --font-5-5xl: 42px;
    --font-6xl: 48px;
    --font-7xl: 56px;
    
    /* Shadows */
    --shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-hero: 0 4px 12px rgba(53, 107, 107, 0.15);
    --shadow-teal-sm: 0 2px 8px rgba(53, 107, 107, 0.3);
    --shadow-teal-md: 0 4px 12px rgba(74, 157, 157, 0.15);
    --shadow-teal-lg: 0 4px 12px rgba(74, 157, 157, 0.2);
    --shadow-teal-pulse: 0 6px 16px rgba(74, 157, 157, 0.6);
    --shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-mobile-nav: 2px 0 8px rgba(0, 0, 0, 0.2);
    --shadow-point: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-point-active: 0 4px 12px rgba(74, 157, 157, 0.4);
    
    /* Z-Index Layers */
    --z-base: 1;
    --z-breadcrumb: 10;
    --z-overlay: 990;
    --z-nav-mobile: 995;
    --z-header: 1000;
    --z-toast: 1100;
    
    /* Transitions & Animations */
    --duration-instant: 0.1s;
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.6s;
    --duration-slower: 1s;
    --duration-slowest: 1.5s;
    --duration-pulse: 2s;
    --duration-countdown: 3s;
    --ease-linear: linear;
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Site Main Content Variables */
    --site-bg-color: #f8f9fa;
    --site-bg-color-dark: #1a1a1a;
    --content-max-width: 1200px;
    --site-min-height-desktop: 60vh;
    --site-min-height-fallback: 350px;
    --content-padding-desktop: 20px;
    --content-padding-laptop: 18px;
    --content-padding-tablet: 16px;
    --content-padding-large: 14px;
    --content-padding-mobile: 12px;
    --content-padding-small: 10px;
    --content-padding-mini: 8px;
    --content-spacing-desktop: 20px;
    --focus-color: #0066cc;
    --focus-width: 2px;
    --focus-offset: 2px;
}

/* ===========================================================================
   7. LAYOUT - Container
   =========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* ===========================================================================
   8. HERO SECTION
   =========================================================================== */

.hero {
    background: linear-gradient(135deg, #356b6b 0%, #4a9d9d 100%);
    color: #ffffff;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-hero);
}

.hero-header {
    display: flex;
    align-items: center;
    gap: var(--gap-lg);
    margin-bottom: var(--gap-lg);
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: 4px var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    font-size: var(--font-xl);
    font-weight: 500;
}

.instrument-type {
    display: inline-block;
    padding: 4px var(--spacing-sm);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--header-bg);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero .instrument-type {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
}

.instrument-card .instrument-type {
    background: var(--accent-light);
    color: var(--header-bg);
}

.hero-title {
    display: flex;
    align-items: baseline;
    gap: var(--gap-lg);
    flex-wrap: wrap;
    margin-bottom: var(--gap-sm);
}

.hero-title h1 {
    font-size: var(--font-5xl);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.company-link {
    font-size: var(--font-3xl);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.company-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.subtitle {
    font-size: var(--font-xl);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    opacity: 0.95;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: baseline;
}

.subtitle-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    align-items: center;
    font-size: var(--font-md);
    color: rgba(255, 255, 255, 0.9);
    margin-top: var(--gap-sm);
    font-weight: 500;
    opacity: 0.9;
}

.subtitle-meta .divider {
    color: rgba(255, 255, 255, 0.6);
}

.subtitle-meta .listing-level,
.subtitle-meta .maturity-date {
    white-space: nowrap;
}

.hero-description {
    font-size: var(--font-base);
    line-height: 1.6;
    opacity: 0.9;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bond-micro-description,
.company-legal-name {
    font-size: var(--font-lg);
    font-weight: 500;
    opacity: 0.85;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.bond-micro-description {
    margin-bottom: var(--spacing-xs);
}

.company-legal-name {
    margin-bottom: var(--spacing-md);
    font-style: italic;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-lg);
    margin-top: var(--spacing-md);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: 10px var(--spacing-md);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-round);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: 1.4;
    transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.badge:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.sector-icon-large {
    font-size: var(--font-6xl);
    margin-right: var(--spacing-md);
    line-height: 1;
}

.hero-content-sector {
    flex: 1;
}

/* ===========================================================================
   9. TWO-COLUMN LAYOUT
   =========================================================================== */

.stock-two-columns,
.container .stock-two-columns,
.content-layout,
.container .content-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    align-items: start;
}

/* ===========================================================================
   10. SECTION
   =========================================================================== */

.section {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--card-border);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-light);
}

.section-title span:first-child {
    font-size: var(--font-3xl);
}

/* ===========================================================================
   11. IDENTIFIERS GRID
   =========================================================================== */

.identifiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-xl);
}

.id-card {
    background-color: var(--accent-light);
    border: 1px solid #c0e5e5;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    position: relative;
    transition: transform var(--duration-normal) var(--ease-smooth), 
                box-shadow var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth);
}

.id-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-teal-md);
    border-color: var(--accent-teal);
}

.id-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--gap-xs);
}

.id-value {
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--gap-sm);
    word-break: break-all;
}

.copy-btn {
    width: 100%;
    padding: var(--gap-xs) var(--spacing-sm);
    background-color: var(--accent-teal);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth);
}

.copy-btn:hover {
    background-color: var(--header-bg);
    transform: translateY(-1px);
    box-shadow: var(--shadow-teal-sm);
}

.copy-btn:active,
.copy-btn.copying {
    transform: scale(0.95);
}

/* ===========================================================================
   12. DETAILS SECTIONS
   =========================================================================== */

.details-section {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--gap-sm);
    background-color: #ffffff;
}

.details-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background-color var(--duration-fast) ease;
}

.details-summary::-webkit-details-marker {
    display: none;
}

.details-summary:hover {
    background-color: var(--accent-light);
}

.summary-left {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    font-weight: 600;
    color: var(--text-primary);
}

.summary-left span:first-child {
    font-size: var(--font-2xl);
}

.summary-left .summary-icon {
    font-size: var(--font-2xl);
}

.summary-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
    line-height: inherit;
}

.summary-count {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.summary-arrow {
    font-size: var(--font-sm);
    color: var(--text-muted);
    transition: transform var(--duration-normal) ease;
}

details[open] .summary-arrow {
    transform: rotate(180deg);
}

.details-content {
    padding: 0 var(--spacing-md) var(--spacing-sm);
    border-top: 1px solid var(--card-border);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.param-row {
    display: flex;
    justify-content: space-between;
    padding: var(--gap-md) 0;
    border-bottom: 1px solid #f0f4f5;
}

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

.param-label {
    font-size: var(--font-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.param-value {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.details-content dl {
    margin: 0;
    padding: 0;
}

.details-content dt {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin-top: var(--gap-md);
}

.details-content dt:first-child {
    margin-top: 0;
}

.details-content dd {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--gap-md) 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.details-content dd:last-child {
    margin-bottom: 0;
}

/* ===========================================================================
   13. METRICS GRID
   =========================================================================== */

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--gap-xl);
    margin-bottom: var(--spacing-xl);
}

.metric-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    text-align: center;
    transition: border-color var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth);
}

.metric-card:hover {
    border-color: var(--accent-teal);
    box-shadow: var(--shadow-teal-md);
    transform: translateY(-2px);
}

.metric-icon {
    font-size: var(--font-4xl);
    margin-bottom: var(--gap-xs);
}

.metric-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.metric-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--text-primary);
}

/* ===========================================================================
   14. INFO NOTICE
   =========================================================================== */

.info-notice {
    background-color: var(--accent-light);
    border-left: 4px solid var(--accent-teal);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--text-secondary);
}

.info-notice strong {
    color: var(--text-primary);
    font-weight: 600;
}

.info-notice a {
    color: var(--accent-teal);
    font-weight: 500;
}

/* ===========================================================================
   15. SIDEBAR
   =========================================================================== */

.sidebar {
    position: sticky;
    top: var(--spacing-lg);
    align-self: start;
}

/* ===========================================================================
   16. EMITENT CARD
   =========================================================================== */

.emitent-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--card-border);
    margin-bottom: var(--spacing-md);
}

.emitent-header {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.emitent-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-sm);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInLogo var(--duration-slow) var(--ease-out);
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.emitent-logo img,
.emitent-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.emitent-label {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--gap-xs);
}

.emitent-name {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--gap-sm);
    line-height: 1.3;
}

.emitent-name a {
    color: var(--text-primary);
    text-decoration: none;
}

.emitent-name a:hover {
    color: var(--accent-teal);
}

.emitent-inn,
.emitent-inn-small {
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
}

.emitent-inn-small {
    font-size: var(--font-xs);
    margin-bottom: var(--gap-sm);
}

.emitent-description {
    font-size: var(--font-base);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.emitent-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--spacing-md);
}

.link-btn {
    display: block;
    padding: var(--gap-md) var(--spacing-md);
    background-color: var(--accent-light);
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-base);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.link-btn:hover {
    background-color: var(--accent-teal);
    color: #ffffff;
    text-decoration: none;
}

.link-btn-primary {
    background-color: var(--accent-teal);
    color: #ffffff;
}

.link-btn-primary:hover {
    background-color: var(--header-bg);
}

.update-info {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-align: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--card-border);
}

.emitent-card-logo {
    width: 100%;
    height: 80px;
    background: #f8f9fa;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.emitent-instruments-count {
    margin-top: auto;
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--card-border);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* ===========================================================================
   17. TOAST
   =========================================================================== */

.toast {
    position: fixed;
    bottom: var(--spacing-2xl);
    right: var(--spacing-2xl);
    background-color: var(--success);
    color: #ffffff;
    padding: var(--gap-xl) var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-toast);
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    font-size: var(--font-md);
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease, transform var(--duration-normal) ease;
    z-index: var(--z-toast);
}

.toast.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Toast fade-out animation */
.toast.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.toast span:first-child {
    font-size: var(--font-2xl);
}

/* ===========================================================================
   18. INSTRUMENT CARDS
   =========================================================================== */

.instruments-grid {
    display: grid;
    gap: var(--gap-lg);
}

.instrument-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.instrument-card:hover {
    border-color: var(--accent-teal);
    box-shadow: var(--shadow-teal-lg);
    transform: scale(1.02) translateY(-2px);
    text-decoration: none;
}

.instrument-code {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--header-bg);
    margin-bottom: 4px;
}

.instrument-name {
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin-bottom: var(--gap-sm);
}

.instrument-description {
    font-size: var(--font-base);
    color: var(--text-muted);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ===========================================================================
   19. ALERTS
   =========================================================================== */

.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-heading {
    margin-top: 0;
    margin-bottom: var(--gap-sm);
    font-size: var(--font-2xl);
    font-weight: 700;
}

.alert hr {
    margin: var(--spacing-sm) 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ===========================================================================
   20. BOND PAGE ANIMATIONS v7.9.0 GREEN
   NEW: Green gradient progress bar (15px height)
   NEW: Animation via @keyframes (repeats on page reload)
   =========================================================================== */

.coupon-timeline {
    position: relative;
    padding: 32px 0;
    margin: var(--spacing-xl) 0;
}

.timeline-bar {
    position: relative;
    width: 100%;
    height: 15px;
    background: #e8f5e9;
    border-radius: 8px;
    margin-bottom: 48px;
}

.timeline-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #66bb6a 0%, #388e3c 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(102, 187, 106, 0.3);
    animation: timelineProgressFill 5s ease forwards;
}

@keyframes timelineProgressFill {
    from {
        width: 0;
    }
    to {
        width: 65%;
    }
}

.timeline-points {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.timeline-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
}

.point-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d1dce2;
    border: 3px solid #ffffff;
    box-shadow: var(--shadow-point);
    margin-bottom: var(--spacing-sm);
    transition: background var(--duration-normal) ease, width var(--duration-normal) ease, height var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.timeline-point.past .point-marker {
    background: #5a9a72;
}

.timeline-point.active .point-marker {
    background: #4a9d9d;
    width: 20px;
    height: 20px;
    box-shadow: var(--shadow-point-active);
}

.timeline-point.future .point-marker {
    background: #e0f2f2;
}

.point-marker.pulse {
    animation: pulse var(--duration-pulse) var(--ease-in-out) infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-point-active);
    }
    50% {
        transform: scale(1.1);
        box-shadow: var(--shadow-teal-pulse);
    }
}

.point-label {
    font-size: var(--font-sm);
    color: #4a6a6a;
    line-height: 1.4;
    max-width: 120px;
}

.point-label strong {
    display: block;
    font-size: var(--font-md);
    color: #1e3a3a;
    font-weight: 700;
    margin-bottom: 4px;
}

.point-label span {
    display: block;
    font-size: var(--font-xs);
    color: #7a9292;
}

.point-amount {
    margin-top: var(--gap-sm);
    padding: 4px var(--spacing-sm);
    background: #e0f2f2;
    border-radius: var(--radius-lg);
    font-size: var(--font-base);
    font-weight: 600;
    color: #356b6b;
}

.countdown-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafa 100%);
    border: 2px solid #d1dce2;
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.countdown-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2xl);
}

.countdown-header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--spacing-md);
}

.countdown-icon {
    font-size: var(--font-4xl);
}

.countdown-label {
    font-size: var(--font-md);
    font-weight: 600;
    color: #4a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-value {
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.countdown-number {
    display: block;
    font-size: var(--font-7xl);
    font-weight: 800;
    color: #356b6b;
    line-height: 1;
    background: linear-gradient(135deg, #4a9d9d 0%, #356b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: countdownPulse var(--duration-countdown) var(--ease-in-out) infinite;
}

@keyframes countdownPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

.countdown-unit {
    display: block;
    font-size: var(--font-xl);
    font-weight: 500;
    color: #7a9292;
    margin-top: var(--gap-sm);
}

.countdown-date {
    text-align: center;
    padding: var(--spacing-sm);
    background: #e0f2f2;
    border-radius: var(--radius-md);
    font-size: var(--font-lg);
    font-weight: 600;
    color: #356b6b;
}

.progress-ring-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-xl) 0;
}

.progress-ring {
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset var(--duration-slowest) var(--ease-in-out);
    stroke-linecap: round;
}

.progress-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-ring-percent {
    display: block;
    font-size: var(--font-4xl);
    font-weight: 800;
    color: #356b6b;
    line-height: 1;
}

.progress-ring-label {
    display: block;
    font-size: var(--font-xs);
    font-weight: 500;
    color: #7a9292;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===========================================================================
   21. SECTOR PAGE STYLES v6.0.8
   =========================================================================== */

.emitents-grid-sector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.sidebar-card-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--accent-light);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.sector-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.sector-link-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    text-align: left;
}

.sector-link-icon {
    font-size: var(--font-2xl);
    flex-shrink: 0;
}

.sector-link-name {
    font-size: var(--font-base);
}

.sector-more-link {
    opacity: 0.7;
    font-size: var(--font-sm);
    text-align: center;
}

.sector-stats-content {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sector-stat-row {
    margin-bottom: var(--gap-sm);
}

.sector-update-info {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--card-border);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.text-content {
    display: none;
}

.text-content.loaded {
    display: block;
}

/* ===========================================================================
   22. SECTORS PAGE STYLES v6.0.9
   =========================================================================== */

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.sector-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sector-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.sector-card-icon {
    font-size: var(--font-6xl);
    text-align: center;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.sector-card-title {
    font-size: var(--font-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.sector-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.sector-card-title a:hover {
    color: var(--accent-teal);
}

.sector-card-stats {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--card-border);
}

.sector-stat-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.sector-stat-icon {
    font-size: var(--font-xl);
    flex-shrink: 0;
}

.sector-stat-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-md);
}

.sector-stat-label {
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.sector-card-description {
    font-size: var(--font-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sector-card details {
    margin-bottom: var(--gap-sm);
}

.sector-card details:last-of-type {
    margin-bottom: var(--spacing-md);
}

.sector-card-link {
    margin-top: auto;
    width: 100%;
    text-align: center;
}

/* ===========================================================================
   23. SITE WRAPPER
   =========================================================================== */

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background-color: var(--page-bg, #e8eef1);
    transition: background-color var(--duration-normal) ease;
}

.site-main {
    flex: 1 0 auto;
    min-height: var(--site-min-height-fallback);
    min-height: var(--site-min-height-desktop);
    min-height: max(var(--site-min-height-desktop), var(--site-min-height-fallback));
    width: 100%;
    background-color: var(--site-bg-color);
}

.site-content-wrapper {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding-desktop);
    width: 100%;
    transition: padding var(--duration-normal) ease;
}

.content-spacing {
    margin-top: var(--content-spacing-desktop);
}

.site-main :focus {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.site-main :focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.site-main :focus:not(:focus-visible) {
    outline: none;
}

/* ===========================================================================
   24. MAIN NAVIGATION - v7.7 COMPACT
   =========================================================================== */

.main-nav {
    background-color: var(--header-bg);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 50px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.nav-item {
    margin: 0;
    padding: 0;
    position: relative;
}

.nav-link {
    display: block;
    padding: 10px var(--spacing-lg);
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-lg);
    transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
    white-space: nowrap;
}

.nav-link:hover {
    background-color: rgba(74, 157, 157, 0.3);
    color: #ffffff;
    text-decoration: none;
}

.nav-item.active .nav-link {
    background-color: var(--accent-teal);
    color: #ffffff;
    font-weight: 600;
}

.nav-link:focus {
    outline: 2px solid #ffffff;
    outline-offset: -2px;
    background-color: rgba(74, 157, 157, 0.5);
}

.nav-link:focus:not(:focus-visible) {
    outline: none;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    padding: var(--gap-md);
    cursor: pointer;
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-header);
}

.nav-toggle-bar {
    width: 26px;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: transform var(--duration-normal) ease, opacity var(--duration-normal) ease, background-color var(--duration-normal) ease;
    display: block;
}

.nav-toggle:hover .nav-toggle-bar {
    background-color: rgba(255, 255, 255, 0.8);
}

.nav-toggle:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* ===========================================================================
   24.5. ACCESSIBILITY - SKIP LINK
   =========================================================================== */

/* Skip link - visually hidden but accessible for screen readers and keyboard navigation */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
    padding: 1em 1.5em;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 0 0.25em 0;
    transition: top 0.2s ease, left 0.2s ease;
}

/* Show skip link on keyboard focus (Tab) */
.skip-link:focus {
    top: 0;
    left: 0;
    outline: 3px solid #4a9d9d;
    outline-offset: 2px;
}

/* ===========================================================================
   25. SITE HEADER
   =========================================================================== */

.site-header {
    background-color: var(--header-bg);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: var(--z-header);
    box-shadow: var(--shadow-md);
    border-bottom: 2px solid #2d5555;
}

/* ===========================================================================
   26. SITE FOOTER
   =========================================================================== */

.site-footer {
    background-color: var(--header-bg);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-3xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-3xl);
}

.site-footer > div {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-column {
    font-size: var(--font-md);
    line-height: 1.6;
}

.footer-column h3,
.footer-column h4 {
    color: #ffffff;
    font-size: var(--font-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    margin-top: 0;
}

.footer-column p {
    margin: 0 0 var(--gap-md);
    color: rgba(255, 255, 255, 0.8);
}

.footer-column a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.footer-column a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-lg);
}

.footer-text {
    font-size: var(--font-base);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ===========================================================================
   27. ADVERTISING STYLES v1.1 BULLETPROOF
   =========================================================================== */

.ad-title-flex {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.ad-icon {
    font-size: 20px;
    line-height: 1;
}

.ad-image-container {
    position: relative;
}

.ad-image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-text-center {
    text-align: center;
}

.ad-disclaimer {
    opacity: 0.7;
}

/* ===========================================================================
   28. EMITENT PAGE STYLES v7.1.0 ANCHORS
   =========================================================================== */

.subsection {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
}

.subsection-title {
    font-size: 18px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.instrument-card.no-data {
    background: #f9f9f9;
    border-color: #ddd;
    border-style: dashed;
    cursor: default;
    opacity: 0.7;
}

.instrument-card.no-data:hover {
    transform: none;
    box-shadow: none;
    border-color: #ddd;
}

.instrument-card.no-data .instrument-code {
    color: #999;
}

.instrument-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-top: 8px;
}

.status-no-data {
    background: #e9ecef;
    color: #6c757d;
}

.instrument-card.active {
    border-color: #5cb85c;
}

.instrument-card.paused {
    border-color: #f0ad4e;
}

html {
    scroll-behavior: smooth;
}

section[id^="section-type-"] {
    scroll-margin-top: 80px;
}

.metrics-grid a.metric-card {
    text-decoration: none;
    color: inherit;
}

.metrics-grid a.metric-card:hover {
    text-decoration: none;
}

/* ===========================================================================
   29. PROGRESS BARS COMPACT PRO v1.0 + COUNTDOWN TIMER v1.1 GREEN
   Progress bars for bond pages + Live countdown timer
   v1.1 GREEN: Rounded timer card (40px instead of 32px)
   =========================================================================== */

.bond-progress-card {
    background: #f8fafa;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: var(--spacing-md);
}

.progress-section-compact {
    background: white;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #d1dce2;
    margin-bottom: 8px;
}

.progress-section-compact:last-child {
    margin-bottom: 0;
}

.progress-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-title-compact {
    font-size: 11px;
    font-weight: 600;
    color: #4a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.progress-percent-main {
    font-size: 14px;
    font-weight: 800;
}

.progress-stats-mini {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.progress-stat-mini {
    flex: 1;
    font-size: 9px;
    color: #7a9292;
}

.progress-stat-mini strong {
    display: block;
    font-size: 11px;
    color: #1e3a3a;
    margin-top: 2px;
    font-weight: 700;
}

.progress-bar-compact {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 5s ease;
}

.lifecycle-progress .progress-bar-compact {
    background: #e8f5e9;
}

.lifecycle-progress .progress-bar-fill {
    background: linear-gradient(90deg, #66bb6a 0%, #388e3c 100%);
}

.lifecycle-progress .progress-percent-main {
    color: #388e3c;
}

.coupon-progress .progress-bar-compact,
.coupon-progress-bar-compact {
    background: #fff5e6;
}

.coupon-progress .progress-bar-fill,
.coupon-progress-bar-fill {
    background: linear-gradient(90deg, #ffa726 0%, #ff9800 100%);
}

.coupon-progress .progress-percent-main {
    color: #ff9800;
}

.coupon-progress .nkd-value {
    color: #ff9800;
}

.progress-footer-compact {
    font-size: 9px;
    color: #7a9292;
    margin-top: 4px;
    text-align: center;
}

.icon-pulse {
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.countdown-timer-card {
    background: white;
    border: 2px solid var(--accent-teal);
    border-radius: 40px;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-normal) ease;
}

.countdown-timer-card:hover {
    box-shadow: var(--shadow-teal-md);
}

.countdown-timer-header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.countdown-timer-icon {
    font-size: var(--font-2xl);
    animation: pulse 2s ease-in-out infinite;
}

.countdown-timer-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.countdown-timer-blocks {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: var(--spacing-sm);
}

.timer-block {
    flex: 1;
    text-align: center;
    padding: var(--gap-sm) 4px;
    background: #f8fafa;
    border-radius: var(--radius-sm);
    min-width: 0;
}

.timer-block-accent {
    background: linear-gradient(135deg, #e0f2f2 0%, #f8fafa 100%);
}

.timer-value {
    font-size: var(--font-4xl);
    font-weight: 700;
    color: var(--header-bg);
    line-height: 1;
    margin-bottom: 4px;
    transition: transform 0.15s ease;
}

.timer-value.animating {
    transform: scale(1.1);
}

.timer-label {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.countdown-timer-footer {
    text-align: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.bond-calendar-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.calendar-header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.calendar-icon {
    font-size: var(--font-2xl);
}

.calendar-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bond-calendar-card .coupon-timeline {
    padding: var(--spacing-md) 0;
    margin: 0;
}

.bond-calendar-card .timeline-bar {
    margin-bottom: var(--spacing-lg);
}

.countdown-expired {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
}

.bond-info-simple-card {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.bond-info-row {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.bond-info-icon {
    font-size: var(--font-4xl);
    flex-shrink: 0;
}

.bond-info-text {
    font-size: var(--font-md);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.4;
}

.countdown-expired {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    background: linear-gradient(135deg, #f8fafa 0%, #ffffff 100%);
    border-radius: var(--radius-lg);
}

.countdown-expired-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--spacing-sm);
    line-height: 1;
    animation: countdownExpiredFadeIn var(--duration-slower) var(--ease-out);
}

.countdown-expired-text {
    font-size: 24px;
    color: #356b6b;
    display: block;
    font-weight: 700;
    line-height: 1.3;
    animation: countdownExpiredFadeIn var(--duration-slower) var(--ease-out) 0.2s backwards;
}

@keyframes countdownExpiredFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===========================================================================
   30. UNIFIED RESPONSIVE STYLES - OPTIMIZED
   =========================================================================== */

/* ========== TABLET 1024px ========== */
@media (max-width: 1024px) {
    .stock-two-columns,
    .container .stock-two-columns,
    .content-layout,
    .container .content-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .stock-two-columns > aside.sidebar,
    .content-layout > aside.sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .stock-two-columns > div:first-child,
    .content-layout > div:first-child {
        width: 100%;
        order: 1;
    }
    
    .sidebar {
        position: static;
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .section {
        padding: var(--spacing-md);
    }
    
    .hero {
        padding: var(--spacing-md);
    }
    
    .identifiers-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--gap-md);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--gap-md);
    }
    
    .emitents-grid-sector {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .hero-badges {
        gap: var(--gap-md);
    }
    
    .badge {
        font-size: var(--font-base);
        padding: var(--gap-xs) var(--spacing-sm);
    }
    
    .countdown-number {
        font-size: var(--font-6xl);
    }
    
    .progress-ring-percent {
        font-size: var(--font-3xl);
    }
    
    .sector-card {
        padding: var(--spacing-md);
    }
    
    .sector-card-icon {
        font-size: 40px;
        margin-bottom: var(--spacing-sm);
    }
    
    .sector-card-title {
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-sm);
    }
    
    .breadcrumbs {
        margin: 15px 0;
        padding: var(--gap-xl) var(--spacing-md);
        font-size: var(--font-base);
        top: 32px;
    }
    
    .content-wrapper > .breadcrumbs,
    .site-content-wrapper > .breadcrumbs {
        margin-left: calc(-1 * var(--spacing-sm));
        margin-right: calc(-1 * var(--spacing-sm));
        width: calc(100% + var(--spacing-xl));
    }
    
    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-md);
    }
    
    .nav-menu {
        gap: 0;
    }
    
    .site-footer {
        padding: var(--spacing-2xl) 0 var(--spacing-lg);
    }
    
    .site-footer > div {
        padding: 0 var(--spacing-sm);
    }
    
    .footer-columns {
        gap: var(--spacing-2xl);
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
    
    .footer-column {
        font-size: var(--font-base);
    }
    
    .site-main {
        min-height: max(55vh, 325px);
    }
    
    .site-content-wrapper {
        max-width: 960px;
        padding: 0 var(--content-padding-laptop);
    }
    
    .content-spacing {
        margin-top: 18px;
    }
}

/* ========== MOBILE 768px ========== */
@media (max-width: 768px) {
    body {
        font-size: var(--font-base);
    }
    
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .hero {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .hero-title {
        gap: var(--gap-xs);
    }
    
    .hero-title h1 {
        font-size: var(--font-4xl);
    }
    
    .company-link {
        font-size: var(--font-2xl);
    }
    
    .subtitle {
        font-size: var(--font-md);
    }
    
    .hero-description {
        font-size: var(--font-sm);
    }
    
    .company-legal-name {
        font-size: var(--font-md);
    }
    
    .badge {
        font-size: var(--font-sm);
        padding: var(--gap-xs) var(--gap-md);
    }
    
    .section {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .section-title {
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-sm);
    }
    
    .identifiers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-sm);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .metric-value {
        font-size: var(--font-xl);
    }
    
    .emitents-grid-sector {
        grid-template-columns: 1fr;
    }
    
    .sectors-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .emitent-card {
        padding: var(--spacing-md);
    }
    
    .sector-card {
        padding: var(--spacing-md);
    }
    
    .sector-card-icon {
        font-size: 36px;
        margin-bottom: var(--spacing-sm);
    }
    
    .sector-card-title {
        font-size: var(--font-xl);
        margin-bottom: var(--spacing-sm);
    }
    
    .sector-card-stats {
        gap: var(--gap-xs);
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-sm);
    }
    
    .sector-stat-item {
        font-size: var(--font-sm);
    }
    
    .sector-stat-icon {
        font-size: var(--font-md);
    }
    
    .sector-stat-value {
        font-size: var(--font-base);
    }
    
    .sector-card-description {
        font-size: var(--font-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .toast {
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        font-size: var(--font-base);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .countdown-card {
        padding: var(--spacing-lg);
    }
    
    .countdown-number {
        font-size: var(--font-5-5xl);
    }
    
    .progress-ring-container svg {
        width: 100px;
        height: 100px;
    }
    
    .progress-ring-percent {
        font-size: var(--font-2xl);
    }
    
    .timeline-points {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xl);
    }
    
    .timeline-point {
        flex-direction: row;
        text-align: left;
        gap: var(--spacing-md);
    }
    
    .point-marker {
        flex-shrink: 0;
        margin-bottom: 0;
    }
    
    .point-label {
        max-width: none;
        text-align: left;
    }
    
    .sector-icon-large {
        font-size: 36px;
        margin-right: var(--spacing-sm);
    }
    
    .breadcrumbs {
        margin: 0;
        padding: var(--spacing-sm) var(--gap-xl);
        position: sticky;
        top: 50px;
        border-radius: 0;
        border-bottom: 2px solid #b8d4d4;
    }
    
    .content-wrapper > .breadcrumbs,
    .site-content-wrapper > .breadcrumbs {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .breadcrumbs li:not(:last-child)::after {
        margin-left: var(--gap-xs);
        font-size: var(--font-xl);
    }

    .breadcrumbs a {
        padding: 3px var(--gap-xs);
    }

    .breadcrumb-indicator {
        filter: none;
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .main-nav {
        padding: var(--spacing-sm) 0;
        justify-content: flex-start;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background-color: var(--header-bg);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 60px;
        box-shadow: var(--shadow-mobile-nav);
        transform: translateX(-100%);
        transition: transform var(--duration-normal) ease;
        overflow-y: auto;
        z-index: var(--z-nav-mobile);
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-link {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--font-xl);
    }
    
    .nav-item.active .nav-link {
        background-color: rgba(74, 157, 157, 0.4);
        border-left: 4px solid var(--accent-teal);
    }
    
    .nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease;
        z-index: var(--z-overlay);
    }
    
    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    .site-footer {
        padding: 25px 0 15px;
        margin-top: var(--spacing-2xl);
    }
    
    .site-footer > div {
        padding: 0 var(--spacing-xs);
    }
    
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    
    .footer-column {
        font-size: var(--font-base);
    }
    
    .footer-column h3,
    .footer-column h4 {
        font-size: var(--font-lg);
        margin-bottom: var(--gap-md);
    }
    
    .footer-text {
        font-size: var(--font-sm);
    }
    
    .site-main {
        min-height: max(50vh, 300px);
    }
    
    .site-content-wrapper {
        max-width: 100%;
        padding: 0 var(--content-padding-tablet);
    }
    
    .content-spacing {
        margin-top: var(--spacing-md);
    }
    
    .countdown-timer-blocks {
        flex-wrap: wrap;
    }
    
    .timer-block {
        flex: 0 0 calc(33.333% - 4px);
    }
}

/* ========== SMALL MOBILE 480px ========== */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--gap-xs);
    }
    
    .hero {
        padding: var(--gap-md);
    }
    
    .hero-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-xs);
    }
    
    .hero-title h1 {
        font-size: var(--font-3-5xl);
    }
    
    .company-link {
        font-size: var(--font-xl);
    }
    
    .hero-description {
        font-size: var(--font-xs);
    }
    
    .company-legal-name {
        font-size: var(--font-base);
    }
    
    .badge {
        font-size: var(--font-xs);
        padding: 5px var(--gap-sm);
    }
    
    .section {
        padding: var(--gap-md);
        margin-bottom: var(--gap-md);
    }
    
    .identifiers-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }
    
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-xs);
    }
    
    .metric-card {
        padding: var(--gap-md);
    }
    
    .metric-icon {
        font-size: var(--font-3xl);
    }
    
    .metric-value {
        font-size: var(--font-md);
    }
    
    .emitent-card {
        padding: var(--spacing-sm);
    }
    
    .param-row {
        flex-direction: column;
        gap: 4px;
    }
    
    .param-value {
        text-align: left;
    }
    
    .toast {
        bottom: var(--gap-md);
        right: var(--gap-md);
        left: var(--gap-md);
        font-size: var(--font-sm);
        padding: var(--gap-md) var(--gap-xl);
    }
    
    .countdown-number {
        font-size: var(--font-4-5xl);
    }
    
    .progress-ring-container svg {
        width: 90px;
        height: 90px;
    }
    
    .progress-ring-container {
        max-width: 80px;
    }
    
    .progress-ring-text {
        max-width: 80px;
        text-align: center;
    }
    
    .progress-ring-percent,
    .progress-ring-text > span:first-child {
        font-size: 12px;
        line-height: 1;
        display: block;
        margin-bottom: 2px;
    }
    
    .progress-ring-label,
    .progress-ring-text > span:last-child {
        font-size: 7px;
        line-height: 1.1;
        display: block;
        margin-top: 1px;
        text-transform: uppercase;
    }
    
    .sector-card {
        padding: var(--spacing-sm);
    }
    
    .sector-card-icon {
        font-size: 32px;
        margin-bottom: var(--gap-sm);
    }
    
    .sector-card-title {
        font-size: var(--font-lg);
    }
    
    .breadcrumbs {
        font-size: var(--font-sm);
        padding: var(--gap-md) var(--spacing-sm);
        top: 50px;
    }
    
    .content-wrapper > .breadcrumbs,
    .site-content-wrapper > .breadcrumbs {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .breadcrumb-indicator {
        display: none;
    }
    
    .breadcrumbs a:hover {
        transform: none;
    }
    
    .nav-menu {
        width: 260px;
    }
    
    .nav-link {
        padding: var(--gap-xl) var(--spacing-md);
        font-size: var(--font-lg);
    }
    
    .site-footer {
        padding: var(--spacing-lg) 0 15px;
        margin-top: var(--spacing-lg);
    }
    
    .site-footer > div {
        padding: 0 var(--spacing-sm);
    }
    
    .footer-columns {
        gap: var(--spacing-lg);
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    
    .footer-column {
        font-size: var(--font-sm);
    }
    
    .footer-column h3,
    .footer-column h4 {
        font-size: var(--font-md);
    }
    
    .footer-copyright {
        padding-top: 15px;
    }
    
    .footer-text {
        font-size: var(--font-xs);
    }
    
    .site-main {
        min-height: max(45vh, 260px);
    }
    
    .site-content-wrapper {
        padding: 0 var(--content-padding-mobile);
    }
    
    .content-spacing {
        margin-top: var(--gap-xl);
    }
    
    .countdown-timer-blocks {
        gap: 6px;
    }
    
    .timer-block {
        flex: 0 0 calc(50% - 3px);
    }
    
    .timer-value {
        font-size: var(--font-3xl);
    }
    
    .timer-label {
        font-size: 8px;
    }
    
    .countdown-expired {
        padding: var(--spacing-lg) var(--spacing-sm);
    }
    
    .countdown-expired-icon {
        font-size: 42px;
    }
    
    .countdown-expired-text {
        font-size: 20px;
    }
}

/* ========== SPECIAL MEDIA QUERIES ========== */

@media (max-width: 360px) {
    .countdown-expired {
        padding: var(--spacing-sm) var(--gap-sm);
    }
    
    .countdown-expired-icon {
        font-size: 32px;
        margin-bottom: var(--gap-xs);
    }
    
    .countdown-expired-text {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: var(--duration-instant) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--duration-instant) !important;
    }
    
    .point-marker.pulse,
    .countdown-number,
    .progress-ring-circle {
        animation: none;
        transition: none;
    }
    
    .countdown-card:hover {
        transform: none;
    }
    
    .site-wrapper {
        transition: none;
    }
    
    .site-content-wrapper {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --site-bg-color: var(--site-bg-color-dark);
    }
    
    .site-wrapper {
        background-color: var(--site-bg-color-dark, #1a1a1a);
    }
}

@media (prefers-contrast: high) {
    .site-main :focus,
    .site-main :focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
}

@media print {
    .breadcrumbs {
        box-shadow: none;
        border: 1px solid #ddd;
        padding: var(--gap-md);
    }
    
    .breadcrumb-indicator {
        display: none;
    }
    
    .breadcrumbs a {
        color: #000;
        text-decoration: underline;
    }
    
    .hero {
        background: #f5f5f5;
        color: #000;
        box-shadow: none;
    }
    
    .sidebar {
        display: none;
    }
    
    .toast {
        display: none !important;
    }
    
    .copy-btn,
    button {
        display: none;
    }
    
    body {
        background: #fff;
        color: #000;
    }
    
    .site-wrapper {
        display: block;
        min-height: auto;
        background-color: white;
    }
    
    .site-main {
        min-height: auto;
        background-color: white;
        display: block;
    }
    
    .site-content-wrapper {
        max-width: 100%;
        padding: 0;
        orphans: 3;
        widows: 3;
    }
    
    .content-spacing {
        margin-top: 10mm;
        page-break-after: avoid;
        break-after: avoid;
    }
    
    .content-spacing > * {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ===========================================================================
   38. STOCKS CATALOG v2.3.3 H2-FIX - LISTING & EMITENT GROUPING
   
   CHANGES v2.3.3 H2-FIX:
   ✅ FIX: .listing-column-title margin-top: 0 (removes browser default H2 margin)
   ✅ NEW: Explicit .listing-column styles (margin: 0, padding: 0)
   ✅ NEW: Explicit wrapper styles (metrics/catalog/legend - all zero spacing)
   ✅ FIX: Prevents browser default styles from adding unwanted margins
   ✅ Desktop: margin-bottom: 6px for metrics
   ✅ Mobile: margin-bottom: 6px for metrics
   =========================================================================== */

/* Flexbox wrapper for mobile order change */
.page-content-wrapper {
    display: flex;
    flex-direction: column;
}

/* Desktop - catalog first, metrics second */
.metrics-wrapper {
    order: 2;
    margin: 0;
    padding: 0;
}

.catalog-wrapper {
    order: 1;
    margin: 0;
    padding: 0;
}

.legend-wrapper {
    order: 3;
    margin: 0;
    padding: 0;
}

/* Compact metrics grid */
.metrics-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gap-lg);
    margin-bottom: 6px; /* Minimal spacing before fire headers */
}

/* Compact metric card */
.metric-card-compact {
    padding: var(--spacing-xs);
    text-align: center;
}

/* Compact metric icon */
.metric-icon-compact {
    font-size: var(--font-3xl);
    margin-bottom: 4px;
}

/* Three equal columns grid for listing levels */
.sectors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Listing column container - explicit zero spacing */
.listing-column {
    margin: 0;
    padding: 0;
}

/* H2 listing level title - FIRE GRADIENT (E variant) */
.listing-column-title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #4a9d9d 100%);
    border-radius: var(--radius-md);
    border: 2px solid #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Four columns by default - optimal for most screens */
.bonds-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* Six columns on extra wide screens (1600px+) */
@media (min-width: 1600px) {
    .bonds-type-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Three columns on desktop (1024-1199px) */
@media (max-width: 1199px) {
    .bonds-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Two columns on tablet (768-1023px) */
@media (max-width: 1023px) {
    .bonds-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* One column on mobile (<768px) */
@media (max-width: 767px) {
    .bonds-type-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }
}

/* Sector card (details element) */
.v6-sector {
    margin-bottom: var(--spacing-sm);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Sector summary (clickable header) */
.v6-sector summary {
    padding: 10px 14px;
    background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-smooth);
    list-style: none;
}

.v6-sector summary::-webkit-details-marker {
    display: none;
}

/* H3 inside summary - flex layout */
.v6-sector summary h3 {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Open state - rounded corners only on top */
.v6-sector[open] summary {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom-color: var(--card-border);
}

/* Hover effect on summary */
.v6-sector summary:hover {
    background: linear-gradient(135deg, #edf2f7 0%, #f7fafc 100%);
    border-color: var(--accent-teal);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(74, 157, 157, 0.1);
}

/* Sector icon (emoji) */
.v6-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
}

/* Emitent count in summary (3) */
.v1-count {
    margin-left: auto;
    font-size: var(--font-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* Sector content (list of emitents) */
.v6-content {
    padding: 8px 14px;
    border: 1px solid var(--card-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--card-bg);
}

/* Emitent block - flex row */
.v6-emitent {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-bottom: 3px;
    padding: 3px 0;
}

.v6-emitent:last-child {
    margin-bottom: 0;
}

/* Emitent name (link) */
.v6-emitent-name {
    font-size: var(--font-md);
    font-weight: 500;
    color: var(--accent-teal);
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: color var(--duration-fast) ease;
    line-height: 1.2;
}

.v6-emitent-name:hover {
    color: #356b6b;
    text-decoration: underline;
}

/* H4 for emitents - reset browser styles (bonds-catalog.php v1.1.0) */
.v6-emitent-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Stock chips container - align right */
.v6-stocks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: auto;
}

/* Stock chip (ticker badge) */
.v6-stock {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: linear-gradient(135deg, var(--accent-teal) 0%, #356b6b 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: var(--font-sm);
    font-weight: 600;
    transition: all var(--duration-fast) ease;
    box-shadow: 0 1px 4px rgba(74, 157, 157, 0.2);
    line-height: 1.2;
}

.v6-stock:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 2px 8px rgba(74, 157, 157, 0.3);
}

/* Paused stock (no trading data) - gray gradient */
.v6-stock.paused {
    background: linear-gradient(135deg, var(--text-muted) 0%, var(--text-secondary) 100%);
    box-shadow: 0 1px 4px rgba(122, 146, 146, 0.2);
}

.v6-stock.paused:hover {
    box-shadow: 0 2px 8px rgba(122, 146, 146, 0.3);
}

/* H5 for bonds - reset browser styles + inline (bonds-catalog.php v1.1.0) */
.v6-stock-heading {
    display: inline;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Legend block at bottom */
.legend-block {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.legend-title {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--accent-light);
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
}

.legend-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-size: var(--font-base);
    color: var(--text-secondary);
}

/* Divider in sidebar (preserved from v1.4.2) */
.sidebar-divider {
    margin: var(--spacing-sm) 0;
    border: none;
    border-top: 1px solid #e0e7e9;
}

/* Legend icons (preserved from v1.4.2) */
.legend-icon {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .sectors-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .metrics-grid-compact {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }
}

/* Mobile: 1 column + horizontal layout everywhere */
@media (max-width: 768px) {
    /* MOBILE ORDER: CATALOG → METRICS → LEGEND */
    .catalog-wrapper {
        order: 1;
    }
    
    .metrics-wrapper {
        order: 2;
    }
    
    .legend-wrapper {
        order: 3;
    }
    
    /* SMALL METRIC CARDS - 3 IN A ROW */
    .metrics-grid-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 6px; /* Minimal spacing before fire headers */
    }
    
    .metric-card-compact {
        padding: 8px 4px;
        border-radius: 8px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
    
    .metric-icon-compact {
        font-size: 1.3rem;
    }
    
    .metric-label {
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    
    .metric-value {
        font-size: 14px;
        font-weight: 700;
    }
    
    /* CATALOG */
    .sectors-grid {
        grid-template-columns: 1fr;
    }
    
    .v6-sector summary h3 {
        font-size: var(--font-base);
    }
    
    .v6-content {
        padding: var(--gap-md);
    }
    
    .legend-content {
        grid-template-columns: 1fr;
    }
    
    /* LISTING COLUMN TITLE - CENTERED */
    .listing-column-title {
        font-size: var(--font-lg);
        text-align: center;
    }
}

/* Navigation container - Grid 3×2 */
.bonds-type-navigation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
    margin-bottom: var(--spacing-xl);
}

.bonds-type-navigation a {
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bonds-type-navigation a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5);
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .bonds-type-navigation {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .bonds-type-navigation {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
        margin-bottom: var(--spacing-lg);
    }
}

/* Small mobile: smaller chips */
@media (max-width: 480px) {
    .v6-stock {
        font-size: 11px;
        padding: 2px 8px;
    }
    
    .metrics-grid-compact {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================================================
   BONDS CATALOG - VERTICAL LAYOUT
   ======================================================================== */

/* Bond emitent container - vertical layout */
.v6-bond-emitent {
    margin-bottom: 8px;
    padding: 3px 0;
}

.v6-bond-emitent:last-child {
    margin-bottom: 0;
}

/* Lines 3895-3902 */
.v6-bond-emitent-name {
    font-size: var(--font-md);
    font-weight: 500;  /* CHANGE to 700 */
    color: var(--accent-teal);  /* CHANGE to #000 */
    display: block;
    margin-bottom: 8px;
}

.v6-bond-emitent-name:hover {
    color: var(--accent-teal-dark);
    text-decoration: underline;
}

/* Link inside bond emitent name */
.v6-bond-emitent-name a {
    color: var(--accent-teal);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.v6-bond-emitent-name a:hover {
    color: var(--accent-teal-dark);
    text-decoration: underline;
}

/* H4 for bond emitents */
.v6-bond-emitent-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Bond chips container - space-around */
.v6-bond-stocks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-around;
    margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSS FOR EMITENT CROSS-LINKING BLOCK v8.4.2 BASELINE
   Added: 2025-10-26
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   EMITENT LINKS - CONTAINER
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Container for emitent links list
 */
.emitent-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LINK BUTTON - EMITENT LINK (v8.4.0 FIX)
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Button-link for emitent
 * 
 * v8.4.0 FIX:
 *   - Increased line-height: 1.4 → 1.5 for better centering
 *   - Added vertical-align for inline elements
 *   - Optimized gap between elements
 * 
 * v8.2.0 (preserved):
 *   - Left alignment
 *   - Display: flex for proper layout
 */
.emitent-links .emitent-link-btn {
    /* Layout - CRITICAL for centering */
    display: flex;
    align-items: baseline;
    gap: 8px;
    
    /* Padding and alignment */
    text-align: left;
    padding: 10px 12px;
    
    /* Colors and styling */
    background: #ffffff;
    color: #2c5252;
    border: 1px solid #e0e8e8;
    border-radius: 6px;
    text-decoration: none;
    
    /* Typography - v8.4.0 FIX: increased line-height */
    font-size: 14px;
    line-height: 1.5;
    
    /* Transitions */
    transition: all 0.2s ease;
}

/**
 * Icon inside link
 * v8.4.0 FIX: Explicit vertical alignment
 */
.emitent-links .emitent-link-btn [aria-hidden="true"] {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

.emitent-links .emitent-link-btn:hover {
    background: #f0f8f8;
    border-color: #4a9d9d;
    transform: translateX(2px);
}

.emitent-links .emitent-link-btn:active {
    transform: translateX(1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   EMITENT NAME - EMITENT NAME (v8.4.0 FIX)
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Emitent name in cross-linking block
 * 
 * v8.4.0 FIX:
 *   - Added display: inline-flex for better alignment
 *   - Added vertical-align: middle
 * 
 * USAGE:
 * <span class="emitent-name">PAO Rusagro</span>
 */
.emitent-links .emitent-name {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    
    font-weight: 600;
    color: #2c5252;
    flex-shrink: 0;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────────────
   DARK THEME
   ───────────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
    .emitent-links .emitent-link-btn {
        background: #1e3232;
        border-color: #2c4242;
        color: #a8d8d8;
    }
    
    .emitent-links .emitent-link-btn:hover {
        background: #2c4242;
        border-color: #4a9d9d;
    }
    
    .emitent-links .emitent-name {
        color: #a8d8d8;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */

/**
 * Tablets and below (≤768px)
 */
@media (max-width: 768px) {
    .emitent-links .emitent-link-btn {
        font-size: 13px;
        padding: 9px 10px;
        gap: 6px;
        line-height: 1.5;
    }
}

/**
 * Mobile devices (≤480px)
 */
@media (max-width: 480px) {
    .emitent-links .emitent-link-btn {
        font-size: 12px;
        padding: 8px;
        gap: 6px;
        line-height: 1.5;
    }
}

.bonds-count {
    color: #666;
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 4px;
}

/* Hidden bonds span */
.v6-bonds-hidden {
    display: contents;
}

/* Show more button */
.v6-show-more {
    margin-top: 8px;
    padding: 4px 12px;
    background: #4a9d9d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    width: 100%;
}

.v6-show-more:hover {
    background: #356b6b;
}

/* ============================================================================
   BONDS CATALOG v2.2.0 - TYPE COLUMN STYLES
   Updated: 2025-10-29
   For: bonds-catalog.php v2.2.0 NAVIGATION
   Classes: .bond-type-column, .bond-type-title, .bonds-other-levels
   ============================================================================ */

/* BOND TYPE COLUMN */
.bond-type-column {
    border: 1px solid #e0e8e8;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

@media (max-width: 768px) {
    .bond-type-column {
        padding: 6px;
    }
}

/* H2 - Type heading */
.bond-type-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #4a9d9d;
    scroll-margin-top: 150px; /* Offset for sticky header + breadcrumbs (v4.0.0) */
}

@media (max-width: 768px) {
    .bond-type-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
}

/* NATIVE DETAILS FOR OTHER LISTING LEVELS (2-3) */
.bonds-other-levels {
    margin-top: 8px;
    border-top: 1px solid #e0e8e8;
    padding-top: 8px;
}

.bonds-other-levels summary {
    cursor: pointer;
    color: #4a9d9d;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
    list-style: none; /* Remove default triangle */
}

/* Remove default triangle in webkit browsers */
.bonds-other-levels summary::-webkit-details-marker {
    display: none;
}

/* Custom arrow indicator */
.bonds-other-levels summary::before {
    content: '▶ ';
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.bonds-other-levels[open] summary::before {
    transform: rotate(90deg);
}

/* Hover state */
.bonds-other-levels summary:hover {
    background: #f0f8f8;
}

/* Focus state for keyboard navigation (A11Y) */
.bonds-other-levels summary:focus {
    outline: 2px solid #4a9d9d;
    outline-offset: 2px;
}

/* Bonds inside details when open */
.bonds-other-levels[open] {
    padding-top: 8px;
}

.bonds-other-levels[open] .v6-stock {
    display: inline-block;
    margin-top: 8px;
}

/* Responsive adjustments for details */
@media (max-width: 768px) {
    .bonds-other-levels summary {
        font-size: 12px;
        padding: 3px 6px;
    }
}

/* ============================================================================
   BONDS CATALOG - NEW STRUCTURE v4.1.0 AUTO-FIT (2025-10-29)
   ============================================================================
   
   Types displayed vertically (full width), sectors vertically (full width),
   emitents in auto-fit grid columns inside sectors.
   
   STRUCTURE:
   .bonds-catalog-container
     └─ .bond-type-section (full width for each type)
         ├─ H2.bond-type-title (type heading) + scroll-margin-top: 150px
         └─ (multiple sectors, no grid)
             └─ .sector-block (full width for each sector)
                 ├─ H3.sector-title (sector heading with gradient)
                 └─ .emitents-grid (auto-fit: minmax(230px, 1fr))
                     └─ .emitent-column (emitent with bonds)
   
   RESPONSIVE (AUTO-FIT):
   - Desktop (1400px+): 5-6 emitent columns (automatic)
   - Desktop (1200px+): 4-5 emitent columns (automatic)
   - Tablet (900px+): 3-4 emitent columns (automatic)
   - Mobile (600px+): 2 emitent columns (automatic)
   - Mobile (<600px): 1 emitent column (automatic)
   - Minimum column width: 230px (guaranteed readability)
   ============================================================================ */

/* Container for entire bonds catalog */
.bonds-catalog-container {
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

/* Section for each bond type (full width) */
.bond-type-section {
    margin-bottom: 60px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Block for each sector (full width, no grid) */
.sector-block {
    margin-bottom: 30px;
}

.sector-block:last-child {
    margin-bottom: 0;
}

/* Sector heading H3 - styled like type buttons with gradient */
.sector-title {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    transition: all var(--duration-normal) var(--ease-smooth);
}

/* Grid for emitents (auto-fit: 4-5 columns on desktop, adapts automatically) */
.emitents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--spacing-md);
}

/* Column for each emitent */
.emitent-column {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 8px;
    background: var(--card-bg);
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Mobile (<768px): smaller gap for emitents */
@media (max-width: 767px) {
    .emitents-grid {
        gap: var(--gap-sm);
    }
    
    .bond-type-section {
        padding: 12px;
        margin-bottom: 30px;
    }
    
    .sector-block {
        margin-bottom: 20px;
    }
    
    .sector-title {
        font-size: 14px;
        padding: 8px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * EMITENT.PHP v8.5.0 DETAILED - CSS for detailed instrument cards
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * ADD TO best.css
 * 
 * CHANGES:
 * - Grid 3 columns (→2→1 responsive)
 * - Compact cards with detailed information
 * - Dynamic card height
 * - Styles for .card-param (instrument parameters)
 */

/* ───────────────────────────────────────────────────────────────────────────
   GRID 3 COLUMNS FOR INSTRUMENTS
   ─────────────────────────────────────────────────────────────────────────── */

.instruments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

/* Responsive: 2 columns on tablets */
@media (max-width: 768px) {
    .instruments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: 1 column on mobile */
@media (max-width: 480px) {
    .instruments-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   COMPACT INSTRUMENT CARD
   ─────────────────────────────────────────────────────────────────────────── */

.instrument-card {
    display: block;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    min-height: auto; /* Remove fixed height - dynamic */
}

.instrument-card:hover {
    border-color: #2196F3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
    transform: translateY(-2px);
}

/* Active card (trading) - green border */
.instrument-card.active {
    border-left: 4px solid #4CAF50;
}

/* Paused card - orange border */
.instrument-card.paused {
    border-left: 4px solid #FF9800;
}

/* ───────────────────────────────────────────────────────────────────────────
   CARD ELEMENTS
   ─────────────────────────────────────────────────────────────────────────── */

.instrument-code {
    font-size: 16px;
    font-weight: 700;
    color: #1976D2;
    margin-bottom: 6px;
    line-height: 1.3;
}

.instrument-code span {
    margin-left: 4px;
    font-size: 14px;
}

.instrument-name {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* ───────────────────────────────────────────────────────────────────────────
   INSTRUMENT PARAMETERS (NEW v8.5.0)
   ─────────────────────────────────────────────────────────────────────────── */

.card-param {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    padding: 2px 0;
    border-top: 1px solid #f5f5f5;
    margin-top: 4px;
    padding-top: 6px;
}

/* First parameter without top border */
.card-param:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 2px;
}

/* Emoji in parameters */
.card-param span[aria-hidden="true"] {
    font-size: 11px;
    margin-right: 3px;
}

/* ───────────────────────────────────────────────────────────────────────────
   CARD WITHOUT DATA (gray)
   ─────────────────────────────────────────────────────────────────────────── */

.instrument-card.no-data {
    background: #f9f9f9;
    border-color: #ddd;
    opacity: 0.7;
    cursor: not-allowed;
}

.instrument-card.no-data:hover {
    transform: none;
    box-shadow: none;
    border-color: #ddd;
}

.instrument-card.no-data .instrument-code {
    color: #999;
}

.instrument-card.no-data .instrument-name {
    color: #aaa;
}

.status-no-data {
    display: inline-block;
    font-size: 11px;
    color: #999;
    background: #eee;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * END OF CSS FOR EMITENT.PHP v8.5.0
 * ═══════════════════════════════════════════════════════════════════════════ */
 
 /* ═══════════════════════════════════════════════════════════════════════════
  Emitents Catalog
   ═══════════════════════════════════════════════════════════════════════════
   
   Version: 1.0.0 (2025-11-02)
   File: css/best.css 
   
   PURPOSE:
     - Sticky alphabet navigation
     - Letter links with hover/active states
     - Emitent cards in DL/DT/DD structure
     - Skip link for accessibility
     - Responsive design (desktop → tablet → mobile)
   
   SELECTORS:
     .skip-link - A11Y skip navigation link
     .alphabet-nav - Sticky navigation container
     .letter-link - Individual letter button
     .emitents-list - DL container for emitents
     .emitent-item - Wrapper for DT+DD pair
     .emitent-name - DT (emitent name)
     .emitent-description - DD (description)
     .sector-icon - Emoji icon
     .show-more-btn - Show more button
   
   ═══════════════════════════════════════════════════════════════════════════ */

/**
 * Emitents Catalog Styles v3.1.0 COMPACT-GRID-REFINED
 * Version: 3.1.0 (Variant 2 - Grid 5+ columns + User feedback fixes)
 * Date: 2025-11-03
 * For: site/content/emitents-catalog.php v3.1.0
 * 
 * CHANGES v3.1.0:
 * - MERGED: Two alphabet navigations into one unified block (.alphabet-nav-unified)
 * - NEW: Beautiful gradient buttons from original HTML (linear-gradient + box-shadow)
 * - SMALLER: Letter buttons reduced to 32px height (fit in one line)
 * - FIXED: scroll-margin-top increased to 180px (breadcrumbs no longer cover titles)
 * - NEW: .alphabet-section for Russian/English letter groups
 * - REMOVED: .alphabet-nav-static (replaced with .alphabet-nav-unified)
 * - REASON: User feedback - beautiful buttons, unified navigation, proper scroll offset
 * 
 * CHANGES v3.0.1:
 * - FIXED: Alphabet navigation spacing
 * - FIXED: Reduced huge empty spaces
 * - FIXED: Compact metrics blocks
 * - FIXED: scroll-margin-top for breadcrumbs
 * 
 * CHANGES v3.0.0:
 * - REFACTOR: Switched to compact grid design (Variant 2)
 * - NEW: .grid-5-columns with auto-fill minmax(200px, 1fr)
 * - NEW: v2 classes (.emitent-card-v2, .card-header-v2, etc.)
 * - REMOVED: Sticky navigation (replaced with .alphabet-nav-static)
 * - REMOVED: Fields: manager, phone, address
 * - KEPT: INN, OGRN, Registration date
 * - OPTIMIZED: More compact cards
 * - REASON: 5+ emitents on screen, better space utilization
 * 
 * PREVIOUS VERSION:
 * - v2.0.1 SAFE: 3-column grid, sticky nav, full cards
 * 
 * DESCRIPTION:
 * Compact card design for emitents catalog.
 * Auto-fill grid adapts to screen width (5-6-7 columns on large screens).
 * 
 * FEATURES:
 * - Grid auto-fill minmax(200px, 1fr) - responsive without media queries
 * - Static navigation (NO sticky)
 * - Compact cards with minimal info
 * - Smooth scroll to anchors
 * - Hover effects
 * - Temporary data styling (.temp-data)
 * - Full accessibility support
 * 
 * USAGE:
 * Replace lines 4428-4885 in css/best.css with this block
 * 
 * RESPONSIVE:
 * - 1400px+: 6-7 columns
 * - 1200px: 5-6 columns
 * - 1024px: 4-5 columns
 * - 768px: 3-4 columns
 * - 600px: 2-3 columns
 * - 480px: 2 columns
 * - 360px: 1 column
 */

/* ============================================================================
   SMOOTH SCROLL (GLOBAL FOR PAGE)
   ============================================================================ */

.emitents-catalog-page {
    scroll-behavior: smooth;
}

/* ============================================================================
   ALPHABET NAVIGATION (UNIFIED BLOCK)
   ============================================================================ */

/* Unified navigation container - COMPACT VERSION */
.emitents-catalog-page .alphabet-nav-unified {
    background: white;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 16px 0 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

/* Individual alphabet section (Russian or English) */
.emitents-catalog-page .alphabet-section {
    margin-bottom: 8px;
}

.emitents-catalog-page .alphabet-section:last-child {
    margin-bottom: 0;
}

/* Separator line between Russian and English sections */
.emitents-catalog-page .alphabet-section-english {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
}

/* Navigation title */
.emitents-catalog-page .alphabet-nav-title {
    font-weight: 600;
    color: #356b6b;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Letter links container */
.emitents-catalog-page .alphabet-nav-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Individual letter link - ORIGINAL BEAUTIFUL DESIGN FROM HTML */
.emitents-catalog-page .letter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    background: linear-gradient(135deg, #f6f8fb 0%, #ffffff 100%);
    border: 1px solid #e5e7eb;
    color: #374151;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.emitents-catalog-page .letter-link:hover {
    background: linear-gradient(135deg, #4a9d9d 0%, #356b6b 100%);
    color: white;
    border-color: #4a9d9d;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(74, 157, 157, 0.3);
}

.emitents-catalog-page .letter-link.active {
    background: linear-gradient(135deg, #4a9d9d 0%, #356b6b 100%);
    color: white;
    border-color: #4a9d9d;
}

/* ============================================================================
   EMITENTS CATALOG CONTAINER
   ============================================================================ */

.emitents-catalog-page .emitents-catalog-container {
    margin-top: 8px;
}

/* Letter section wrapper */
.emitents-catalog-page .letter-section {
    margin-bottom: 12px;
}

/* Letter title (H2 for Russian, H3 for English) */
.emitents-catalog-page .letter-title {
    font-size: 32px;
    font-weight: 700;
    color: #1e3a3a;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a9d9d;
    /* scroll-margin-top removed - handled by JS SCROLL_OFFSET */
}

.emitents-catalog-page .letter-title-english {
    font-size: 28px;
}

.emitents-catalog-page .english-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #1e3a3a;
    margin: 32px 0 20px 0;
    padding-bottom: 16px;
    border-bottom: 3px solid #356b6b;
}

/* ============================================================================
   GRID 5+ COLUMNS (AUTO-FILL)
   ============================================================================ */

/* Auto-fill grid - adapts to screen width */
.emitents-catalog-page .grid-5-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .emitents-catalog-page .grid-5-columns {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .emitents-catalog-page .grid-5-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .emitents-catalog-page .grid-5-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   EMITENT CARD v2 (COMPACT)
   ============================================================================ */

/* Compact card container */
.emitents-catalog-page .emitent-card-v2 {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.emitents-catalog-page .emitent-card-v2:hover {
    border-color: #4a9d9d;
    box-shadow: 0 4px 12px rgba(74, 157, 157, 0.15);
    transform: translateY(-2px);
}

/* ============================================================================
   CARD HEADER v2
   ============================================================================ */

.emitents-catalog-page .card-header-v2 {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

/* Sector icon */
.emitents-catalog-page .sector-icon-v2 {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

/* Card title (H3 for Russian, H4 for English) */
.emitents-catalog-page .card-title-v2 {
    font-size: 14px;
    font-weight: 600;
    color: #1e3a3a;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================================================
   CARD BODY v2
   ============================================================================ */

.emitents-catalog-page .card-body-v2 {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Info row */
.emitents-catalog-page .info-row-v2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    gap: 8px;
}

/* Info label */
.emitents-catalog-page .info-label-v2 {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

/* Info value */
.emitents-catalog-page .info-value-v2 {
    color: #374151;
    font-weight: 400;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Temporary data styling */
.emitents-catalog-page .temp-data {
    color: #9ca3af;
    font-style: italic;
}

/* ============================================================================
   CARD FOOTER v2
   ============================================================================ */

.emitents-catalog-page .card-footer-v2 {
    padding: 10px 12px;
    border-top: 1px solid #f3f4f6;
    background: #f9fafb;
}

/* Link button */
.emitents-catalog-page .emitent-link-v2 {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #4a9d9d;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.emitents-catalog-page .emitent-link-v2:hover {
    color: #356b6b;
    text-decoration: underline;
}

/* ============================================================================
   LEGEND & INFO NOTICE
   ============================================================================ */

.emitents-catalog-page .legend-block {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-top: 48px;
}

.emitents-catalog-page .legend-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e3a3a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.emitents-catalog-page .legend-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.emitents-catalog-page .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}

.emitents-catalog-page .legend-icon {
    font-size: 20px;
    line-height: 1;
}

.emitents-catalog-page .info-notice {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 16px;
    margin-top: 24px;
    font-size: 14px;
    color: #92400e;
    line-height: 1.6;
}

.emitents-catalog-page .info-notice strong {
    color: #78350f;
}

/* ============================================================================
   PAGE LAYOUT (METRICS, CATALOG, LEGEND)
   ============================================================================ */

.emitents-catalog-page .page-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* CRITICAL: Override global .metrics-wrapper { order: 1 } from line 3343 */
.emitents-catalog-page .catalog-wrapper {
    order: 1; /* Catalog FIRST */
}

.emitents-catalog-page .metrics-wrapper {
    order: 2; /* Metrics SECOND (after catalog) */
}

.emitents-catalog-page .legend-wrapper {
    order: 3; /* Legend THIRD */
}

.emitents-catalog-page .metrics-wrapper,
.emitents-catalog-page .catalog-wrapper,
.emitents-catalog-page .legend-wrapper {
    width: 100%;
}

/* ============================================================================
   METRICS (COMPACT)
   ============================================================================ */

.emitents-catalog-page .metrics-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 150px));
    gap: 12px;
    margin-bottom: 24px;
    justify-content: start;
}

.emitents-catalog-page .metric-card-compact {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: all 0.2s ease;
}

.emitents-catalog-page .metric-card-compact:hover {
    border-color: #4a9d9d;
    box-shadow: 0 4px 8px rgba(74, 157, 157, 0.1);
}

.emitents-catalog-page .metric-icon-compact {
    font-size: 24px;
    margin-bottom: 6px;
}

.emitents-catalog-page .metric-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.emitents-catalog-page .metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e3a3a;
}

/* Screen reader only class */
.emitents-catalog-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .emitents-catalog-page .letter-title {
        font-size: 28px;
    }
    
    .emitents-catalog-page .english-section-title {
        font-size: 32px;
    }
    
    .emitents-catalog-page .legend-content {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .emitents-catalog-page .alphabet-nav-unified {
        padding: 14px;
        margin-bottom: 24px;
    }
    
    .emitents-catalog-page .alphabet-nav-letters {
        gap: 5px;
    }
    
    .emitents-catalog-page .letter-link {
        min-width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .emitents-catalog-page .letter-title {
        font-size: 24px;
        margin-bottom: 16px;
    }
    
    .emitents-catalog-page .legend-content {
        grid-template-columns: 1fr;
    }
    
    .emitents-catalog-page .metrics-grid-compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
    .emitents-catalog-page .card-header-v2 {
        padding: 10px;
    }
    
    .emitents-catalog-page .card-body-v2 {
        padding: 10px;
        gap: 6px;
    }
    
    .emitents-catalog-page .card-footer-v2 {
        padding: 8px 10px;
    }
    
    .emitents-catalog-page .info-row-v2 {
        font-size: 11px;
    }
    
    .emitents-catalog-page .card-title-v2 {
        font-size: 13px;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .emitents-catalog-page .alphabet-nav-unified {
        display: none;
    }
    
    .emitents-catalog-page .emitent-card-v2 {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .emitents-catalog-page .grid-5-columns {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .emitents-catalog-page .emitent-link-v2 {
        display: none;
    }
}

/* ============================================================================
   END OF EMITENTS CATALOG v3.1.0 COMPACT-GRID-REFINED
   ============================================================================ */

/* =====================================================
   BACK TO TOP BUTTON - CSS (CORRECTED VERSION)
   Add to the end of best.css
   ===================================================== */

/* Main button styles with Design #1 (Blue Gradient) */
.back-to-top {
    /* Positioning */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    
    /* Size */
    width: 50px;
    height: 50px;
    
    /* Reset button styles */
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    
    /* Typography */
    font-size: 24px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    
    /* Visual */
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
    
    /* Accessibility */
    outline: none;
}

/* Visible state (shown when scrolled > 500px) */
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Focus state (keyboard navigation) */
.back-to-top:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Hover state */
.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Active state (click) */
.back-to-top:active {
    transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .back-to-top {
        width: 44px;
        height: 44px;
        font-size: 20px;
        line-height: 44px;
        bottom: 20px;
        right: 20px;
    }
}

/* =====================================================
   ALTERNATIVE DESIGNS
   To use different design:
   1. Comment out lines 31-32 (background and box-shadow) above
   2. Uncomment one design below
   ===================================================== */

/* DESIGN #2 - GREEN MINIMALIST
.back-to-top {
    background: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.back-to-top:hover {
    background: #059669 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.5) !important;
}
*/

/* DESIGN #3 - LIGHT BLUE
.back-to-top {
    background: #3b82f6 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}
.back-to-top:hover {
    background: #2563eb !important;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
}
*/

/* DESIGN #4 - DARK BLUE PROFESSIONAL
.back-to-top {
    background: #1e3a8a !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3) !important;
    border: 2px solid #3b82f6 !important;
}
.back-to-top:hover {
    background: #1e40af !important;
    border-color: #60a5fa !important;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.5) !important;
}
*/

/* DESIGN #5 - INDIGO WITH DEPTH
.back-to-top {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
}
.back-to-top:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}
*/

/* DESIGN #6 - CYAN BRIGHT
.back-to-top {
    background: #06b6d4 !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}
.back-to-top:hover {
    background: #0891b2 !important;
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.5) !important;
}
*/

/* DESIGN #7 - GREEN GRADIENT RICH
.back-to-top {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}
.back-to-top:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6) !important;
}
*/

/* DESIGN #8 - PURPLE SOFT
.back-to-top {
    background: #8b5cf6 !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}
.back-to-top:hover {
    background: #7c3aed !important;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5) !important;
}
*/

/* DESIGN #9 - OCEAN WITH BORDER
.back-to-top {
    background: #0ea5e9 !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
    border: 2px solid #38bdf8 !important;
}
.back-to-top:hover {
    background: #0284c7 !important;
    border-color: #7dd3fc !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.5) !important;
}
*/

/* DESIGN #10 - GRAY-BLUE RESTRAINED
.back-to-top {
    background: #475569 !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3) !important;
}
.back-to-top:hover {
    background: #334155 !important;
    box-shadow: 0 6px 16px rgba(71, 85, 105, 0.5) !important;
}
*/

/* END back-to-top-button.css */