/* 透明大卡片佈局 */
.camera-glass-panel {
    background: rgba(38, 38, 38, 0.4); border: 6px solid #262626; border-radius: 40px;
    padding: 30px; width: 90%; max-width: 1100px; margin: 5vh auto;
}

.panel-content-wrapper { display: flex; gap: 30px; align-items: flex-start; }

/* 左側控制區 */
.camera-controls { display: flex; flex-direction: column; gap: 15px; width: 250px; }

/* 模擬的大黑框 */
.empty-placeholder-box { background: #A6A6A6; border: 1px solid black; border-radius: 15px; height: 120px; }

/* 顏色顯示方塊 */
.color-preview-box { background: white; border: 1px solid black; border-radius: 15px; height: 120px; transition: background 0.1s; }

/* 顏色數值文字 */
.color-value-text { background: white; border: 1px solid black; border-radius: 15px; padding: 10px; text-align: center; }

/* 右側 Viewport (4:3) */
.viewport-section { flex: 1; aspect-ratio: 4 / 3; background: black; border: 1px solid white; overflow: hidden; }

/* 修正相機預覽，確保不被裁切 */
.camera-video-feed, #video {
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* 重要：改為 contain，不要用 cover */
    background-color: #000; /* 黑邊背景 */
}

/*G Fonts icon*/
.material-symbols-rounded {
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 48;
    color: #EFEFEF; /* 你指定的顏色 */
    font-size: 24px; /* 依照你的底欄高度調整 */
    vertical-align: middle;
    margin-right: 8px; /* 讓圖標跟文字保持距離 */
}

/*準心=====*/
/* 1. 確保容器有設定 relative，準心才能定位在中央 */
.camera-viewport-container {
    position: relative;
    overflow: hidden; /* 防止準心溢出 */
}

/* 2. 準心魔法：使用 ::after 虛擬元素 */
/* 1. 確保容器有設定 relative (維持不變) */
.camera-viewport-container {
    position: relative;
    overflow: hidden;
}

/* 2. 十字準心的「橫線」 (利用 ::before) */
.camera-viewport-container::before {
    content: "";
    position: absolute;
    /* 定位在正中央 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 橫線樣式：寬一點、矮一點 */
    width: 20px;  /* 十字的大小 */
    height: 1px;  /* 極細的線 */
    
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白 */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);    /* 黑邊陰影，增加對比 */
    
    z-index: 10;
    pointer-events: none;
}

/* 3. 十字準心的「直線」 (利用 ::after) */
.camera-viewport-container::after {
    content: "";
    position: absolute;
    /* 定位在正中央 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 直線樣式：矮一點、寬一點 */
    width: 1px;   /* 極細的線 */
    height: 20px; /* 十字的大小 */
    
    background-color: rgba(255, 255, 255, 0.9); /* 半透明白 */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);    /* 黑邊陰影，增加對比 */
    
    z-index: 10;
    pointer-events: none;
}
/*======*/

.privacy-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8); /* 沉穩的底色 */
    color: #ffffff;
    padding: 10px;
    font-size: 14px;
}