@charset "utf-8";
/* CSS Document */
body {
	background-color: #121212;
	color: #e0e0e0;
	font-family: "Microsoft JhengHei", sans-serif;
}
/* 專業名詞：Scrollbar_Component_Styling */

/* 1. 整個捲軸寬度 */
::-webkit-scrollbar {
  width: 4px;  /* 讓捲軸變細，提升高級感 */
  height: 4px; /* 橫向捲軸高度 */
}

/* 2. 捲軸軌道 (Track) */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0); /* 半透明背景 */
  border-radius: 10px;
}

/* 3. 捲軸滑塊 (Thumb) - 使用者拖曳的部分 */
::-webkit-scrollbar-thumb {
  background: #333; /* 使用 Bootstrap info 色系，對應您的 AI 控制台 */
  border-radius: 10px;
  transition: background 0.3s ease;
}

/* 4. 滑鼠懸停時的滑塊效果 (Hover_State) */
::-webkit-scrollbar-thumb:hover {
  background: #1e1e1e; /* 深一點的科技藍 */
}


.category-grid-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4行2列，剛好8個 */
    gap: 10px;
    background: #1e1e1e; /* 深色背景 */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
}

.cat-item {
    background: #2a2a2a;
    color: #aaa;
    border: 1px solid #444;
    padding: 12px 0;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
}

.cat-item:hover {
    background: #b01f24; /* 點擊或懸停時呈現您的經典紅 */
    color: #fff;
    border-color: #ff4d4d;
}
/* 🚩 珍珠引擎：CSS 黏性與自適應補丁 */
.sticky-sidebar {
    position: -webkit-sticky; /* 相容 Safari */
    position: sticky;
    top: 20px; /* 💡 距離頂部留一點白，比較專業 */
    z-index: 100;
}

@media (max-width: 991.98px) {
    /* 手機版 (R11) 取消黏性，讓它自然滑過去 */
    .sticky-sidebar {
        position: static; 
        margin-bottom: 20px;
    }
}
.card {
	background: #1e1e1e;
	color: #fff;
	border: 1px solid #333;
}
.character-pool {
	background: #252525;
	border-radius: 8px;
	padding: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.pool-item {
	background: #3d3d3d;
	padding: 5px 12px;
	border-radius: 20px;
	cursor: grab;
	font-size: 0.85rem;
	border: 1px solid #555;
	transition: 0.2s;
}
.pool-item:hover {
	background: #505050;
	border-color: #f1c40f;
}
.stage-area {
	min-height: 80px;
	background: #181818;
	border: 2px dashed #444;
	border-radius: 12px;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: center;
}
.stage-area.ui-droppable-hover {
	border-color: #f1c40f;
	background: #222;
}
.actor-tag {
	display: inline-flex;
	align-items: center;
	background: #2c3e50;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid #34495e;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.btn-remove {
	margin-left: 8px;
	background: #c0392b;
	color: white !important;
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	cursor: pointer;
}
#scenes-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding-bottom: 20px;
}
.card-scene {
	background: #1e1e1e;
	border: 1px solid #333;
	border-radius: 12px;
	transition: 0.2s;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.card-scene:hover {
	border-color: #f1c40f;
	transform: translateY(-3px);
}
.prompt-box {
	background: #000;
	color: #00ff41;
	padding: 10px;
	border-radius: 8px;
	font-family: 'Courier New', monospace;
	font-size: 0.75rem;
	border: 1px solid #444;
	margin-top: auto;
	word-break: break-all;
	min-height: 60px;
}
.scenes-box {
	background: #000;
	color: #00ff41;
	padding: 10px;
	border-radius: 8px;
	font-family: 'Courier New', monospace;
	font-size: 0.75rem;
	border: 1px solid #444;
	margin-top: auto;
	word-break: break-all;
	min-height: 60px;
}
.nail-task {
	border: 2px solid #ff4757 !important;
	box-shadow: 0 0 10px rgba(255, 71, 87, 0.2);
}
textarea.form-control:focus {
	background-color: #1e1f22 !important;
	color: #ffffff !important;
	border-color: #ff4757 !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 71, 87, 0.25);
}
.text-muted {
	color: #FFF !important;
}
/* 縮小卡片整體比例 */
		/* 1. 讓卡片排得更密：每列改排 4 個或讓間隔變極小 */
#scenes-detail-display .row, #result-area .row {
 --bs-gutter-x: 0.5rem !important; /* 縮小卡片左右間距 */
}
/* 2. 盒子縮骨功：縮減卡片內部的肥肉 */
#scenes-detail-display .card-body, #result-area .card-body {
	padding: 0.5rem !important; /* 大幅縮小留白，讓內容頂到邊框 */
}
/* 3. 文字恢復正常大小，但行高縮緊 */
#scenes-detail-display p, #result-area p {
	font-size: 0.9rem !important; /* 恢復到眼睛舒服的大小 */
	line-height: 1.3 !important;
	margin-bottom: 0.5rem !important;
}
/* 4. 英文劇情框：改為更緊湊的區塊 */
#scenes-detail-display .mb-3.p-2.rounded {
	margin-bottom: 0.4rem !important;
	padding: 0.4rem !important;
}
/* 5. 提示詞代碼區：縮小上下邊距 */
#scenes-detail-display code, #result-area code {
	padding: 2px 4px !important;
	display: block; /* 讓它像個小條狀 */
}
/* 6. 底部按鈕區縮小 */
#scenes-detail-display .card-footer, #scenes-detail-display .btn-sm {
	padding: 2px !important;
	font-size: 0.7rem !important;
}
/* 簡單暴力的高級感樣式 */
.industry-results-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #222; /* 深色底符合您的 V3 黑區塊 */
	border: 1px solid #444;
	z-index: 999;
	max-height: 250px;
	overflow-y: auto;
	border-radius: 0 0 8px 8px;
}
.industry-item {
	padding: 12px 15px;
	cursor: pointer;
	border-bottom: 1px solid #333;
	color: #eee;
}
.industry-item:hover {
	background: #cf152d; /* 您紅指甲的企業色 */
}
.badge-micro {
	font-size: 0.6rem !important;    /* 這是肉眼辨識的底線，再小就變螞蟻了 */
	padding: 2px 6px !important;    /* 縮減內距 */
	font-weight: 500;               /* 字體稍微加粗，增加辨識度 */
	letter-spacing: 0.5px;          /* 增加字距，防止黏在一起 */
	line-height: 1;
	display: inline-flex;
	align-items: center;
	border-radius: 4px;             /* 呼應您的方圓美學 */
}
.seed-pearl {
	font-size: 0.6rem !important;      /* 縮小字體 */
	padding: 2px 8px !important;      /* 縮減內距 */
	border-radius: 4px !important;    /* 方圓美學 */
	margin: 2px !important;           /* 珍珠間的間隙 */
	font-weight: 500;
	letter-spacing: 0.5px;
	display: inline-flex;
	align-items: center;
}
/* 讓圖示 (Icon) 也縮小 */
.seed-pearl img, .seed-pearl i {
	width: 10px !important;
	height: 10px !important;
	margin-right: 4px;
}
/* 強制縮小所有從資料庫噴出來的池子卡片 */
.pool-card {
	/* 極致縮小內距與間距 */
    padding: 6px 6px !important;
	gap: 1px !important;
	margin: 1px !important;
	/* 統一方圓美學 */
    border-radius: 4px !important;
	border: 1px solid #444 !important;
	/* 強制字體與圖示珍珠化 */
    font-size: 0.7rem !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
}
/* 確保裡面的 Emoji 和文字也同步縮小 */
.pool-card .emoji, .pool-card .cn, .pool-card span {
	font-size: 0.7rem !important;
}
/* 針對池子裡所有帶 data-val 的動態標籤實施「珍珠化」 */
div[data-val] {
	/* 強制微縮尺寸 */
    font-size: 0.6rem !important;
	padding: 2px 6px !important;
	margin: 2px !important;
	/* 修正方圓美學：把原本太圓的 20px 改成精緻的 4px */
    border-radius: 4px !important;
	/* 佈局校準 */
    display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
}

/* 讓裡面的叉叉 (✕) 或圖示也跟著縮小 */
div[data-val]::after, div[data-val] span {
 font-size: 0.55rem !important;
 margin-left: 4px !important;
}
/* 微型製造機面板 */
.pearl-editor-popup {
	position: absolute;
	z-index: 1000;
	background: #1e1e1e;
	border: 1px solid #ff4757; /* 方圓紅邊框 */
	border-radius: 6px;
	padding: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
	display: none; /* 預設隱藏 */
	width: 160px;
}
.pearl-editor-popup input {
	background: #000;
	border: 1px solid #444;
	color: #fff;
	font-size: 0.65rem;
	padding: 3px 5px;
	border-radius: 3px;
	outline: none;
}
.quick-icon {
	cursor: pointer;
	font-size: 1.1rem;
	text-align: center;
	transition: 0.2s;
	padding: 4px;
	border-radius: 4px;
}
.quick-icon:hover {
	background: #333;
	transform: scale(1.2);
}

/* 1. 外層容器：切換為 8 欄線性佈局 */
#industry-premium-zone {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important; 
    gap: 4px; /* 縮小間距，為 8 欄騰出呼吸空間 */
    margin-bottom: 12px;
}

/* 2. 按鈕基礎樣式：微調高度適配橫排 */
.premium-btn {
    cursor: pointer;
    background: rgb(26, 26, 26);
    border: 1px solid rgb(51, 51, 51);
    border-radius: 4px;
    padding: 4px 1px; /* 再次縮減內距，避免文字溢出 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    height: 48px; /* 稍微拉高，讓垂直視覺更平衡 */
}

/* 3. 選定後的固定狀態：底色定錨 */
.premium-btn.active {
    background: rgb(45, 45, 45) !important;       /* 明確的選中灰 */
    border: 1px solid rgb(255, 71, 87) !important; /* 招牌方圓紅 */
    box-shadow: 0 0 5px rgba(255, 71, 87, 0.2);     /* 微弱光暈 */
}

/* 4. 文字細節：確保 8 欄下不折行 */
.btn-name-cn {
    color: #eee;
    font-size: 1rem; /* 稍微縮小字體 */
    font-weight: bold;
    transform: scale(0.9); /* 微調縮放，維持精緻感 */
    white-space: nowrap;
}
/* 🏆 強制接管 form-control 樣式 */
#industrySearch.form-control {
    display: inline-block !important; /* 讓它不再強佔整行 */
    width: 100% !important;          /* 填滿左側 50% 容器 */
    max-width: none !important;      /* 移除限制 */
    
    /* 💎 纖細矮化 */
    height: 50px !important; 
    padding: 2px 10px !important;
    font-size: 0.8rem !important;
    
    /* 💎 方圓深邃黑 */
    background: rgb(15, 15, 15) !important;
    border: 1px solid rgb(51, 51, 51) !important;
    border-radius: 4px !important;
    color: #eee !important;
    box-shadow: none !important;    /* 拔掉系統藍光 */
    transition: all 0.2s ease;
}

/* 核心：獲取焦點時的方圓紅 */
#industrySearch.form-control:focus {
    border-color: rgb(255, 71, 87) !important;
    background: rgb(20, 20, 20) !important;
    box-shadow: 0 0 6px rgba(255, 71, 87, 0.15) !important;
    outline: 0;
}
/* 🏆 雙區容器：控制左右對位 */
.search-flex-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 6px 0 12px 0;
    padding: 0 0px;
}

.search-left-zone {
    flex: 0 0 50%;           /* 💎 職人定錨：紮實的 50% 空間 */
    display: flex;
    justify-content: flex-start;
}

/* 🏆 industrySearch：半版長度與職人矮化 */
#industrySearch {
    width: 95% !important;    /* 💎 撐滿左區 50% 的九五成，視覺最飽滿 */
    min-width: 220px;         /* 💎 寬度上限適度放寬，不再感覺「太短」 */
    
    background: rgb(15, 15, 15);
    border: 1px solid rgb(51, 51, 51);
    border-radius: 4px;       /* 方圓美學：經典微圓角 */
    
    padding: 5px 12px !important; 
    height: 30px !important;     /* 💎 高度稍微回升到 30px，操作感更紮實 */
    
    color: #eee;
    font-size: 0.8rem;
    text-align: left;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 點擊時的方圓紅定錨 */
#industrySearch:focus {
    border-color: rgb(255, 71, 87) !important;
    background: rgb(22, 22, 22);
    box-shadow: 0 0 8px rgba(255, 71, 87, 0.1);
}

.search-right-zone {
    flex: 0 0 50%;            /* 右側對等留白 */
}

/* 修正 Placeholder 顏色 */
#industrySearch::placeholder {
    color: #555;
    font-size: 0.8rem;
}

/* 🏆 彈出選單：對位與瘦身 */
#industryDropdown.list-group {
    width: 95% !important;        /* 💎 跟隨搜尋框的 50% 容器寬度 */
    max-width: 250px !important;  /* 與搜尋框上限一致 */
    background: rgb(26, 26, 26) !important; /* 提升亮度，與底層區隔 */
    border: 1px solid rgb(255, 71, 87) !important; /* 方圓紅邊框，強化選取感 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
    margin-top: 2px;              /* 緊貼搜尋框下緣 */
}

/* 🏆 選單項目：縮減高度與微調字體 */
#industryDropdown .list-group-item {
    background: rgb(26, 26, 26) !important;
    color: rgb(220, 220, 220) !important;
    padding: 6px 12px !important; /* 💎 壓扁高度，從 10px 降到 6px */
    border-bottom: 1px solid rgb(45, 45, 45) !important;
    font-size: 0.8rem !important;  /* 字體同步縮小 */
    transition: background 0.2s;
}

/* 滑鼠經過或選取時 */
#industryDropdown .list-group-item-action:hover,
#industryDropdown .list-group-item-action:focus {
    background: rgb(45, 45, 45) !important;
    color: rgb(255, 71, 87) !important; /* 游標經過時文字轉紅 */
}

#industryDropdown {
    position: absolute;      /* 絕對定位，脫離文檔流 */
    top: 100%;              /* 🏆 關鍵：從父容器的底部開始算起 */
    left: 0;                /* 與搜尋框左側對齊 */
    width: 100%;            /* 寬度與父容器一致 */
    z-index: 9999;          /* 確保在最上層，不被其他珍珠遮擋 */
    background: #222;       /* 深色職人背景 */
    border: 1px solid #444; /* 微導角邊框 */
    border-top: none;       /* 銜接處不留邊，更有融合感 */
    max-height: 300px;      /* 限制高度，超出則滾動 */
    overflow-y: auto;       /* 開啟滾動條 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* 增加懸浮深邃感 */
    display: none;          /* 預設隱藏 */
}

/* 放大開關，手指好點，眼睛好找 */
.scale-150 {
    transform: scale(1.5);
    cursor: pointer;
}

/* 職人硬派輸入框 */
#rapidInputBox {
    background-color: #1a1a1a !important; /* 極深黑 */
    color: #ffffff !important;           /* 純白字 */
    border: 2px solid #444 !important;    /* 粗邊框 */
    border-radius: 12px;
    padding: 20px;
    font-size: 1.2rem;                    /* 字體放大，不脫窗 */
    line-height: 1.6;
    margin-top: 15px;
}

#rapidInputBox:focus {
    border-color: #ffc107 !important;     /* 聚焦時亮黃色 */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
}

/* 職人級中尺寸開關微調 */
.mode-switch-md {
    transform: scale(1.25); /* 介於 1 到 1.5 之間的中尺寸 */
    cursor: pointer;
    margin-top: 0.1rem;
}
.mode-switch-md:checked {
    background-color: #0dcaf0 !important; /* 切換後的亮色提示 */
    border-color: #0dcaf0 !important;
}

/* 珍珠池容器：確保 500 顆珍珠自動換行，不擁擠 */
.pearl-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px; /* 方圓基調 */
    max-height: 400px;
    overflow-y: auto; /* 超過高度自動捲動 */
}

/* 珍珠單體：職人級方圓膠囊 */
.pearl-item {
    display: inline-block;
    padding: 6px 14px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px; /* 維持方圓比例 */
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none; /* 防止選取文字影響手感 */
}

/* 互動回饋：紅指甲點綴 */
.pearl-item:hover {
    border-color: #ff4444; /* 紅指甲色 */
    color: #ff4444;
    background-color: #fff5f5;
    transform: translateY(-2px); /* 輕微浮起感 */
    box-shadow: 0 4px 8px rgba(255, 68, 68, 0.1);
}

.pearl-item:active {
    transform: translateY(0);
    background-color: #ffebeb;
}

.drop-zone-v3 {
    flex-shrink: 0; /* 防止被擠壓 */
    width: 50px;    /* 配合搜尋框高度 */
    height: 50px;
    border: 2px dashed #D32F2F; /* 職人紅 */
    border-radius: 10px;        /* 方圓核心：不尖不長 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;        /* 配合深色主題 */
    transition: 0.3s;
}

.drop-zone-v3:hover {
    border-style: solid;
    box-shadow: 0 0 10px rgba(211, 47, 47, 0.5);
}

/* 🚩 珍珠引擎：強制解鎖長按選單 */
.drop-zone-v3 {
    -webkit-user-select: text !important; /* 允許文字/物件選取 */
    user-select: text !important;
    -webkit-touch-callout: default !important; /* 允許 iOS/Android 長按彈出選單 */
    cursor: text; /* 讓系統認為這是一個可以輸入的地方 */
}

.dz-placeholder {
    font-size: 20px;
}

.bi-info-circle-fill {
    color: #b22222; /* 職人紅，與紅指甲對位 */
    transition: transform 0.2s;
}
.bi-info-circle-fill:hover {
    transform: scale(1.2); /* 鼠標經過時稍微放大，增加互動感 */
}

/* 🚀 修正 Popover 寬度與折行 */
.popover {
    max-width: 400px; /* 寬度加寬，適合看歌詞 */
    white-space: pre-wrap; /* 讓 \n 換行符號生效 */
}

/* 🚀 修正標題文字顏色與背景 */
.popover-header {
    background-color: #212529 !important; /* 深黑背景 */
    color: #ffc107 !important; /* 琥珀金文字，保證看超清 */
    border-bottom: 1px solid #b22222; /* 職人紅底線 */
    font-weight: bold;
}

.popover-body {
    background-color: #2b3035; /* 深灰內文區 */
    color: #ffffff !important; /* 白色內文 */
}
/* 讓您的 doc_contentHtml 裡的按鈕變精緻 */
.popover-body .btn-xs {
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    margin-top: 5px;
    float: right; /* 讓它乖乖縮在右下角 */
}

/* 🚀 確保父容器(圖卡)是相對定位 */
.history-card {
    position: relative;
    overflow: hidden; /* 確保內容不超出方圓邊界 */
	
}

/* 🚀 右上角圖示定位 */
.mode-badge-icon {
   /* position: absolute; */
    /*top: 5px; */
   /* right: 5px; */
    font-size: 0.8rem;
    z-index: 10;
    cursor: pointer; /* 增加手型，明確提示可點擊 */
    /* 職人級發光：改用微金色的陰影 */
    filter: drop-shadow(0px 0px 3px rgba(212, 197, 179, 0.5)); 
    transition: transform 0.2s ease;
}

.mode-badge-icon:hover {
    transform: scale(1.2); /* 懸停時放大，增加互動感 */
}
/* 🛠️ 強制隱藏原生 title 提示，防止「兩個三角形」亂入 */
[data-bs-toggle="popover"] {
    pointer-events: auto !important;
}

/* 確保 Popover 彈出時在最上層，不會被其他卡片遮住 */
.popover {
    z-index: 1060 !important; 
}

/* 職人細節：確保 icon 點擊區域夠大，不會因為 absolute 而難點 */
.mode-badge-icon {
    padding: 10px; /* 增加感應區 */
    margin: -10px; /* 抵銷位移，保持位置不變 */
}

/* 統一歷史庫卡片主題 */
.history-card {
    background-color: #2a2420 !important; /* 對齊上方的深咖啡色底 */
    border: 1px solid #4a3f35 !important; /* 柔和的邊框，取代刺眼的青藍色 */
    transition: all 0.3s ease;
    border-radius: 8px !important; /* 方圓基調 *
}

.history-card h6 {
    color: #e0d5c5 !important; /* 標題改用米金色，提升質感 */
}

.history-card .text-muted {
    color: #a09080 !important; /* 時間戳改用古銅色系 */
}

/* 懸停效果：模擬發光精品感 */
.history-card:hover {
    border-color: #d4af37 !important; /* 金屬質感邊框 */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
}

/* 歷史庫下方的分頁按鈕也要換色 */
.pagination-controls-bottom .btn-outline-info {
    color: #d4af37;
    border-color: #d4af37;
}

.pagination-controls-bottom .btn-outline-info:hover {
    background-color: #d4af37;
    color: #000;
}

/* 確保內容預覽不會撐破卡片 */
.content-preview p {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 最多顯示兩行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 保持方圓紅指甲的精神：即便在歷史庫，邊角也要圓潤 */
.history-card .badge {
    border-radius: 4px;
    font-weight: 500;
}

/* LOGO 方圓容器 */
.logo-box {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #4a3f35, #2a2420);
   /* border: 1.5px solid #d4af37; /* 金屬質感邊框 */
    border-radius: 8px; /* 🛠️ 方圓對位：微圓角 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.logo-text {
    color: #d4af37;
    font-weight: bold;
    font-size: 1.2rem;
}

.main-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #e0d5c5;
    line-height: 1;
    letter-spacing: 1px;
}

.sub-title {
    font-size: 0.6rem;
    color: #a09080;
    letter-spacing: 2px;
}

/* 懸停效果：品牌發光 */
.navbar-brand:hover .logo-box {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

/* 珍珠容器佈局 */
.pearl-forge-bar {
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    justify-content: flex-start; /* 對齊您的 #stage 區域 */
}

/* 基礎珍珠樣式 - 平時狀態 */
.pearl-btn {
    padding: 5px 15px;
    border-radius: 20px;
    background: #222;
    border: 1px solid #444; /* 平時低調一點 */
    color: #888;
    font-size: 13px;
    cursor: default; /* 因為是自動觸發，不一定要讓用戶點 */
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* 駭客任務模式激活 - 儀式感啟動 */
.pearl-btn.active {
    background: #000;
    color: #00ff41;
    border: 1px solid #00ff41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
    cursor: pointer;
}

/* 掃描線動畫：僅在 active 狀態出現 */
.pearl-btn.active::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 255, 65, 0) 0%, 
        rgba(0, 255, 65, 0.3) 50%, 
        rgba(0, 255, 65, 0) 100%
    );
    animation: matrix-scan 2s infinite linear;
}

@keyframes matrix-scan {
    0% { top: -100%; }
    100% { top: 100%; }
}
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 20px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #06C167; } /* 開啟時變綠色 */
input:checked + .slider:before { transform: translateX(20px); }

/* 專業命名：Asset_Modal_Overlay */
.modal-overlay {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.9);
    justify-content: center; 
    align-items: center;
}

.modal-image {
    max-width: 90%; 
    max-height: 95%; 
    object-fit: contain; /* 確保 9:16 或 3:4 比例不變形 */
    border: 2px solid #555;
}
.img-thumbnail{
	padding:1px !important;
	border: none !important;
}

/* 🚩 珍珠模態框背景 */
.pearl-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    align-items: flex-end; /* 從底部彈出 */
}

/* 🚩 選項容器 */
.pearl-action-container {
    width: 100%;
    background: #1a1a1a;
    border-top: 1px solid #00ffcc;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    animation: slideUp 0.3s ease-out;
}

.pearl-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1dfr);
    gap: 15px;
    margin: 20px 0;
}

.pearl-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #00ffcc;
    cursor: pointer;
}

.pearl-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 255, 204, 0.1);
    border: 1px solid #00ffcc;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.pearl-cancel-btn {
    width: 100%;
    padding: 12px;
    background: #333;
    border: none;
    border-radius: 10px;
    color: #fff;
    margin-top: 10px;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* 🚩 珍珠引擎：高對比度提示艙 */
.pearl-high-contrast-toast {
    /* 使用 90% 不透明的黑色，確保背景透不進來 */
    background: rgba(10, 10, 10, 0.95); 
    
    /* 金色邊框加粗，強化邊界感 */
    border: 2px solid #ffc107; 
    
    /* 文字加粗並微調發光，提升辨識度 */
    color: #ffc107;
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
    
    padding: 12px 28px;
    border-radius: 12px; /* 改回微方圓，視覺更穩重 */
    
    /* 增加深色外發光，把提示框從複雜背景中「頂」出來 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 193, 7, 0.2);
    
    font-size: 16px;
    font-weight: 800; /* 極粗體 */
    letter-spacing: 1.5px;
    
    /* 彈性寬度但限制最大範圍 */
    min-width: 200px;
    text-align: center;
    display: inline-block;
}

/* 🚩 修正手機寬度：確保文字不會擠壓 */
@media (max-width: 576px) {
    .pearl-high-contrast-toast {
        width: 85vw; /* 佔據螢幕 85% 寬度 */
        white-space: normal; /* 容許長訊息換行 */
        line-height: 1.4;
    }
}

@keyframes border-glow {
    0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 0.8); }
    100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }
}

.pearl-high-contrast-toast {
    animation: border-glow 1.5s infinite ease-in-out;
}