/* Theme Variables (Defaults to Light Mode) */
        :root {
            --bg-body: #f4f4f9;
            --bg-sidebar: #ffffff;
            --bg-results: #ffffff;
            --text-main: #333333;
            --text-muted: #666666;
            --border-color: #dddddd;
            --btn-bg: #333333;
            --btn-text: #ffffff;
            --accent-color: #007acc;
        }

        /* Dark Mode Overrides */
        [data-theme="dark"] {
            --bg-body: #121212;
            --bg-sidebar: #1e1e1e;
            --bg-results: #1e1e1e;
            --text-main: #f0f0f0;
            --text-muted: #b0b0b0;
            --border-color: #444444;
            --btn-bg: #ffffff;
            --btn-text: #121212;
        }

        /* Base Reset */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: var(--bg-body);
            padding: 20px;
            color: var(--text-main);
        }

        /* Top Header Area */
        .header {
            max-width: 1600px;
            margin: 0 auto 20px auto;
            display: flex;
            justify-content: flex-end;
        }

        .theme-toggle-btn {
            background-color: var(--btn-bg);
            color: var(--btn-text);
            border: none;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            border-radius: 20px;
            cursor: pointer;
        }

		.back-main-btn {
			background-color: var(--bg-sidebar);
			color: var(--text-main);
			border: 1px solid var(--border-color);
			padding: 10px 13px;
			margin-right: 10px;
			font-size: 12px;
			font-weight: bold;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			transition: border-color .2s, color .2s, transform .2s;
		}

		.back-main-btn span:first-child { color: var(--accent-color); font-size: 18px; line-height: 11px; }
		.back-main-btn:hover, .back-main-btn:focus-visible { color: var(--accent-color); border-color: var(--accent-color); transform: translateX(-2px); }

        /* Main Container */
        .container {
            display: flex;
            flex-direction: row;
            gap: 20px;
            max-width: 1800px;
            margin: 0 auto;
        }

        /* --- THE LAYOUT MAGIC HAPPENS HERE --- */
        
        /* Column A: Search & History (Takes up 30%) */
        .column-search {
            flex: 0 0 20%; /* Grow: 0, Shrink: 0, Basis: 30% */
            background-color: var(--bg-sidebar);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }

        /* Column B: Display Results (Takes up 70%) */
        .column-results {
            flex: 0 0 calc(80% - 20px); /* Adjusting for the 20px gap */
            background-color: var(--bg-results);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }

        /* UI Element Styling */
        h3 {
            margin-bottom: 15px;
        }

        .search-input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background-color: transparent;
            color: var(--text-main);
        }

       
        .history-list {
            margin-top: 20px;
            list-style: none;
        }

        .history-list li {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 14px;
        }

        /* --- Mobile Responsive Design --- */
		@media (max-width: 768px) {
			.container {
				flex-direction: column; 
			}
			
			.column-search, .column-results {
				flex: 1 1 100%;
			}
			
			/* Force table structural items to act like individual stacked blocks */
			.data-table, 
			.data-table thead, 
			.data-table tbody, 
			.data-table th, 
			.data-table td, 
			.data-table tr { 
				display: block; 
			}
			
			/* Completely hide the actual standalone visual header bar */
			.data-table thead tr { 
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
			
			/* Style each row block like a standalone product card layout */
			.data-table tr { 
				border: 1px solid var(--border-color);
				margin-bottom: 15px;
				border-radius: 6px;
				background: var(--bg-results);
				padding: 8px;
			}
			
			/* Transform cells into a split layout row */
			/* Transform cells into stacked blocks instead of a split row */
			.data-table td { 
				border: none !important;
				border-bottom: 1px dashed var(--border-color) !important; 
				position: relative;
				padding: 10px 12px !important; /* Normal padding, no heavy left padding needed */
				text-align: left !important;  /* Read left-to-right */
			}

			/* Position the header labels above the content */
			.data-table td::before {
				content: attr(data-label);
				display: block; /* Forces it to its own line */
				font-weight: bold;
				color: var(--text-muted);
				margin-bottom: 6px; /* Space between label and content */
			}

			/* Keep your interactive components stretching nicely */
			.td-content {
				display: flex;
				flex-direction: row;       
				justify-content: flex-start; /* Align content to the left under the label */
				align-items: center;       
				gap: 10px;                
				width: 100%;        
			}

			.td-content .button-group {
				flex-direction: row; /* Can keep them row-based if there is full width now */
				gap: 6px;
			}

			.button-link {
				width: auto;               
				padding: 6px 10px;         
				font-size: 12px;
			}
		}
		
		/* Card Container Layout */
		.result-card {
			background: var(--card-bg, #ffffff);
			border: 1px solid #e0e0e0;
			border-radius: 8px;
			padding: 16px;
			margin-bottom: 16px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		}

		/* Light / Dark variable assignment logic */
		[data-theme="dark"] .result-card {
			--card-bg: #2d2d2d;
			border-color: #444;
		}

		/* --- Header Layout adjustments --- */
		.card-header {
			display: flex;
			justify-content: space-between; /* Spaced left-group and badge apart */
			align-items: center;
			border-bottom: 1px solid #eee;
			padding-bottom: 12px;
			margin-bottom: 12px;
		}

		[data-theme="dark"] .card-header {
			border-color: #444;
		}

		/* Aligns the <h4> and the Button horizontally */
		.header-left-group {
			display: flex;
			align-items: center;
			gap: 12px; /* Gap between the style name and the button */
			flex-wrap: wrap; /* Prevents breaking on tight screens */
		}

		/* Removes extra margins to keep alignment pixel-perfect */
		.header-left-group h4 {
			margin: 0;
		}		

		.badge {
			background: #007bff;
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 0.8rem;
		}

		/* Tabular Metric layouts */
		.data-table {
			width: 100%;
			border-collapse: collapse;
			margin: 12px 0;
		}

		.data-table th, .data-table td {
			border: 1px solid #ddd;
			padding: 8px;
			text-align: center;
		}

		[data-theme="dark"] .data-table th, [data-theme="dark"] .data-table td {
			border-color: #555;
		}

		.dates-info {
			color: #777;
			display: block;
			margin-top: 8px;
		}
		
		/* Container styling to center the spinner nicely */
		.loading-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		/* The actual spinning circle */
		.spinner-circle {
			width: 40px;
			height: 40px;
			border: 4px solid rgba(0, 0, 0, 0.1); /* Light gray background track */
			border-top: 4px solid #3498db;        /* Blue spinning accent */
			border-radius: 50%;                    /* Makes it a circle */
			animation: spin 1s linear infinite;    /* Loops the spin animation forever */
			margin-bottom: 10px;
		}

		/* Text style for your percentage loader */
		.loading-text {
			font-family: sans-serif;
			color: #555;
			font-size: 14px;
		}

		/* The animation mechanics */
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
		
		.dates-inline {
			display: flex;
			gap: 20px; /* Adjust this value (e.g., 15px, 30px) to change the spacing */
			color: #666; /* Keeps the subtle small text look */
		}
		
		/* The Modal background (hidden by default) */
		.custom-modal {
			display: none; 
			position: fixed; 
			z-index: 9999; /* Sit on very top */
			padding-top: 60px; 
			left: 0;
			top: 0;
			width: 100%; 
			height: 100%; 
			overflow: auto; 
			background-color: rgba(0, 0, 0, 0.85); /* Dark background with opacity */
			backdrop-filter: blur(5px); /* Modern blur effect */
		}

		/* Modal Content (The Image itself) */
		.modal-content {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
			max-height: 75vh;
			object-fit: contain;
			border-radius: 6px;
			animation-name: zoomIn;
			animation-duration: 0.25s;
		}

		/* Zoom animation */
		@keyframes zoomIn {
			from { transform: scale(0.9); opacity: 0; } 
			to { transform: scale(1); opacity: 1; }
		}

		/* The Close Button */
		.modal-close {
			position: absolute;
			top: 20px;
			right: 35px;
			color: #f1f1f1;
			font-size: 40px;
			font-weight: bold;
			transition: 0.3s;
			cursor: pointer;
		}

		.modal-close:hover,
		.modal-close:focus {
			color: #ff4d4d;
			text-decoration: none;
		}

		/* Caption styling */
		#modalCaption {
			margin: auto;
			display: block;
			width: 80%;
			max-width: 700px;
			text-align: center;
			color: #ccc;
			padding: 15px 0;
		}

		/* Hover cursor pointer for the card thumbnails */
		.pointer.modal-hover-opacity {
			cursor: zoom-in;
			transition: opacity 0.2s;
		}

		.pointer.modal-hover-opacity:hover {
			opacity: 0.8;
		}
		
		/* Container for the table thumbnail image */
		.result-div.img-div {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px; /* Spacing between the image and the print button */
			min-width: 100px; /* Prevents the column from squishing too small */
		}

		/* Controls the thumbnail size inside the search results table */
		.result-div.img-div img {
			width: 160px;          /* Restricts the width */
			height: 160px;         /* Restricts the height */
			object-fit: cover;    /* Crops neatly into a square without stretching */
			border-radius: 4px;   /* Subtle rounded corners */
			border: 1px solid #ddd; /* Light border framing */
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
		}

		/* Dark theme border adjustment (if applicable) */
		[data-theme="dark"] .result-div.img-div img {
			border-color: #444;
		}

		/* Small adjustments for the print button link below the image */
		/* Style for the Print Button Link */
		/* Style for the Print Button Link - High Contrast Edition */
		/* --- Modernized Elegant Button Link --- */
		.button-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px; /* Space if you ever add an inline icon */
			
			/* Sleek semi-transparent background using your theme accent */
			background-color: rgba(0, 122, 204, 0.08); 
			color: var(--accent-color, #007acc);
			border: 1px solid rgba(0, 122, 204, 0.2);
			
			padding: 6px 14px;
			font-size: 13px;
			font-weight: 600; /* Medium-bold for premium legibility */
			text-decoration: none;
			border-radius: 6px; /* Matches modern rounding trends */
			white-space: nowrap;
			
			/* Smooth multi-property micro-interactions */
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
			transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
						color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
						border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
						box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
						transform 0.1s ease;
		}

		.button-link:hover {
			background-color: var(--accent-color, #007acc);
			border-color: var(--accent-color, #007acc);
			color: #ffffff !important; 
			text-decoration: none;
			box-shadow: 0 4px 12px rgba(0, 122, 204, 0.25);
			transform: translateY(-1px); /* Delicate upward lift */
		}

		/* Click/Active tactile feedback */
		.button-link:active {
			transform: translateY(1px) scale(0.97); /* Mimics being pressed down */
			box-shadow: 0 1px 3px rgba(0, 122, 204, 0.1);
		}

		/* --- Dark Theme Support Integration --- */
		[data-theme="dark"] .button-link {
			background-color: rgba(0, 153, 255, 0.15); /* Slightly glowing tint for dark mode */
			border-color: rgba(0, 153, 255, 0.25);
			color: #0099ff; 
		}

		[data-theme="dark"] .button-link:hover {
			background-color: #0088e0;
			border-color: #0088e0;
			color: #ffffff !important;
			box-shadow: 0 4px 14px rgba(0, 136, 224, 0.4);
		}
		
		/* Container holding the variations */
		.modal-thumbnails-container {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin: 15px auto;
			width: 80%;
			max-width: 700px;
			overflow-x: auto; /* Adds swipe scrolling if there are many colors */
			padding: 10px 0;
		}

		/* Individual mini preview thumbnail styling */
		.modal-thumb {
			width: 60px;
			height: 60px;
			object-fit: cover;
			border-radius: 4px;
			cursor: pointer;
			border: 2px solid transparent;
			transition: all 0.2s ease;
			opacity: 0.6;
		}

		.modal-thumb:hover {
			opacity: 1;
			transform: scale(1.05);
		}

		/* Visual wrapper highlight for the image currently chosen in the viewport */
		.modal-thumb.active {
			border-color: #0066cc;
			opacity: 1;
			box-shadow: 0 0 8px rgba(0, 102, 204, 0.5);
		}
		
		/* Container for the button */
		.toggle-btn-container {
			margin: 0; /* Clear previous margins */
			display: inline-block;
			margin-right: 8px; /* Gap between the two buttons */
			margin-bottom: 10px;
		}

		/* --- Friendly & Modern Toggle Button Styling --- */
		.toggle-details-btn {
			background-color: transparent;
			color: var(--accent-color, #007acc);
			border: 1px solid var(--accent-color, #007acc);
			padding: 6px 14px;
			font-size: 13px;
			font-weight: 500;
			border-radius: 6px;
			cursor: pointer;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			
			/* Smooth transition for active/hover feedback states */
			transition: all 0.2s ease-in-out;
		}

		/* Hover State */
		.toggle-details-btn:hover {
			background-color: var(--accent-color, #007acc);
			color: #ffffff;
			box-shadow: 0 4px 6px rgba(0, 122, 204, 0.15);
		}

		/* Active State (When Details are shown/open) */
		.toggle-details-btn.active {
			background-color: #28a745; /* Clean eco-green to signify an 'Open' status */
			border-color: #28a745;
			color: #fff;
		}

		/* Subtle click response shrink */
		.toggle-details-btn:active {
			transform: scale(0.97);
		}

		/* The Panel visibility control */
		.hide-show-panel {
			margin-top: 10px;
			padding: 10px;
			background-color: #fbfbfb;
			border-radius: 4px;
			border-left: 3px solid #007bff;
			display: block; /* Default block state */
		}

		/* Hidden class state */
		.hide-show-panel.collapsed {
			display: none; /* Hides content gracefully */
		}
		
		/* Style for the layout toggle button */
		.toggle-sidebar-btn {
			background-color: var(--accent-color);
			color: white;
			border: none;
			padding: 10px 20px;
			font-size: 14px;
			font-weight: bold;
			border-radius: 20px;
			cursor: pointer;
			margin-right: 10px; /* Space between buttons */
		}

		/* Ensure column transitions are smooth */
		.column-search, .column-results {
			transition: flex 0.3s ease, padding 0.3s ease, opacity 0.2s ease, border-color 0.3s ease, background-color 0.3s ease;
		}

		/* When the search column is collapsed */
		.column-search.collapsed {
			flex: 0 0 0%;
			padding: 0;
			margin: 0;
			opacity: 0;
			border: none;
			pointer-events: none; /* Disables clicking anything hidden */
			overflow: hidden;    /* Keeps text from spilling out while shrinking */
		}

		/* Let the results column stretch out to fill 100% when its sibling is collapsed */
		.column-search.collapsed + .column-results {
			flex: 0 0 99%;
		}
		
		/* Hide everything inside the sidebar except the <h3> when collapsed */
		.column-search.collapsed h3,
		.column-search.collapsed .history-list {
			display: none;
		}

		/* Optional: Style adjustments for the search elements when they sit in the header */
		.header .search-input {
			margin-right: 8px;
			padding: 6px 12px;
			width: 300px; /* Adjust width to fit your layout */
			margin-bottom: 0px;
		}
		
		.header .action-btn {
			margin-right: 8px;
			padding: 6px 12px;
			width: 80px; /* Adjust width to fit your layout */
		}

				
		.action-btn {
		width: 100%;
		padding: 10px 18px;
		background-color: var(--accent-color, #007acc);
		color: #ffffff;
		border: none;
		border-radius: 6px; /* Slightly softer, modern rounding */
		font-size: 14px;
		font-weight: 600; /* Medium-bold for premium legibility */
		letter-spacing: 0.5px; /* Clean spacing */
		cursor: pointer;
		box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2); /* Soft depth glow */
		
		/* Smooth transitions for all visual changes */
		transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
		}

		/* Hover State - darkens slightly and elevates to indicate clickability */
		.action-btn:hover {
			background-color: #0062a3; /* A slightly deeper, rich confirmation hue */
			box-shadow: 0 4px 8px rgba(0, 122, 204, 0.3);
		}

		/* Active State - tactile "pressed down" feedback when clicked */
		.action-btn:active {
			transform: scale(0.98); /* Physically registers the click/confirmation */
			box-shadow: 0 1px 2px rgba(0, 122, 204, 0.1);
		}

		/* Focus State - accessibility ring for keyboard users */
		.action-btn:focus-visible {
			outline: 2px solid #ffffff;
			outline-offset: 2px;
			box-shadow: 0 0 0 4px var(--accent-color, #007acc);
		}

		/* Optional Dark Theme Tune-up if your accent color needs higher contrast */
		[data-theme="dark"] .action-btn {
			background-color: #0088e0;
			box-shadow: 0 2px 8px rgba(0, 136, 224, 0.3);
		}
		[data-theme="dark"] .action-btn:hover {
			background-color: #0099ff;
		}
		
		/* Container for the ACCODE tags */
		.accode-tags-container {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-bottom: 12px;
		}

		/* Individual attribute badge style */
		.attr-badge {
			background-color: #f1f3f5;
			color: #495057;
			font-size: 0.75rem;
			padding: 4px 8px;
			border-radius: 4px;
			border: 1px solid #dee2e6;
			font-weight: 500;
		}

		/* A clean divider line to separate tags from description text */
		.panel-divider {
			border: 0;
			border-top: 1px solid #eee;
			margin: 10px 0;
		}
		
		/* ==========================================
		   Panel Visibility & Styling (With Dark Theme)
		   ========================================== */
		.hide-show-panel {
			margin-top: 10px;
			padding: 12px;
			background-color: #fbfbfb; /* Light theme background */
			border-radius: 4px;
			border-left: 3px solid var(--accent-color, #007bff);
			display: block;
		}

		/* Hidden class state */
		.hide-show-panel.collapsed {
			display: none;
		}

		/* Dark mode panel overrides */
		[data-theme="dark"] .hide-show-panel {
			background-color: #252525; /* Sleek contrast against the #1e1e1e card body */
			border-left-color: var(--accent-color, #0088e0);
		}

		/* Panel divider adjustments */
		.panel-divider {
			border: 0;
			border-top: 1px solid #eee;
			margin: 12px 0;
		}

		[data-theme="dark"] .panel-divider {
			border-top-color: var(--border-color, #444);
		}

		/* Text elements inside the panel */
		.dates-inline {
			display: flex;
			flex-wrap: wrap; /* Prevents text overflow on small viewports */
			gap: 20px;
			color: var(--text-muted, #666);
		}


		/* ==========================================
		   ACCODE Labeled Split-Badges (With Dark Theme)
		   ========================================== */
		.accode-tags-container {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 12px;
		}

		/* Outer wrapper tag boundary */
		.attr-badge {
			display: inline-flex;
			align-items: center;
			font-size: 0.75rem;
			border-radius: 4px;
			overflow: hidden;
			border: 1px solid #ced4da;
			background: transparent;
			padding: 0; /* Zero out padding so sub-spans flush to the borders */
		}

		[data-theme="dark"] .attr-badge {
			border-color: var(--border-color, #555);
		}

		/* Left side pill block: Key / Label name */
		.badge-label {
			background-color: #6c757d;
			color: #ffffff;
			padding: 3px 8px;
			font-weight: bold;
		}

		[data-theme="dark"] .badge-label {
			background-color: #495057; /* Slightly darker slate gray for dark layout harmony */
			color: #e0e0e0;
		}

		/* Right side pill block: Value variable string */
		.badge-value {
			background-color: #f8f9fa;
			color: #212529;
			padding: 3px 8px;
			font-weight: 500;
		}

		[data-theme="dark"] .badge-value {
			background-color: #333333;
			color: var(--text-main, #f0f0f0);
		}
		
		.table-responsive {
			width: 100%;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS devices */
			margin-bottom: 15px;
		}
		
		/* ==========================================================================
   Desktop View: STACKED (Button is underneath/next row)
   ========================================================================== */
.td-content {
    display: flex;
    flex-direction: column;    /* Forces the button UNDERNEATH the text */
    align-items: center;       /* Centers them horizontally */
    justify-content: center;
    gap: 8px;                  /* Spacing between text and button */
}

/* For the last column with multiple buttons */
.td-content .button-group {
    display: flex;
    flex-direction: column;    /* Stacks multiple buttons vertically on desktop */
    gap: 6px;
    width: 100%;
}

		/* ==========================================================================
		   Mobile View (768px and below): SIDE-BY-SIDE (Same Row)
		   ========================================================================== */
		@media (max-width: 768px) {
			.td-content {
				flex-direction: row;       /* Forces text and button onto the SAME ROW */
				justify-content: center;   /* Keeps them centered inside the cell */
				align-items: center;       /* Aligns them vertically center */
				gap: 10px;                 /* Spacing between text and button on mobile */
				width: max-content;        /* Prevents layout squeezing if cell is too tight */
				margin: 0 auto;
			}

			.td-content .button-group {
				flex-direction: row;       /* Puts multiple buttons side-by-side on mobile */
				gap: 6px;
				width: auto;
			}

			.button-link {
				width: auto;               /* Keeps buttons from stretching abnormally */
				padding: 4px 10px;         /* Slightly tighter padding for mobile row fitting */
				font-size: 12px;
			}
			/* 隱藏標頭 (thead) 的第 3, 4, 5, 6 個 th */
			.data-table thead th:nth-child(3),
			.data-table thead th:nth-child(4),
			.data-table thead th:nth-child(5),
			.data-table thead th:nth-child(6) {
				display: none !important;
			}

			/* 隱藏內容 (tbody) 的第 3, 4, 5, 6 個 td */
			.data-table tbody td:nth-child(3),
			.data-table tbody td:nth-child(4),
			.data-table tbody td:nth-child(5),
			.data-table tbody td:nth-child(6) {
				display: none !important;
			}
		}
		
		/* Force all table headers and cells to align text and elements in the center */
		#searchResultsContainer .data-table th,
		#searchResultsContainer .data-table td {
			text-align: center !important;
			vertical-align: middle;
		}

		/* Fix wrapper divs inside cells so their internal layouts also stay centered */
		#searchResultsContainer .td-content,
		#searchResultsContainer .button-group {
			display: flex;
			
			align-items: center;    /* Centers items horizontally in a flex container */
			justify-content: center;
			text-align: center;
			width: 100%;
		}
		
		/* --- Elegant & Modern Price Toggle Button Styling --- */
		.toggle-price-btn {
			background-color: transparent;
			color: #2e7d32; /* Rich elegant green text */
			border: 1px solid #2e7d32; /* Elegant green border */
			padding: 6px 14px;
			font-size: 13px;
			font-weight: 500;
			border-radius: 6px;
			cursor: pointer;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
			
			/* Smooth transition for active/hover feedback states */
			transition: all 0.2s ease-in-out;
		}

		/* Hover State - Fills nicely with a minty green tint */
		.toggle-price-btn:hover {
			background-color: rgba(46, 125, 50, 0.08);
			box-shadow: 0 4px 6px rgba(46, 125, 50, 0.15);
		}

		/* Active State (When the price analysis panel is visible) */
		.toggle-price-btn.active {
			background-color: #2e7d32; /* solid green background */
			border-color: #2e7d32;
			color: #ffffff;
		}

		/* Subtle click response shrink */
		.toggle-price-btn:active {
			transform: scale(0.97);
		}

		/* --- Dark Theme Support Integration for Price Button --- */
		[data-theme="dark"] .toggle-price-btn {
			color: #81c784; /* Brighter, high-contrast light green for dark backgrounds */
			border-color: #81c784;
		}

		[data-theme="dark"] .toggle-price-btn:hover {
			background-color: rgba(129, 199, 132, 0.15);
		}

		[data-theme="dark"] .toggle-price-btn.active {
			background-color: #388e3c;
			border-color: #388e3c;
			color: #ffffff;
		}
		
		/* The Modal Backdrop (Dark transparent background overlaying the whole screen) */
		#priceModal.modal {
			display: none; 
			position: fixed; 
			z-index: 2000; /* Ensures it sits over the sidebar, headers, and lazy images */
			left: 0;
			top: 0;
			width: 100%; 
			height: 100%; 
			overflow: auto; /* Enables scroll if the browser viewport is too short */
			background-color: rgba(0, 0, 0, 0.6); /* Dim background effect */
			backdrop-filter: blur(4px); /* Modern touch: blurs the background content slightly */
			padding-top: 40px;
			padding-bottom: 40px;
		}

		/* The actual white box holding the data */
		.price-modal-content {
			background-color: #ffffff;
			margin: 30px auto;
			padding: 25px;
			border-radius: 12px;
			width: 85%;
			max-width: 950px;
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
			position: relative;
			animation: zoomInModal 0.25s ease-out;

			/* --- Add these two lines to limit height and allow scrolling --- */
			max-height: 85vh; 
			overflow-y: auto;
		}

		/* Close ('X') button layout override */
		.id-price-close {
			position: absolute;
			right: 20px;
			top: 15px;
			font-size: 32px;
			font-weight: bold;
			color: #888;
			cursor: pointer;
			transition: color 0.2s ease;
		}

		.id-price-close:hover {
			color: #ff4d4d; /* Changes red on hover so user intuitively knows it's a close button */
		}

		/* Section dividers inside the modal content box */
		.price-modal-content hr {
			border: 0;
			height: 1px;
			background-color: #eee;
			margin: 20px 0;
		}

		/* Header tuning */
		#priceModalTitle {
			margin-top: 0;
			padding-right: 40px; /* Prevents long style titles from crashing into the X button */
			color: #333;
		}

		/* --- Dark Mode support overrides --- */
		html[data-theme="dark"] .price-modal-content {
			background-color: #1e1e24; /* Seamless matching dark background colors */
			color: #e0e0e0;
		}

		html[data-theme="dark"] #priceModalTitle,
		html[data-theme="dark"] .price-modal-content h4 {
			color: #ffffff;
		}

		html[data-theme="dark"] .price-modal-content hr {
			background-color: #333;
		}

		/* Subtle open animation definition */
		@keyframes zoomInModal {
			from { transform: scale(0.92); opacity: 0; }
			to { transform: scale(1); opacity: 1; }
		}