<style type="text/css">
		/* --- 1. [2026.03.20 重新定義] 介面縮放基準 --- */
		:root {
			/* 將原本的 1.25rem 定義為現在的 100% 基準 */
			--app-text-size: 1.25rem;
			--cell-px: 0.6rem;
		}

		/* 放大 125% (基於新 100% 換算) */
		body.ui-scale-125 {
			--app-text-size: 1.56rem;
			--cell-px: 0.75rem;
		}

		/* 放大 150% (基於新 100% 換算) */
		body.ui-scale-150 {
			--app-text-size: 1.88rem;
			--cell-px: 0.9rem;
		}

		/* 放大 200% (基於新 100% 換算) */
		body.ui-scale-200 {
			--app-text-size: 2.50rem;
			--cell-px: 1.2rem;
		}

		/* 標題文字維持固定大小 */
		.main-title-text {
			font-size: 1.875rem !important;
			line-height: 2.25rem !important;
		}

		/* 全域文字與元件統一縮放 */
		body *,
		nav a,
		select,
		input,
		button,
		th,
		td,
		span,
		label,
		h2 {
			font-size: var(--app-text-size) !important;
			font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
		}

		/* --- 2. 基礎 UI 樣式 (滾動條與選取效果) --- */
		::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		::-webkit-scrollbar-track {
			background: #0f172a;
		}

		::-webkit-scrollbar-thumb {
			background: #475569;
			border-radius: 10px;
		}

		.selected {
			background-color: #3b82f6 !important;
			color: #ffffff !important;
			box-shadow: 0 0 15px rgba(59, 130, 246, 0.8) !important;
			outline: 3px solid #60a5fa !important;
		}

		#shannon-strategy td.selected,
		#shannon-strategy td.selected:first-child,
		#shannon-strategy td.selected:last-child {
			background-color: #3b82f6 !important;
			z-index: 21;
			/* 確保選取時層級略高於一般凍結欄位 */
		}

		/* --- 3. 表格通用與對齊樣式 --- */
		table {
			width: 100%;
			border-collapse: collapse;
			background: transparent;
		}

		/* 讓網格與夏農表格同時繼承置中、寬度與自動換行限制 */
		#strategy th,
		#strategy td,
		#shannon-parameters th,
		#shannon-parameters td,
		#shannon-strategy th,
		#shannon-strategy td {
			text-align: center !important;
			white-space: nowrap !important;
			vertical-align: middle !important;
			min-width: 80px;
			padding-left: var(--cell-px) !important;
			padding-right: var(--cell-px) !important;
		}

		/* 專門放大執行矩陣與參數表的列間距 */
		#shannon-strategy td,
		#shannon-parameters td {
			padding-top: 0.3rem !important;
			padding-bottom: 0.3rem !important;
		}

		th {
			@apply bg-slate-800 text-slate-100 font-black py-4 uppercase border-b-2 border-slate-600;
		}

		/* [金沙黃配色] 將可編輯參數的標題文字顏色統一 */
		#shannon-parameters th,
		#shannon-strategy th[data-field="ma_short"],
		#shannon-strategy th[data-field="ma_long"],
		#shannon-strategy th[data-field="exLever"],
		#shannon-strategy th[data-field="shannon_weight"] {
			color: #FDE68A !important;
		}

		td {
			@apply py-4 border-b border-slate-800/80 text-slate-200 font-mono font-black;
		}

		/* ============================================================
   [最終修正版] 夏農參數輸入框狀態系統
   ============================================================ */

		/* 1. [初始狀態] 基礎樣式：定義顏色、字體與平滑動畫 */
		td[contenteditable="true"] {
			color: #FDE68A !important;
			background-color: rgba(253, 230, 138, 0.05) !important;
			border-radius: 4px;
			font-weight: bold !important;
			position: relative;
			z-index: 5;
			border: none !important;
			/* 初始無實體邊框 */
			box-shadow: none !important;
			/* 初始無陰影 */
			transition: all 0.2s ease;
			/* 狀態切換平滑化 */
			outline: none !important;
			/* 徹底移除瀏覽器預設黑框 */
		}

		/* 2. [尚未儲存狀態] (褐色草稿)
   解決問題：使用 inset box-shadow 確保四邊粗細 100% 一致 */
		td.is-dirty {
			background-color: #4b3f1d !important;
			color: #fbbf24 !important;
			/* 四邊均勻向內縮 2px 的金黃色邊框感 */
			box-shadow: inset 0 0 0 2px #f59e0b !important;
			z-index: 10;
		}

		/* 3. [正在編輯狀態] (藍色Focus)
   解決問題：純藍色覆蓋褐色，避免顏色混合。必須寫在 is-dirty 之後。 */
		td[contenteditable="true"]:focus,
		td[contenteditable="true"]:hover {
			background-color: #3b82f6 !important;
			/* 強制覆蓋褐色的純藍 */
			color: #ffffff !important;
			/* 編輯時文字變白 */
			/* 藍色內邊框與外發光效果 */
			box-shadow: inset 0 0 0 2px #60a5fa, 0 0 10px rgba(59, 130, 246, 0.5) !important;
			z-index: 11;
			border: none !important;
		}

		/* 針對輸入框（Checkbox 等）的 Focus 保護 */
		td[contenteditable="true"]:focus input {
			outline: none !important;
		}

		/* 針對特定欄位進行寬度修正以防止歪掉 */
		th[data-field="shannon_ratio"],
		#shannon-strategy td:nth-child(11) {
			min-width: 100px !important;
		}

		/* --- 4. 輸入框與控制項樣式 --- */
		input[type='password'],
		input[type='text'],
		select {
			background-color: #020617 !important;
			color: #ffffff !important;
			border: 2px solid #475569 !important;
			border-radius: 6px !important;
			padding: 6px 10px !important;
			font-weight: 900 !important;
		}

		/* Checkbox 大尺寸優化 */
		input[type="checkbox"] {
			width: 1.8rem !important;
			height: 1.8rem !important;
			cursor: pointer;
			accent-color: #3b82f6;
			transition: transform 0.2s ease;
		}

		input[type="checkbox"]:hover {
			transform: scale(1.1);
		}

		/* --- 5. 夏農比例進度條樣式 --- */
		.shannon-bar-container {
			@apply flex items-center justify-center w-full px-2;
		}

		/* --- 6. 系統監控與狀態燈號 --- */
		#system-monitor {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #1e1e1e;
			color: #ffffff;
			padding: 8px 15px;
			font-size: 14px;
			border-bottom: 2px solid #333;
		}

		.status-item {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.led-dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			display: inline-block;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
		}

		.led-gray {
			background-color: #888;
		}

		.led-green {
			background-color: #00ff00;
			box-shadow: 0 0 8px #00ff00;
		}

		.led-red {
			background-color: #ff0000;
			box-shadow: 0 0 8px #ff0000;
		}

		.led-blue {
			background-color: #00bfff;
			box-shadow: 0 0 8px #00bfff;
			animation: blink 1s infinite;
		}

		.led-orange {
			background-color: #ffa500;
			box-shadow: 0 0 8px #ffa500;
		}

		@keyframes blink {
			0% {
				opacity: 1;
			}

			50% {
				opacity: 0.4;
			}

			100% {
				opacity: 1;
			}
		}

		/* --- 7. 保留舊網格趨勢顏色相容性 --- */
		#strategy tbody tr[style*="background-color: rgb(255, 204, 204)"],
		#strategy tbody tr[style*="background-color: #ffcccc"] {
			background-color: #450a0a !important;
			color: #fecaca !important;
		}

		#strategy tbody tr[style*="background-color: rgb(198, 246, 213)"],
		#strategy tbody tr[style*="background-color: #c6f6d5"] {
			background-color: #064e3b !important;
			color: #d1fae5 !important;
		}

		#strategy tbody tr:hover,
		#shannon-strategy tbody tr:hover,
		#market tbody tr:hover {
			background-color: rgba(59, 130, 246, 0.2) !important;
			/* 淺藍色背景 */
			transition: background-color 0.2s ease;
			cursor: pointer;
		}



		#customAlert[style*="display: block"],
		#customAlert[style*="display: flex"] {
			display: flex !important;
		}

		/* --- 凍結窗格核心樣式 --- */
		.table-container {
			overflow-x: auto;
			/* 允許橫向捲動 */
			position: relative;
		}

		/* 固定首欄 (商品名稱) */
		#shannon-strategy th:first-child,
		#shannon-strategy td:first-child {
			position: sticky;
			left: 0;
			z-index: 20;
			background-color: #0f172a !important;
			/* 必須與背景色一致，避免透視 */
			box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
			/* 增加右側陰影感 */
		}

		/* 固定末欄 (操作按鈕) */
		#shannon-strategy th:last-child,
		#shannon-strategy td:last-child {
			position: sticky;
			right: 0;
			z-index: 20;
			background-color: #0f172a !important;
			box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
			/* 增加左側陰影感 */
		}

		/* 確保表格不會被強制壓縮，而是根據內容撐開 */
		#shannon-strategy {
			width: max-content !important;
			min-width: 100%;
		}

		#market td {
			padding-top: 0.75rem !important;
			padding-bottom: 0.75rem !important;
			border-bottom: 1px solid rgba(51, 65, 85, 0.2);
		}

		#market tr:last-child td {
			border-bottom: none;
		}

		/* 讓數值列在滑鼠移入時微微發光 */
		#market tr:hover td {
			color: #ffffff !important;
		}

		/* --- iOS 風格切換開關 --- */
		.switch {
			position: relative;
			display: inline-block;
			width: 40px;
			height: 22px;
		}

		.switch input {
			opacity: 0;
			width: 0;
			height: 0;
		}

		.slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #334155;
			transition: .4s;
			border-radius: 34px;
		}

		.slider:before {
			position: absolute;
			content: "";
			height: 16px;
			width: 16px;
			left: 3px;
			bottom: 3px;
			background-color: white;
			transition: .4s;
			border-radius: 50%;
		}

		input:checked+.slider {
			background-color: #3b82f6;
		}

		input:checked+.slider:before {
			transform: translateX(18px);
		}

		/* 讓標題與開關對齊 */
		.log-header-wrap {
			display: flex;
			align-items: center;
			gap: 12px;
		}

		#big-tooltip {
			display: none;
			position: fixed;
			/* 改為固定定位，配合視窗座標計算 */
			background: rgba(15, 23, 42, 0.98);
			/* 稍微加深背景 */
			backdrop-filter: blur(12px);
			color: #f8fafc;
			padding: 20px;
			/* 增加間距 */
			border-radius: 12px;
			font-size: 14px;
			/* 字體稍微放大一點點 */
			z-index: 99999;
			width: 450px;
			/* 固定寬度，避免變成長條狀 */
			max-height: 85vh;
			/* 【關鍵】限制最高不超過螢幕的 85% */
			overflow-y: auto;
			/* 【關鍵】內容過多時顯示捲動條 */
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
			border: 2px solid #3b82f6;
			/* 藍色外框 */
			pointer-events: auto;
			/* 【關鍵】允許滑鼠進入以使用捲動條 */
			line-height: 1.7;
			scrollbar-width: thin;
			/* 捲動條外觀 (Firefox) */
			scrollbar-color: #3b82f6 transparent;
		}

		/* Chrome/Edge 捲動條優化 */
		#big-tooltip::-webkit-scrollbar {
			width: 6px;
		}

		#big-tooltip::-webkit-scrollbar-thumb {
			background: #3b82f6;
			border-radius: 10px;
		}
	</style>