/* --- 基础重置 --- */
body { 
    margin: 0; overflow: hidden; background-color: #000; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100vh; touch-action: none; overscroll-behavior: none;
}

#canvas-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000;
}
#canvas-container { width: 100%; height: 100%; display: block; }

/* --- UI 层 --- */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
    display: flex; flex-direction: column; justify-content: space-between;
}

/* 顶部信息 */
.header-info {
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    pointer-events: auto;
}

h1 {
    font-weight: 300; letter-spacing: 2px; font-size: 1.4rem; margin: 0;
    background: linear-gradient(to right, #fff, #d4af37, #fff); 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    display: flex; align-items: center; gap: 10px;
}

/* 性能角标 */
#perf-badge {
    font-size: 0.6rem; padding: 2px 6px; border-radius: 4px;
    background: rgba(255,255,255,0.1); border: 1px solid #555; color: #888;
    cursor: pointer; user-select: none;
}

#status-text {
    font-size: 1rem; color: #00ff88; font-weight: bold; margin-top: 5px;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.instructions {
    margin-top: 10px; font-size: 0.8rem; color: #ccc; line-height: 1.5;
    background: rgba(0, 0, 0, 0.4); padding: 10px; border-radius: 8px;
    border-left: 2px solid #d4af37; backdrop-filter: blur(4px);
    max-width: 220px;
}

/* 摄像头小窗 */
#video-container {
    position: absolute; top: 15px; right: 15px; 
    width: 100px; height: 75px; z-index: 20;
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; overflow: hidden;
    transform: scaleX(-1); background: #000; pointer-events: none;
}
#input-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
#skeleton-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* 底部按钮 */
.bottom-controls {
    padding: 30px 20px; display: flex; justify-content: center; gap: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    pointer-events: auto;
}

.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4); color: #d4af37;
    padding: 12px 24px; border-radius: 30px;
    font-size: 15px; font-weight: bold; cursor: pointer;
    backdrop-filter: blur(10px); transition: transform 0.1s;
}
.glass-btn:active { transform: scale(0.95); background: rgba(255, 215, 0, 0.2); }

#fullscreen-btn {
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
}

#loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #d4af37; font-size: 1.2rem; text-align: center; pointer-events: none;
}
.sub-text { font-size: 0.8rem; opacity: 0.7; }
#file-input { display: none; }