/* ===== 標籤預覽面板 ===== */
.label-preview-panel { display: none; background: #3e2723; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.label-preview-panel.show { display: block; }
.workspace-wrapper.side-by-side .label-preview-panel.show { display: flex; }
.label-preview-header h3 { color: white; margin: 0 0 15px 0; }
.label-preview-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.label-preview-controls .btn { padding: 8px 14px; font-size: 13px; }

.zoom-control { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); padding: 8px 15px; border-radius: 20px; color: white; font-size: 13px; margin-left: auto; }
.zoom-control input[type="range"] { width: 120px; cursor: pointer; }

.student-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 15px 0; max-height: 150px; overflow-y: auto; padding: 10px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }
.student-select-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(255, 255, 255, 0.9); border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.student-select-item:hover { background: white; }
.student-select-item.selected { background: #fce4ec; border: 2px solid #e8836b; }
.student-select-item.over-limit { background: #fdedec; }
.student-select-item input { width: 14px; height: 14px; }
.student-select-item .char-info { font-size: 10px; color: #888; margin-left: auto; }

/* 設定區摺疊（全部收合按鈕） */
.settings-collapse-bar { margin: 8px 0 4px; }
.btn-collapse-settings { background: rgba(255,255,255,0.12); color: #ecf0f1; border: 1px solid rgba(255,255,255,0.2); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; width: 100%; text-align: left; transition: background 0.2s; }
.btn-collapse-settings:hover { background: rgba(255,255,255,0.2); }

/* 獨立可摺疊區塊 */
.settings-section { margin: 4px 0; border-radius: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
.settings-section[open] { background: rgba(255,255,255,0.12); }
.section-summary { padding: 6px 12px; cursor: pointer; font-size: 12px; font-weight: bold; color: #ecf0f1; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.section-summary::-webkit-details-marker { display: none; }
.section-summary::before { content: '▶'; font-size: 9px; transition: transform 0.2s; flex-shrink: 0; }
.settings-section[open] > .section-summary::before { transform: rotate(90deg); }
.section-summary:hover { background: rgba(255,255,255,0.08); border-radius: 6px; }
.btn-smart-recommend-mini { background: linear-gradient(135deg, #e8836b, #d4543a); color: white; border: none; border-radius: 12px; padding: 2px 10px; font-size: 11px; cursor: pointer; margin-left: auto; }
.btn-smart-recommend-mini:hover { filter: brightness(1.1); }

/* 真實預覽區 */
.preview-scroll-container { width: 100%; overflow: auto; background: #3e2723; padding: 20px; border-radius: 8px; display: flex; justify-content: center; min-height: 300px; }
.a4-paper-wrapper { transform-origin: top center; transition: transform 0.2s ease; }

/* 鐵壁防禦：高度鎖死 */
.a4-paper { width: 210mm; height: 297mm; background: white; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 59.4mm); box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); overflow: hidden; }

/* 標籤格 */
.label-cell { padding: 4mm 5mm; display: flex; flex-direction: column; overflow: hidden !important; position: relative; background: white; border: 0.5px dashed #e0e0e0; box-sizing: border-box; height: 100%; min-height: 100%; max-height: 100%; width: 100%; cursor: pointer; transition: all 0.2s; }
.label-cell:hover { background-color: #fff3e0; box-shadow: inset 0 0 0 2px #e8836b; }
.label-cell:hover::after { content: '🔍 點擊預覽'; position: absolute; bottom: 2px; right: 2px; font-size: 10px; background: #e8836b; color: white; padding: 2px 6px; border-radius: 4px; opacity: 0.8; }
.label-cell.overflow-warning { background: #fee2e2 !important; box-shadow: inset 0 0 0 1mm #ef4444 !important; }
.label-cell.overflow-warning::after { content: '⚠ 爆框 (點擊查看)'; position: absolute; top: 1mm; right: 1mm; background: #ef4444; color: white; font-size: 8pt; padding: 1px 4px; border-radius: 2px; font-weight: bold; z-index: 10; }
.label-cell .student-id-preview { font-weight: bold; margin-bottom: 2mm; flex-shrink: 0; line-height: 1.2; }
.label-cell .comment-preview { flex: 1 1 auto; overflow: hidden !important; word-break: break-all; white-space: pre-wrap; width: 100%; min-height: 0; }
.label-cell.sync-highlight { box-shadow: inset 0 0 0 3px #2196F3 !important; background-color: #e3f2fd !important; transition: box-shadow 0.2s, background-color 0.2s; }
.comment-row.sync-flash { animation: syncFlash 1.5s ease; }
@keyframes syncFlash { 0%,30% { box-shadow: 0 0 0 3px #2196F3; background: #e3f2fd; } 100% { box-shadow: none; background: inherit; } }
/* 印章層：確保絕對定位在格子內可見 */
.stamp-layer { position: absolute !important; z-index: 10 !important; pointer-events: none; }
.stamp-layer img { display: block !important; }

.label-cell.empty-cell { display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 10pt; cursor: context-menu; }
.label-cell.empty-cell:hover { background-color: #f5f5f5; box-shadow: none; }
.label-cell.empty-cell:hover::after { content: '右鍵選單'; position: absolute; bottom: 2px; right: 2px; font-size: 9px; background: #999; color: white; padding: 1px 5px; border-radius: 3px; opacity: 0.7; }

.page-navigation { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 15px; }
.page-navigation .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-indicator { color: white; font-size: 14px; font-weight: bold; min-width: 100px; text-align: center; }

.print-settings { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; align-items: center; }
.setting-group { display: flex; align-items: center; gap: 6px; }
.setting-group label { color: #ecf0f1; font-size: 12px; white-space: nowrap; }
.setting-group select { padding: 5px 8px; border-radius: 4px; border: none; font-size: 12px; background: white; }
.setting-group input[type="color"] { width: 32px; height: 28px; border: none; border-radius: 4px; cursor: pointer; padding: 0; }
.setting-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.btn-smart-recommend { background: linear-gradient(135deg, #e8836b 0%, #66bb6a 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-size: 13px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(232, 131, 107, 0.4); }
.btn-smart-recommend:hover { transform: translateY(-2px); }

/* 印章設定 */
.stamp-settings { padding: 10px 12px; }
.stamp-header { display: flex; justify-content: space-between; align-items: center; color: white; font-weight: bold; font-size: 14px; }
.stamp-toggle { display: flex; align-items: center; gap: 5px; font-weight: normal; font-size: 12px; cursor: pointer; color: white; }
.stamp-options { margin-top: 12px; display: none; flex-direction: column; gap: 12px; }
.stamp-preview-area { display: flex; gap: 10px; align-items: center; }
.stamp-preview { width: 60px; height: 60px; background: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stamp-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stamp-preview .text-stamp { font-size: 28px; color: #c0392b; font-weight: bold; font-family: 'Ma Shan Zheng', cursive, serif; }
.stamp-preview .no-stamp { font-size: 10px; color: #999; text-align: center; }
.stamp-buttons { display: flex; flex-direction: column; gap: 6px; }
.btn-upload { background: #3498db; color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; text-align: center; }
.btn-clear-stamp { background: #e74c3c; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.stamp-position, .stamp-size { display: flex; align-items: center; gap: 8px; color: #ecf0f1; font-size: 12px; }
.stamp-position select, .stamp-size input { flex: 1; }
.preset-stamps { margin-top: 10px; }
.preset-stamps label { color: #ecf0f1; font-size: 12px; display: block; margin-bottom: 6px; }
.preset-stamp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.preset-stamp { aspect-ratio: 1; background: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; color: #c0392b; font-weight: bold; font-family: 'Ma Shan Zheng', cursive, serif; transition: transform 0.2s; }
.preset-stamp:hover { transform: scale(1.1); }