/*
 * Star Atlas Flares - Unified Market Stylesheet
 *
 * Sections:
 * 1) Base Market UI (index + shared visual primitives)
 * 2) Scoped page styles:
 *    - auto-trader        -> body.auto-trader-page
 *    - price-chart        -> body.price-chart-page
 *    - ships-compare      -> body.ships-compare-page
 *    - recent-trades      -> body.recent-trades-page
 *    - detail             -> managed inline in public/detail.html (NOT in this file)
 *
 * Note: NovaGrid UI (novagrid.html) remains independent and uses styles.css
 * IMPORTANT: detail.html keeps its own inline <style> block.
 * For detail page style changes, edit CSS directly inside public/detail.html.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

		:root {
			--bg-body: #020617;
			--bg-panel: rgba(15,23,42,0.94);
			--bg-panel-soft: rgba(15,23,42,0.86);
			--accent: #22d3ee;
			--accent-strong: #0ea5e9;
			--accent-warm: #f97316;
			--text-main: #e5e7eb;
			--text-muted: #9ca3af;
			--shadow-soft: 0 18px 40px rgba(15,23,42,0.98);
		}

		body {
			font-family: 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: #000 url('Images/Discovery-of-Iris.jpg') no-repeat center top fixed;
			background-size: cover;
			color: var(--text-main);
			min-height: 100vh;
			padding: 20px;
			letter-spacing: 0.02em;
		}

                .contract-logo-inline {
                    position: relative;
                    z-index: 5;
                    display: flex;
                    align-items: center;
                    margin: 0 0 10px;
                    opacity: 0.96;
                }

                .contract-logo-inline img {
                    display: block;
                    width: min(170px, 34vw);
                    height: auto;
                    max-height: 46px;
                    object-fit: contain;
                    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
                }

                .top-brand {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    min-width: 0;
                    max-width: 100%;
                }

                .top-brand .contract-logo-inline {
                    margin: 0;
                    flex: 0 0 auto;
                }

                .top-brand .contract-logo-inline img {
                    width: min(128px, 26vw);
                    max-height: 34px;
                }

                .top-brand .logo,
                .top-brand h1 {
                    margin: 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                @media (max-width: 900px) {
                    .contract-logo-inline {
                        margin-bottom: 8px;
                    }

                    .contract-logo-inline img {
                        width: min(132px, 38vw);
                        max-height: 36px;
                    }

                    .top-brand {
                        gap: 8px;
                    }

                    .top-brand .contract-logo-inline img {
                        width: min(92px, 28vw);
                        max-height: 26px;
                    }
                }

        .container {
			max-width: 1800px;
			margin: 0 auto;
			padding: 20px 16px 40px;
			background: radial-gradient(circle at top,
				rgba(7,10,22,0.75) 0,
				rgba(2,0,8,0.9) 55%,
				rgba(0,0,0,0.96) 100%
			);
			backdrop-filter: blur(10px);
			box-shadow: var(--shadow-soft);
			border-radius: 18px;
			border: 1px solid rgba(148,163,184,0.25);
		}

        /* TOP BAR (title + wallet) */

        header {
            border-bottom: 2px solid #111827;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        .title-block {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        h1 {
            font-size: 2.4em;
            color: var(--accent);
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-shadow: 0 0 24px rgba(34,211,238,0.6);
        }
        
        .subtitle { color: var(--text-muted); font-size: 1.05em; }

        .wallet-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .wallet-select {
            padding: 6px 10px;
            border-radius: 16px;
            border: 2px solid #2a3f5f;
            background: rgba(0, 0, 0, 0.4);
            color: #e0e0e0;
            font-size: 0.85em;
        }

        .wallet-button {
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid #1f2937;
            background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(15,23,42,0.7));
            color: var(--accent);
            cursor: pointer;
            font-size: 0.9em;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: all 0.18s ease-out;
            box-shadow: 0 0 0 1px rgba(15,23,42,0.9);
        }

        .wallet-button:hover {
            background: radial-gradient(circle at top, rgba(56,189,248,0.25), rgba(15,23,42,0.98));
            border-color: var(--accent-strong);
            box-shadow: 0 0 22px rgba(34,211,238,0.45);
        }

        .wallet-button:disabled {
            opacity: 0.6;
            cursor: default;
        }

        .wallet-address {
            font-size: 0.8em;
            color: #aaa;
            max-width: 260px;
            word-break: break-all;
            background: rgba(0, 0, 0, 0.3);
            padding: 6px 10px;
            border-radius: 10px;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        /* CONTROLS (search + tools) */

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            padding: 14px 18px;
            background: radial-gradient(circle at top left, rgba(15,23,42,0.92), rgba(15,23,42,0.82));
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,0.4);
            flex-wrap: wrap;
            gap: 16px;
            box-shadow: var(--shadow-soft);
        }
        
        .search-box {
            flex: 1;
            min-width: 260px;
            display: flex;
            gap: 10px;
        }

        .search-box input {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid rgba(51,65,85,0.9);
            border-radius: 999px;
            background: radial-gradient(circle at left, rgba(15,23,42,0.95), rgba(15,23,42,0.75));
            color: #fff;
            font-size: 15px;
            outline: none;
            transition: all 0.22s ease-out;
        }

        .search-box input:focus {
            border-color: var(--accent-strong);
            box-shadow: 0 0 18px rgba(34,211,238,0.35);
        }

        .search-box button {
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid var(--accent);
            background: linear-gradient(135deg, var(--accent), var(--accent-strong));
            color: #020617;
            font-weight: 600;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease-out;
            white-space: nowrap;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .search-box button:hover {
            background: linear-gradient(135deg, #67e8f9, var(--accent));
            box-shadow: 0 0 18px rgba(34,211,238,0.45);
        }

        .filter-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .filter-label {
            font-size: 0.85em;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-compare {
            padding: 6px 14px;
            border-radius: 999px;
            border: 1px solid rgba(148,163,184,0.8);
            background: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(15,23,42,0.7));
            color: var(--accent);
            font-weight: 600;
            font-size: 0.8em;
            text-decoration: none;
            transition: all 0.2s ease-out;
            cursor: pointer;
            white-space: nowrap;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .btn-compare:hover {
            border-color: var(--accent-strong);
            box-shadow: 0 0 18px rgba(34,211,238,0.45);
        }

        /* WALLET ACCORDION */

        .wallet-accordion {
            margin-bottom: 14px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid #2a3f5f;
            overflow: hidden;
        }

        .wallet-accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.4);
        }

        .wallet-accordion-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #9ca3af;
        }

        .wallet-accordion-header span {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .wallet-accordion-caret {
            font-size: 0.8rem;
            color: #9ca3af;
        }

        .wallet-accordion-body {
            display: none;
            padding: 12px 16px 14px;
            background: rgba(255, 255, 255, 0.03);
        }

		.wallet-summary {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

        .wallet-block {
            background: rgba(15, 23, 42, 0.80);
            border-radius: 12px;
            border: 2px solid #2a3f5f;
            padding: 10px 10px 12px;
        }
		
		.wallet-tabs {
			display: flex;
			gap: 8px;
			border-bottom: 1px solid #1f2937;
			margin-bottom: 8px;
		}

		.wallet-tab {
			border: none;
			background: transparent;
			padding: 6px 10px;
			font-size: 0.8rem;
			color: #9ca3af;
			cursor: pointer;
			border-bottom: 2px solid transparent;
		}

		.wallet-tab:hover {
			color: #e5e7eb;
		}

		.wallet-tab-active {
			color: #e5e7eb;
			border-bottom-color: #00d4ff;
		}

		.wallet-tab-content {
			display: none;
		}

		.wallet-tab-content-active {
			display: block;
		}

		/* Filtri Item Type */
		.wallet-type-filters {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-bottom: 8px;
		}

		.wallet-type-filter {
			border: 1px solid #374151;
			background: rgba(15, 23, 42, 0.8);
			color: #9ca3af;
			font-size: 0.7rem;
			padding: 3px 8px;
			border-radius: 999px;
			cursor: pointer;
		}

		.wallet-type-filter-active {
			background: #00d4ff;
			color: #050424;
			border-color: #00d4ff;
		}		

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

        .wallet-block-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: #e5e7eb;
        }

        .wallet-refresh-button {
            padding: 4px 8px;
            font-size: 0.75rem;
            border-radius: 999px;
            border: 1px solid #2a3f5f;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.5);
            color: #e5e7eb;
        }

        .wallet-assets-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 10px;
            max-height: 300px;
            overflow-y: auto;
        }

        .wallet-asset-card {
            background: #020014;
            border-radius: 8px;
            border: 1px solid #111827;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }

        .wallet-asset-card:hover {
            transform: translateY(-2px);
            border-color: #00d4ff;
            box-shadow: 0 6px 16px rgba(0, 212, 255, 0.25);
        }

        .wallet-asset-image {
            width: 100%;
            height: 110px;
            object-fit: cover;
            background: #000;
        }

        .wallet-asset-body {
            padding: 6px 8px 8px;
        }

        .wallet-asset-name {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .wallet-asset-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-bottom: 4px;
        }

        .wallet-asset-tag {
            padding: 2px 6px;
            border-radius: 999px;
            border: 1px solid #1f2937;
            font-size: 0.65rem;
            color: #9ca3af;
        }

        .wallet-asset-qty {
            font-size: 0.78rem;
            color: #e5e7eb;
        }

        .wallet-orders-list {
            max-height: 300px;
            overflow-y: auto;
            font-size: 0.8rem;
        }

        .wallet-order-row {
            display: grid;
            grid-template-columns: 1.4fr 1.1fr auto;
            gap: 6px;
            padding: 6px 0;
            border-bottom: 1px solid #111827;
        }

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

        .wallet-order-name {
            font-weight: 500;
        }

        .wallet-order-meta {
            font-size: 0.72rem;
            color: #9ca3af;
        }

        .wallet-order-numbers {
            text-align: right;
        }

        .wallet-order-price {
            font-weight: 600;
        }

        .wallet-order-qty {
            font-size: 0.75rem;
            color: #d1d5db;
        }

        .wallet-order-date {
            font-size: 0.72rem;
            color: #9ca3af;
        }

        .wallet-order-cancel {
            padding: 4px 8px;
            font-size: 0.72rem;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            background: #00d4ff;
            color: #000;
        }

        .wallet-empty,
        .wallet-error,
        .wallet-loading {
            color: #9ca3af;
            font-style: italic;
            font-size: 0.8rem;
        }

        /* STATS */

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 8px;
            margin-bottom: 18px;
        }

        .stat-card {
            background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
            padding: 8px 10px;
            border-radius: 12px;
            border: 1px solid rgba(148,163,184,0.45);
            text-align: left;
            min-height: 54px;
            box-shadow: var(--shadow-soft);
        }

        .stat-label {
            color: var(--text-muted);
            margin-bottom: 2px;
            font-size: 0.72em;
            text-transform: uppercase;
            letter-spacing: 0.12em;
        }

        .stat-value {
            font-size: 1.05em;
            color: var(--accent);
            font-weight: 600;
        }

        .stat-sub {
            font-size: 0.75em;
            color: #9ca3af;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #00d4ff;
        }

        .no-items {
            background: rgba(15, 23, 42, 0.88);
            border: 2px solid #2a3f5f;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            color: #888;
        }

        .error {
            background: rgba(255, 0, 0, 0.1);
            border: 2px solid #ff4444;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            color: #ff6666;
        }

        /* Main 2-column layout: sidebar + items */

        .main-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 20px;
            margin-top: 10px;
        }

        .sidebar {
            background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,0.45);
            padding: 16px 12px;
            /* lascia che l'altezza segua il contenuto senza scroll interno fisso */
            box-shadow: var(--shadow-soft);
        }

        .sidebar-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #9ca3af;
            margin-bottom: 12px;
        }

        .sidebar-category {
            margin-bottom: 12px;
        }

        .sidebar-category-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 7px 9px;
            border-radius: 9px;
            transition: background 0.2s, color 0.2s, transform 0.08s;
            font-size: 0.9rem;
        }

        .sidebar-category-header:hover {
            background: rgba(0, 0, 0, 0.4);
            transform: translateX(1px);
        }

        .sidebar-category-header.active {
            background: #00d4ff;
            color: #020617;
        }

        .sidebar-category-name {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .sidebar-category-count {
            font-size: 0.78rem;
            padding: 2px 8px;
            border-radius: 999px;
            background: #020014;
            color: #9ca3af;
        }

        .sidebar-type {
            margin: 4px 0;
        }

        .sidebar-type-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            padding: 4px 9px;
            border-radius: 7px;
            transition: background 0.2s, color 0.2s;
            font-size: 0.82rem;
        }

        .sidebar-type-header:hover {
            background: rgba(0, 0, 0, 0.4);
        }

        .sidebar-type-header.active {
            background: #00d4ff;
            color: #020617;
        }

        .sidebar-type-name {
            flex: 1;
        }

        .sidebar-type-caret {
            font-size: 0.7rem;
            margin-left: 6px;
        }

        .sidebar-sublist-wrapper {
            margin-top: 2px;
        }

        .sidebar-sublist {
            list-style: none;
            padding-left: 12px;
            border-left: 1px solid #1f2937;
        }

        .sidebar-link {
            display: block;
            width: 100%;
            text-align: left;
            padding: 5px 9px;
            margin: 2px 0;
            border-radius: 7px;
            border: none;
            background: transparent;
            color: #e5e7eb;
            font-size: 0.82rem;
            cursor: pointer;
            transition: background 0.15s, color 0.15s, transform 0.08s;
        }

        .sidebar-link:hover {
            background: rgba(0, 0, 0, 0.4);
            transform: translateX(1px);
        }

        .sidebar-link.active {
            background: #00d4ff;
            color: #020617;
            font-weight: 600;
        }

        .items-panel {
            min-height: 300px;
        }

        .items-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .items-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #e5e7eb;
        }

        .items-subtitle {
            font-size: 0.82rem;
            color: #9ca3af;
        }
		
		.tools-buttons {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			align-items: center;
		}

        .items-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 18px;
        }

        .item-card {
            background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
            border: 1px solid rgba(148,163,184,0.4);
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
            box-shadow: var(--shadow-soft);
        }

        .item-card:hover {
            transform: translateY(-4px);
            border-color: var(--accent-strong);
            box-shadow: 0 22px 60px rgba(15,23,42,0.98);
        }
        
        .item-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background: #000;
        }
        
        .item-content { padding: 14px; }
        
        .item-name {
            font-size: 1.05em;
            font-weight: bold;
            color: #fff;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .item-badges {
            display: flex;
            gap: 5px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        
        .item-badge {
            display: inline-block;
            padding: 3px 8px;
            background: rgba(0, 212, 255, 0.15);
            color: #00d4ff;
            border-radius: 8px;
            font-size: 0.75em;
        }
        
        .item-prices {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-top: 8px;
        }
        
        .price-box {
            background: #020014;
            padding: 6px 4px;
            border-radius: 6px;
            text-align: center;
            border: 1px solid rgba(0, 212, 255, 0.2);
        }
        
        .price-box.ask-box { border-color: #00ff88; border-width: 1.5px; }
        .price-box.bid-box { border-color: #ff8800; border-width: 1.5px; }
        
        .price-label {
            font-size: 0.6em;
            color: #888;
            margin-bottom: 2px;
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .price-value {
            font-size: 0.82em;
            font-weight: bold;
        }
        
        .price-value.ask { color: #00ff88; }
        .price-value.bid { color: #ffb460; }
        .price-currency { font-size: 0.68em; color: #9ca3af; margin-top: 1px; }
        
        .no-price {
            color: #666;
            font-style: italic;
            text-align: center;
            font-size: 0.85em;
            padding: 10px;
        }

        .site-footer {
            margin-top: 40px;
            font-size: 0.75rem;
            text-align: center;
            color: rgba(148,163,184,0.7);
        }

        @media (max-width: 960px) {
            .wallet-summary {
                grid-template-columns: 1fr;
            }

            .main-layout {
                grid-template-columns: 1fr;
            }
            .sidebar {
                max-height: none;
                order: 1;
            }
            .items-panel {
                order: 2;
            }
        }

        @media (max-width: 768px) {
            .controls { flex-direction: column; }
            .items-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
        }
		
		 /* Site disclaimer overlay – DARK THEME MATCHING SITE */

		#siteDisclaimerOverlay {
			position: fixed;
			inset: 0;
			background: rgba(5, 4, 36, 0.85);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
			backdrop-filter: blur(6px);
		}

		#siteDisclaimerBox {
			max-width: 700px;
			width: 92%;
			background: rgba(10, 12, 38, 0.9);
			color: #e0e0e0;
			border-radius: 18px;
			border: 2px solid #00d4ff;
			box-shadow: 0 0 35px rgba(0, 212, 255, 0.25);
			padding: 26px 28px;
			font-size: 0.92rem;
		}

		#siteDisclaimerBox h2 {
			margin: 0 0 12px;
			font-size: 1.25rem;
			color: #00d4ff;
			text-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
		}

		#siteDisclaimerBox p,
		#siteDisclaimerBox li {
			color: #c9d1d9;
		}

		#siteDisclaimerBox ul {
			margin: 8px 0 12px 20px;
		}

		/* Buttons matching your blue curved site buttons */
		#siteDisclaimerActions {
			margin-top: 18px;
			display: flex;
			gap: 12px;
			justify-content: flex-end;
			flex-wrap: wrap;
		}

		#siteDisclaimerActions .btn {
			padding: 10px 16px;
			border-radius: 16px;
			background: #00d4ff;
			border: 1px solid #00d4ff;
			color: #050424;
			font-size: 0.9rem;
			font-weight: 600;
			cursor: pointer;
			transition: 0.2s;
		}

		#siteDisclaimerActions .btn:hover {
			background: #00ffff;
			border-color: #00ffff;
		}

		#siteDisclaimerActions .btn.secondary {
			background: rgba(255, 255, 255, 0.05);
			border: 1px solid #2a3f5f;
			color: #e0e0e0;
		}

		#siteDisclaimerActions .btn.secondary:hover {
			background: rgba(0, 212, 255, 0.12);
			border-color: #00d4ff;
			color: #00d4ff;
		}

/* ========================================================================== */
/* PAGE SCOPE: AUTO TRADER                                                    */
/* ========================================================================== */
/* ===== MERGED FROM style-auto-trader.css ===== */
@scope (body.auto-trader-page) {
* { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
			--bg-body: #020617;
			--bg-panel: rgba(15,23,42,0.96);
			--bg-panel-soft: rgba(15,23,42,0.86);
			--accent: #22d3ee;
			--accent-strong: #0ea5e9;
			--accent-warm: #f97316;
			--text-main: #e5e7eb;
			--text-muted: #9ca3af;
			--shadow-soft: 0 18px 40px rgba(15,23,42,0.96);
        }

        body {
            font-family: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: url('/images/soren-meding.jpg') center center / cover no-repeat fixed;
            position: relative;
            color: var(--text-main);
            min-height: 100vh;
            padding: 20px;
            letter-spacing: 0.02em;
        }
        
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(5, 4, 36, 0.60);
            z-index: -1;
        }

        .page {
            max-width: 1400px;
            margin: 0 auto;
            background: radial-gradient(circle at top,
				rgba(7,10,22,0.8) 0,
				rgba(2,0,8,0.94) 55%,
				rgba(0,0,0,0.97) 100%
			);
            padding: 20px 18px 32px;
            border-radius: 18px;
            border: 1px solid rgba(148,163,184,0.25);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(10px);
        }

        h1 {
            font-size: 1.8rem;
            color: var(--accent);
            margin-bottom: 6px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-shadow: 0 0 18px rgba(34,211,238,0.6);
        }

        .subtitle {
            color: var(--text-muted);
            margin-bottom: 20px;
        }

        .card {
            background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
            border-radius: 16px;
            border: 1px solid rgba(148,163,184,0.55);
            padding: 18px 20px;
            margin-bottom: 18px;
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-soft);
        }

        .card-title {
            font-size: 1.0rem;
            margin-bottom: 10px;
            color: var(--accent);
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .row {
            display: flex;
            gap: 12px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }

        .field {
            flex: 1;
            min-width: 160px;
        }

        label {
            display: block;
            font-size: 0.85rem;
            color: #aaa;
            margin-bottom: 3px;
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 7px 9px;
            border-radius: 8px;
            border: 1px solid #2a3f5f;
            background: rgba(0, 0, 0, 0.65);
            color: #e0e0e0;
            font-size: 0.9rem;
        }

        input:disabled {
            opacity: 0.6;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 999px;
            border: 1px solid var(--accent);
            background: radial-gradient(circle at top, rgba(34,211,238,0.18), rgba(15,23,42,0.98));
            color: var(--accent);
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: 0.18s ease-out;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .btn:hover {
            background: radial-gradient(circle at top, rgba(56,189,248,0.32), rgba(15,23,42,0.98));
            box-shadow: 0 0 18px rgba(34,211,238,0.45);
        }

        .btn.secondary {
            border-color: #555;
            color: #ccc;
            background: rgba(255, 255, 255, 0.06);
        }

        .btn.secondary:hover {
            background: rgba(255, 255, 255, 0.12);
        }

        .btn.danger {
            border-color: #ff6666;
            color: #ff8888;
            background: rgba(255, 102, 102, 0.1);
        }

        .btn.danger:hover {
            background: rgba(255, 102, 102, 0.2);
        }

        .btn.tiny {
            font-size: 0.7rem;
            padding: 3px 6px;
        }

        .status-bar {
            font-size: 0.85rem;
            color: #ccc;
        }

        .status-ok { color: #7dffb8; }
        .status-warn { color: #ffae42; }
        .status-err { color: #ff6666; }

        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 999px;
            font-size: 0.75rem;
            border: 1px solid #2a3f5f;
            background: rgba(0, 0, 0, 0.7);
            margin-right: 6px;
        }

        #logs {
            width: 100%;
            height: 220px;
            background: rgba(0, 0, 0, 0.85);
            border-radius: 10px;
            border: 1px solid #2a3f5f;
            padding: 8px;
            font-family: "SF Mono", Consolas, monospace;
            font-size: 0.8rem;
            overflow-y: auto;
            white-space: pre-wrap;
        }

        .my-orders-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            font-size: 0.8rem;
        }

        /* Each order: vertical block, text on top, button aligned right below */
        .my-order-row {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 4px;
            padding: 6px 8px;
            border-radius: 6px;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid #2a3f5f;
        }

        .my-order-info {
            display: flex;
            flex-direction: column;
        }

        /* "Cancel" button aligned to the right without overlapping text */
        .my-order-row .btn {
            align-self: flex-end;
        }

        .token-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 6px;
            font-size: 0.85rem;
        }

        .token-table th,
        .token-table td {
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding: 6px 4px;
            text-align: left;
        }

        .token-table th {
            color: #aaa;
            font-weight: 600;
        }

        .token-table td.mint-cell {
            font-family: monospace;
            font-size: 0.75rem;
        }

        .token-enabled {
            text-align: center;
        }

        .token-label {
            font-weight: 600;
        }

        .select-small {
            padding: 5px 8px;
            border-radius: 8px;
            border: 1px solid #2a3f5f;
            background: rgba(0, 0, 0, 0.7);
            color: #e0e0e0;
            font-size: 0.8rem;
        }

        .my-orders-columns {
            display: flex;
            gap: 10px;
            overflow-x: auto;
        }

        .my-orders-column {
            flex: 0 0 230px;
            min-width: 230px;
        }

        .my-orders-column-title {
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 4px;
            color: #00d4ff;
        }

        .my-orders-empty {
            font-size: 0.75rem;
            color: #888;
            font-style: italic;
        }
        /* Responsive: collapse rows to single column on small screens */
        @media (max-width: 900px) {
            .row { flex-direction: column; }
            .field { min-width: 0; width: 100%; }
            .token-table thead { display: none; }
            .token-table, .token-table tbody, .token-table tr, .token-table td { display: block; width: 100%; }
            .token-table tr { margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
            .token-table td { padding: 8px 6px; }
            .token-table td::before { content: attr(data-label); display: block; color: #9ca3af; font-size:0.75rem; margin-bottom:4px; }
            #logs { height: 160px; }
            #disclaimerOverlay { padding: 16px; align-items: flex-start; overflow-y: auto; }
            #disclaimerBox { width: 96%; max-width: 640px; padding: 14px; max-height: calc(100vh - 32px); overflow-y: auto; }
            .my-orders-column { min-width: 180px; }
        }
        /* Disclaimer overlay */
        #disclaimerOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        #disclaimerBox {
            max-width: 620px;
            width: 90%;
            background: rgba(5, 10, 25, 0.98);
            border-radius: 14px;
            border: 1px solid #2a3f5f;
            padding: 20px 22px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
            font-size: 0.85rem;
            backdrop-filter: blur(10px);
        }

        #disclaimerBox h2 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #00d4ff;
        }

        #disclaimerBox p {
            margin-bottom: 8px;
            color: #e5e7eb;
        }

        #disclaimerBox ul {
            margin: 6px 0 10px 18px;
            padding: 0;
        }

        #disclaimerBox li {
            margin-bottom: 4px;
        }

        #disclaimerActions {
            margin-top: 14px;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

    
        /* Telegram help overlay (same UX as price-alert help) */
        .alert-help-overlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,0.65);
            display:none;
            align-items:center;
            justify-content:center;
            padding:20px;
            z-index:9999;
        }
        .alert-help-overlay.active{ display:flex; }
        .alert-help-popup{
            max-width:720px;
            width:100%;
            background:rgba(5, 10, 25, 0.98);
            border:1px solid rgba(255,255,255,0.12);
            border-radius:14px;
            padding:18px 18px 14px 18px;
            box-shadow:0 10px 40px rgba(0,0,0,0.9);
            backdrop-filter: blur(10px);
        }
        .alert-help-popup h3{
            margin:0 0 10px 0;
            font-size:1.05rem;
        }
        .alert-help-popup ol{
            margin:0;
            padding-left:18px;
            color:#d1d5db;
            font-size:0.9rem;
            line-height:1.35;
        }
        .alert-help-popup code{
            background:rgba(255,255,255,0.08);
            padding:2px 6px;
            border-radius:6px;
            font-size:0.85em;
        }
        .alert-help-close{ margin-top:12px; display:flex; justify-content:flex-end; }

        .site-footer {
            margin-top: 20px;
            font-size: 0.75rem;
            text-align: center;
            color: rgba(148,163,184,0.7);
        }
}



/* ========================================================================== */
/* PAGE SCOPE: PRICE CHART                                                    */
/* ========================================================================== */
/* ===== MERGED FROM style-price-chart.css ===== */
@scope (body.price-chart-page) {
* { box-sizing: border-box; }

    :root {
		--bg-body: #020617;
		--bg-panel: rgba(15,23,42,0.96);
		--bg-panel-soft: rgba(15,23,42,0.86);
		--accent: #22d3ee;
		--accent-strong: #0ea5e9;
		--accent-warm: #f97316;
		--text-main: #e5e7eb;
		--text-muted: #9ca3af;
		--shadow-soft: 0 18px 40px rgba(15,23,42,0.96);
    }

    body {
      margin: 0;
      font-family: 'Rajdhani', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #000 url('Images/VZUSballad.jpg') no-repeat center top fixed;
      background-size: cover;
      color: var(--text-main);
      letter-spacing: 0.02em;
    }

    .page {
      max-width: 1680px;
      margin: 0 auto;
      padding: 20px 16px 40px;
      background: radial-gradient(circle at top,
        rgba(7,10,22,0.75) 0,
        rgba(2,0,8,0.90) 55%,
        rgba(0,0,0,0.96) 100%
      );
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow-soft);
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,0.25);
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .logo {
      font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      text-shadow: 0 0 18px rgba(34,211,238,0.6);
    }

    .top-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .btn {
      border: 1px solid rgba(148, 163, 184, 0.8);
      background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(15,23,42,0.7));
      color: var(--accent);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 0.9rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: all 0.2s ease-out;
    }

    .btn:hover {
      border-color: var(--accent-strong);
      box-shadow: 0 0 18px rgba(34,211,238,0.45);
    }

    .title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      margin-bottom: 18px;
    }

    .page-title {
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .page-subtitle {
      font-size: 0.9rem;
      color: var(--text-muted);
      max-width: 700px;
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
      gap: 16px;
      align-items: flex-start;
    }

    .panel {
      background: radial-gradient(circle at top left,
        var(--bg-panel),
        var(--bg-panel-soft)
      );
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,0.5);
      padding: 14px 14px 16px;
      box-shadow: var(--shadow-soft);
    }

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

    .panel-title {
      font-size: 0.95rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.11em;
      color: var(--accent);
    }

    .panel-subtitle {
      font-size: 0.78rem;
      color: var(--text-muted);
    }

    .left-panel {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }

    .field label {
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .field input,
    .field select {
      width: 100%;
      border-radius: 12px;
      border: 1px solid rgba(75,85,99,0.9);
      background: rgba(15,23,42,0.95);
      color: #e5e7eb;
      padding: 7px 9px;
      font-size: 0.88rem;
      outline: none;
    }

    .field input::placeholder {
      color: #6b7280;
    }

    .field select {
      min-height: 260px;
    }

    .field-actions {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }

    .btn-small {
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.8);
      background: rgba(15,23,42,0.9);
      color: #e5e7eb;
      padding: 7px 12px;
      font-size: 0.8rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .btn-small:hover {
      border-color: #f97316;
    }

    .hint {
      font-size: 0.76rem;
      color: #6b7280;
      margin-top: 4px;
    }

    .main-panel {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px;
    }

    #nftTitle {
      font-size: 1rem;
      font-weight: 600;
      color: #e5e7eb;
    }

    .chart-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(15,23,42,0.9);
      border-radius: 999px;
      padding: 4px 8px;
      border: 1px solid rgba(75,85,99,0.9);
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .control-label {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .pill-btn {
      border-radius: 999px;
      border: none;
      background: transparent;
      color: #9ca3af;
      padding: 4px 9px;
      font-size: 0.8rem;
      cursor: pointer;
    }

    .pill-btn.active {
      background: linear-gradient(135deg, var(--accent-warm), #ea580c);
      color: #111827;
      font-weight: 600;
    }

    .chart-container {
      position: relative;
      height: 340px;
      background: radial-gradient(circle at top left,
        rgba(15,23,42,0.98),
        rgba(15,23,42,0.86)
      );
      border-radius: 14px;
      border: 1px solid rgba(55,65,81,0.9);
      padding: 10px 10px 4px;
      overflow: hidden;
    }

    .chart-placeholder {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: #9ca3af;
      text-align: center;
      padding: 0 10px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .stat-pill {
      border-radius: 999px;
      padding: 7px 11px;
      border: 1px solid rgba(55,65,81,0.9);
      background: rgba(15,23,42,0.95);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
    }

    .stat-label {
      color: #9ca3af;
    }

    .stat-value {
      font-weight: 600;
      color: #e5e7eb;
      white-space: nowrap;
    }

    .stat-change {
      font-size: 0.78rem;
      margin-left: 4px;
    }
    .stat-change.pos { color: #4ade80; }
    .stat-change.neg { color: #f97373; }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }

    th, td {
      padding: 7px 6px;
      text-align: left;
      border-bottom: 1px solid rgba(31,41,55,0.9);
    }

    th {
      font-weight: 600;
      color: #9ca3af;
      background: rgba(15,23,42,0.96);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    tbody tr:nth-child(odd) {
      background: rgba(15,23,42,0.88);
    }

    tbody tr:nth-child(even) {
      background: rgba(17,24,39,0.9);
    }

    tbody tr:hover {
      background: rgba(30,64,175,0.55);
    }

    .tx-link {
      color: #60a5fa;
    }

    .table-wrap {
      max-height: 260px;
      overflow-y: auto;
      border-radius: 14px;
      border: 1px solid rgba(55,65,81,0.9);
      background: rgba(15,23,42,0.96);
    }

    .error-box {
      display: none;
      border-radius: 10px;
      border: 1px solid #f97373;
      padding: 10px 12px;
      background: rgba(127, 29, 29, 0.25);
      color: #fecaca;
      font-size: 0.8rem;
      margin-top: 8px;
    }

    .site-footer {
      margin-top: 20px;
      font-size: 0.75rem;
      text-align: center;
      color: rgba(148,163,184,0.7);
    }

    @media (max-width: 1200px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .top-bar {
        flex-direction: column;
        align-items: flex-start;
      }
      .title-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .chart-header {
        flex-direction: column;
        align-items: flex-start;
      }
      .chart-controls {
        justify-content: flex-start;
      }
    }
    @media (max-width: 640px) {
      .top-bar { flex-direction: column; align-items: flex-start; }
      .title-row { flex-direction: column; align-items: flex-start; }
      .chart-header { flex-direction: column; align-items: flex-start; }
      .chart-controls { width: 100%; justify-content: space-between; }
      .layout { grid-template-columns: 1fr; }
      .chart-container { height: 260px; }
      .field select { min-height: 160px; }
    }
}


/* ========================================================================== */
/* PAGE SCOPE: SHIPS COMPARE                                                  */
/* ========================================================================== */
/* ===== MERGED FROM style-ships-compare.css ===== */
@scope (body.ships-compare-page) {
* { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
		  --bg-body: #020617;
		  --bg-panel: rgba(15,23,42,0.96);
		  --bg-panel-soft: rgba(15,23,42,0.86);
		  --accent: #22d3ee;
		  --accent-strong: #0ea5e9;
		  --accent-warm: #f97316;
		  --text-main: #e5e7eb;
		  --text-muted: #9ca3af;
		  --shadow-soft: 0 18px 40px rgba(15,23,42,0.96);
    }

    body {
      font-family: 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background:
        linear-gradient(
          rgba(5, 4, 36, 0.55),
          rgba(5, 4, 36, 0.55)
        ),
        url('/images/mining-close.jpg');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: var(--text-main);
      min-height: 100vh;
      padding: 20px;
      letter-spacing: 0.02em;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: radial-gradient(circle at top,
        rgba(7,10,22,0.78) 0,
        rgba(2,0,8,0.94) 55%,
        rgba(0,0,0,0.97) 100%
      );
      padding: 20px 18px 32px;
      border-radius: 18px;
      border: 1px solid rgba(148,163,184,0.25);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(10px);
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 2px solid #2a3f5f;
      padding-bottom: 15px;
      gap: 10px;
      flex-wrap: wrap;
    }

    h1 {
      font-size: 2em;
      color: var(--accent);
      text-shadow: 0 0 18px rgba(34,211,238,0.6);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .back-link {
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.8);
      background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(15,23,42,0.7));
      color: var(--accent);
      text-decoration: none;
      font-size: 0.85em;
      cursor: pointer;
      transition: all 0.2s ease-out;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .back-link:hover {
      border-color: var(--accent-strong);
      box-shadow: 0 0 18px rgba(34,211,238,0.45);
    }

    .subtitle { color: #888; font-size: 0.9em; margin-top: 4px; }

    .top-panel {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 20px;
      margin-bottom: 25px;
    }

    .selector-card,
    .selected-card,
    .table-card {
      background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.45);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadow-soft);
      padding: 12px 12px 14px;
    }

    .selector-title {
      font-size: 1.05em;
      color: var(--accent);
      margin-bottom: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .selector-row {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    select {
      flex: 1;
      min-width: 220px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #2a3f5f;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      font-size: 0.9em;
      outline: none;
    }

    button { cursor: pointer; }

    .btn-primary {
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid var(--accent);
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      color: #050424;
      font-weight: 700;
      font-size: 0.85em;
      transition: all 0.2s ease-out;
      white-space: nowrap;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #67e8f9, var(--accent));
      box-shadow: 0 0 18px rgba(34,211,238,0.45);
    }

    .btn-secondary {
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #ff6666;
      background: transparent;
      color: #ff8080;
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .btn-secondary:hover {
      background: rgba(255, 102, 102, 0.2);
    }

    .btn-ghost {
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0, 212, 255, 0.35);
      background: rgba(0, 0, 0, 0.25);
      color: #cfefff;
      font-size: 0.8em;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .btn-ghost:hover {
      border-color: rgba(0, 255, 255, 0.8);
      background: rgba(0, 212, 255, 0.15);
    }

    .hint {
      font-size: 0.8em;
      color: #999;
      line-height: 1.35;
    }

    .fleets-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .fleet-block {
      background: rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(42, 63, 95, 0.9);
      border-radius: 12px;
      padding: 10px;
    }

    .fleet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .fleet-title {
      font-size: 0.95em;
      font-weight: 800;
      color: #fff;
    }

    .selected-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }

    .ship-pill {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 10px;
      padding: 8px 10px;
      border: 1px solid #2a3f5f;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
    }

    .ship-pill-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .ship-name {
      font-size: 0.95em;
      font-weight: 700;
      color: #fff;
    }

    .ship-category {
      font-size: 0.7em;
      color: #aaa;
    }

    .ship-price-summary {
      font-size: 0.8em;
      color: #ccc;
    }

    .ship-tag {
      font-size: 0.7em;
      color: #00d4ff;
    }

    .compare-table-wrapper { margin-top: 10px; }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85em;
    }

    thead th {
      background: rgba(0, 212, 255, 0.1);
      border-bottom: 2px solid #00d4ff;
      padding: 8px;
      text-align: center;
    }

    tbody td, tbody th {
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      padding: 6px 8px;
      text-align: center;
    }

    tbody th {
      text-align: left;
      color: #ccc;
      font-weight: 500;
      width: 260px;
    }

    .metric-group {
      background: rgba(255, 255, 255, 0.03);
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #888;
    }

    .best-value {
      background: rgba(0, 212, 255, 0.25);
      border-radius: 6px;
      border: 1px solid #00f0ff;
      font-weight: 800;
      color: #fff;
    }

    .value-missing {
      color: #555;
      font-style: italic;
    }

    .metric-note {
      font-size: 0.75em;
      color: #888;
      margin-top: 4px;
      line-height: 1.4;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 0.75em;
      border: 1px solid rgba(0, 212, 255, 0.3);
      color: #ccc;
    }

    .chip-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #00d4ff;
    }

    .loading, .error {
      text-align: center;
      padding: 30px;
      margin-top: 20px;
    }

    .loading { color: #00d4ff; }
    .error {
      background: rgba(255, 0, 0, 0.1);
      border: 2px solid #ff4444;
      border-radius: 10px;
      color: #ff8888;
    }

    .site-footer {
      margin-top: 20px;
      font-size: 0.75rem;
      text-align: center;
      color: rgba(148,163,184,0.7);
    }

    @media (max-width: 900px) {
      .top-panel { grid-template-columns: 1fr; }
      .fleets-grid { grid-template-columns: 1fr; }
      .top-panel { gap: 12px; }
      .fleet-block { padding: 8px; }
      .selector-row { flex-direction: column; align-items: stretch; }
      select { min-width: 0; width: 100%; }
      .table-card { overflow-x: auto; }
    }
}


/* ========================================================================== */
/* PAGE SCOPE: RECENT TRADES                                                  */
/* ========================================================================== */
/* ===== MERGED FROM style-recent-trades.css ===== */
@scope (body.recent-trades-page) {
:root {
			--bg-body: #020617;
			--bg-panel: rgba(15,23,42,0.96);
			--bg-panel-soft: rgba(15,23,42,0.86);
			--accent: #22d3ee;
			--accent-strong: #0ea5e9;
			--accent-warm: #f97316;
			--text-main: #e5e7eb;
			--text-muted: #9ca3af;
			--shadow-soft: 0 18px 40px rgba(15,23,42,0.96);
        }

        body {
            margin: 0;
            font-family: 'Rajdhani', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #000 url('Images/VZUSballad.jpg') no-repeat center top fixed;
            background-size: cover;
            color: var(--text-main);
            letter-spacing: 0.02em;
        }

		.page {
			max-width: 1680px;
			margin: 0 auto;
			padding: 20px 16px 40px;
			background: radial-gradient(circle at top,
				rgba(7,10,22,0.75) 0,
				rgba(2,0,8,0.90) 55%,
				rgba(0,0,0,0.96) 100%
			);
			backdrop-filter: blur(10px);
			box-shadow: var(--shadow-soft);
			border-radius: 18px;
			border: 1px solid rgba(148,163,184,0.25);
		}

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }

        .logo {
            font-size: 1.6rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--accent);
            text-shadow: 0 0 18px rgba(34,211,238,0.6);
        }

        .top-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .btn {
            border: 1px solid rgba(148, 163, 184, 0.8);
            background: linear-gradient(135deg, rgba(15,23,42,0.97), rgba(15,23,42,0.7));
            color: var(--accent);
            padding: 10px 18px;
            border-radius: 999px;
            font-size: 0.9rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: all 0.2s ease-out;
        }

        .btn:hover {
            border-color: var(--accent-strong);
            box-shadow: 0 0 18px rgba(34,211,238,0.45);
        }

        .title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 12px;
            margin-bottom: 18px;
        }

        .page-title {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .page-subtitle {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            font-size: 0.9rem;
            justify-content: flex-end;
        }

        .filters-group {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(15,23,42,0.85);
            border-radius: 999px;
            padding: 7px 13px;
            border: 1px solid rgba(75,85,99,0.8);
        }

        .filters label {
            color: #9ca3af;
            font-size: 0.8rem;
        }

        select, input {
            background: transparent;
            border: none;
            color: #e5e7eb;
            font-size: 0.9rem;
            outline: none;
        }

        input[type="number"] {
            width: 90px;
        }


        .filters-group--search input[type="text"] {
            width: 220px;
        }

        .filters-group--search input::placeholder {
            color: rgba(156, 163, 175, 0.75);
        }

        .reload-btn {
            border-radius: 999px;
            padding: 9px 20px;
            border: 1px solid rgba(148,163,184,0.9);
            background: linear-gradient(135deg, rgba(22,163,74,0.95), rgba(22,163,74,0.75));
            font-size: 0.95rem;
            cursor: pointer;
            color: #ecfdf5;
            font-weight: 600;
        }

        .reload-btn:hover {
            border-color: #22c55e;
            box-shadow: 0 0 0 1px rgba(34,197,94,0.45);
        }

        .layout {
            display: grid;
            grid-template-columns: 1.4fr 1.4fr 1.2fr; /* NFT | Resources | Volume ranking */
            gap: 18px;
            margin-top: 18px;
        }

		.panel {
			background: radial-gradient(circle at top left, var(--bg-panel), var(--bg-panel-soft));
			border-radius: 20px;
			border: 1px solid rgba(148,163,184,0.55);
			padding: 14px 14px 10px;
			display: flex;
			flex-direction: column;
			min-height: 430px;
			backdrop-filter: blur(8px);
			box-shadow: var(--shadow-soft);
		}

        .panel-title {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .panel-subtitle {
            font-size: 0.8rem;
            color: #9ca3af;
            margin-bottom: 10px;
        }

        .panel-count {
            font-size: 0.8rem;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .trade-header {
            display: grid;
            grid-template-columns: minmax(0, 2.3fr) minmax(0, 2.1fr);
            gap: 8px;
            padding: 6px 8px;
            border-radius: 12px;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #9ca3af;
            background: rgba(15,23,42,0.92);
            border: 1px solid rgba(55,65,81,0.8);
            margin-bottom: 8px;
        }

        .trade-header--resource {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 2.1fr);
        }

        .volume-header {
            display: grid;
            grid-template-columns: 0.7fr minmax(0, 2.3fr) minmax(0, 2.1fr);
            gap: 8px;
            padding: 6px 8px;
            border-radius: 12px;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #9ca3af;
            background: rgba(15,23,42,0.92);
            border: 1px solid rgba(55,65,81,0.8);
            margin-bottom: 8px;
        }

        .trade-list {
            flex: 1;
            overflow-y: auto;
            padding-right: 4px;
            margin-bottom: 6px;
            max-height: 1400px; /* SCROLL GRANDE per ogni sezione */
        }

        .trade-row {
            display: grid;
            grid-template-columns: minmax(0, 2.3fr) minmax(0, 2.1fr);
            gap: 8px;
            padding: 9px;
            border-radius: 14px;
            border: 1px solid rgba(31,41,55,0.9);
            background: radial-gradient(circle at top left, rgba(15,23,42,0.97), rgba(15,23,42,0.78));
            margin-bottom: 6px;
            font-size: 0.86rem;
        }

        .trade-row:nth-child(odd) {
            background: radial-gradient(circle at top left, rgba(15,23,42,0.99), rgba(15,23,42,0.80));
        }

        .trade-row--resource {
            grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 2.1fr);
        }

        .trade-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

		.trade-main-left {
			display: flex;
			align-items: center;
			gap: 9px;
		}

		/* contenitore del testo, subito dopo l'immagine */
		.trade-main-left > div:last-child {
			min-width: 0;              /* fondamentale per evitare overflow in flex */
		}

        .trade-image {
            width: 72px;
            height: 72px;
            border-radius: 16px;
            overflow: hidden;
            flex-shrink: 0;
            background: #020617;
            border: 1px solid #1f2933;
        }

        .trade-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

		.trade-name {
			font-weight: 600;
			font-size: 0.98rem;
			color: #e5e7eb;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;

			/* permetti al testo di andare su 2 righe max */
			white-space: normal;
			display: -webkit-box;
			-webkit-line-clamp: 2;     /* massimo 2 righe */
			-webkit-box-orient: vertical;
			word-break: break-word;
		}

        .trade-name a {
            color: inherit;
            text-decoration: none;
        }
        .trade-name a:hover {
            text-decoration: underline;
        }

        .trade-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            align-items: center;
        }

        .badge {
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 0.70rem;
            border: 1px solid rgba(75,85,99,0.9);
            background: rgba(15,23,42,0.9);
            color: #9ca3af;
        }

        .badge-side-buy {
            border-color: rgba(34,197,94,0.8);
            color: #bbf7d0;
        }

        .badge-side-sell {
            border-color: rgba(239,68,68,0.8);
            color: #fecaca;
        }

        .badge-currency {
            border-color: rgba(59,130,246,0.8);
            color: #bfdbfe;
        }

        .badge-category {
            border-color: rgba(156,163,175,0.9);
        }

        .trade-numbers {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 3px;
            text-align: right;
        }

        .trade-price {
            font-weight: 700;
            font-size: 1.15rem;
        }

        .trade-qty {
            font-size: 0.8rem;
            color: #9ca3af;
        }

        .trade-wallets {
            font-size: 0.8rem;
            color: #9ca3af;
        }

        .trade-date {
            font-size: 0.75rem;
            color: #6b7280;
        }

        .trade-volume {
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: 650;
            font-size: 1rem;
            color: #e5e7eb;
        }

        .trade-volume-label {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        .volume-row {
            display: grid;
            grid-template-columns: 0.7fr minmax(0, 2.3fr) minmax(0, 2.1fr);
            gap: 8px;
            padding: 9px;
            border-radius: 14px;
            border: 1px solid rgba(31,41,55,0.9);
            background: radial-gradient(circle at top left, rgba(15,23,42,0.97), rgba(15,23,42,0.78));
            margin-bottom: 6px;
            font-size: 0.86rem;
        }

        .volume-row:nth-child(odd) {
            background: radial-gradient(circle at top left, rgba(15,23,42,0.99), rgba(15,23,42,0.80));
        }

        .volume-rank {
            display: flex;
        }

        @media (max-width: 900px) {
          .top-panel { grid-template-columns: 1fr; }
          .fleets-grid { grid-template-columns: 1fr; }
          .layout { grid-template-columns: 1fr; }
          .trade-row, .trade-row--resource { grid-template-columns: 1fr; }
          .trade-image { width: 56px; height: 56px; }
          .trade-name { font-size: 0.95rem; }
        }
            flex-direction: column;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            color: #e5e7eb;
        }

        .volume-main {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .volume-main-left {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .volume-values {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 3px;
            text-align: right;
        }

        .volume-value-line {
            font-size: 0.8rem;
            color: #d1d5db;
        }

        .empty-state, .error-state {
            font-size: 0.86rem;
            color: #9ca3af;
            padding: 10px 8px;
        }

        .error-state {
            color: #fecaca;
        }

        .footer-note {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 8px;
        }

        /* === INDEXER STATS (above recent trades) === */
        .indexer-row {
            margin-bottom: 20px;
        }

        .indexer-card {
            background: radial-gradient(circle at top left, rgba(15,23,42,0.96), rgba(15,23,42,0.80));
            border: 1px solid rgba(55,65,81,0.9);
            border-radius: 16px;
            padding: 14px 18px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.9rem;
        }

        .indexer-title {
            font-weight: 600;
            color: #f97316;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .indexer-values {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .indexer-value {
            color: #e5e7eb;
        }

        .indexer-label {
            color: #9ca3af;
            margin-right: 4px;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        @media (max-width: 1200px) {
            .layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .top-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            .title-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .filters {
                justify-content: flex-start;
            }
        }

        /* === STATS ROW === */
        .stats-row {
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 16px;
            margin-bottom: 24px;
        }

        @media (max-width: 1200px) {
            .stats-row {
                grid-template-columns: 1fr;
            }
        }

        .stats-card {
            background: radial-gradient(circle at top left, rgba(15,23,42,0.97), rgba(15,23,42,0.78));
            border: 1px solid rgba(55,65,81,0.8);
            border-radius: 16px;
            padding: 20px;
        }

        .stats-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #00d4ff;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .stat-box {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .stat-label {
            font-size: 0.75rem;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #e5e7eb;
        }

        .stat-value--atlas {
            color: #3b82f6;
        }

        .stat-value--usdc {
            color: #10b981;
        }

        /* TOP WALLETS */
        .wallet-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: 350px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .wallet-row {
            display: grid;
            grid-template-columns: 50px minmax(300px, 1fr) auto;
            gap: 12px;
            align-items: center;
            padding: 12px 14px;
            background: rgba(15,23,42,0.6);
            border: 1px solid rgba(31,41,55,0.9);
            border-radius: 12px;
            transition: all 0.2s;
        }

        .wallet-row:hover {
            background: rgba(15,23,42,0.85);
            border-color: rgba(55,65,81,0.9);
        }

        .wallet-rank {
            font-size: 1.3rem;
            font-weight: 700;
            color: #6b7280;
            text-align: center;
        }

        .wallet-rank--top3 {
            color: #fbbf24;
            font-size: 1.5rem;
        }

        .wallet-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }

        .wallet-addr {
            font-family: 'Courier New', monospace;
            font-size: 0.85rem;
            color: #e5e7eb;
            font-weight: 600;
            word-break: break-all;
            line-height: 1.4;
        }

        .wallet-meta {
            display: flex;
            gap: 10px;
            font-size: 0.75rem;
            color: #9ca3af;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .wallet-vol {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            min-width: 180px;
        }

        .wallet-vol-main {
            font-size: 1.05rem;
            font-weight: 700;
        }

        .wallet-vol-sub {
            font-size: 0.7rem;
            color: #6b7280;
        }

        .site-footer {
            margin-top: 20px;
            font-size: 0.75rem;
            text-align: center;
            color: rgba(148,163,184,0.7);
        }
}