html, body {
    width: 100% ;
    height: 100% ;
    margin: 0 !important ;
    overflow: hidden ;
    /* 解决部分手机 top:0 无法对齐的问题 */
    position: absolute ; 
    top: 0 ;
    left: 0 ;
    background-color: #0b0b10;
    touch-action: none;
}

body {
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 214, 64, 0.25), transparent 42%),
        radial-gradient(circle at 50% 40%, rgba(255, 214, 64, 0.18), transparent 55%),
        radial-gradient(circle at 50% 40%, rgba(14, 24, 60, 0.9), rgba(10, 14, 32, 0.95) 60%, #090d1f 100%),
        linear-gradient(180deg, #0b1226 0%, #0a0f22 50%, #0b1226 100%);
    background-attachment: fixed;
}

body.ar-scene-active,
body.camera-mode {
    background: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: -20vh -20vw;
    pointer-events: none;
    z-index: 0;
    opacity: 0.28;
    mix-blend-mode: screen;
    background:
        repeating-conic-gradient(from 0deg, rgba(255, 214, 64, 0.06) 0deg 5deg, rgba(0, 0, 0, 0) 5deg 16deg),
        radial-gradient(circle at 50% 50%, rgba(255, 214, 64, 0.2), rgba(0, 0, 0, 0) 55%);
    filter: blur(0.4px);
}

body.ar-scene-active::before,
body.ar-scene-active::after,
body.camera-mode::before,
body.camera-mode::after {
    opacity: 0;
    background: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(circle at 50% 40%, rgba(255, 214, 64, 0.12), transparent 45%),
        radial-gradient(circle at 50% 75%, rgba(12, 20, 46, 0.55), transparent 55%);
    opacity: 0.7;
}


#taiji-orb {
    position: fixed;
    left: 50%;
    top: 45%;
    width: clamp(140px, 28vmin, 220px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: screen;
    display: grid;
    place-items: center;
    animation: taiji-rotate 22s linear infinite, taiji-breathe 6s ease-in-out infinite;
}

body.ar-scene-active #taiji-orb,
body.camera-mode #taiji-orb {
    opacity: 0;
    visibility: hidden;
}

#taiji-orb i {
    font-size: clamp(120px, 24vmin, 200px);
    color: #f7f2e8;
    text-shadow: 0 0 25px rgba(255, 215, 0, 0.25), 0 0 60px rgba(0, 0, 0, 0.45);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.2));
}

@keyframes taiji-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes taiji-breathe {
    0%, 100% { opacity: 0.28; filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0)); }
    50% { opacity: 0.5; filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.35)); }
}


/* 修改后：改为透明但保留占位，或置于底层 */
/* base.css */

/* 核心修改：强制居中 + 保持原始清晰比例 */
#camera-video, 
video,
.a-canvas {
    position: fixed !important;
    top: 50% !important;           /* 垂直定位到中间 */
    left: 50% !important;          /* 水平定位到中间 */
    transform: translate(-50%, -50%) !important; /* 修正中心点，实现完美居中 */
    
    width: auto !important;        /* 宽度自适应（不要设100%） */
    height: 100% !important;       /* 高度撑满屏幕 */
    
    object-fit: contain !important; /* 关键：包含模式（不裁切，最清晰） */
    
    z-index: -100 !important;      /* 放在最底层 */
    background-color: lch(0% 0 0 / 0);        /* 空白处显示黑色，显得专业 */
}

/* =============================================
   AR.js 视频强制居中补丁
   ============================================= */

/* 针对你刚才发的那个 ID 专门写的修复 */
#arjs-video {
    /* 1. 强制居中定位 */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    
    /* 2. 修正中心点 */
    transform: translate(-50%, -50%) !important;
    
    /* 3. 保持清晰比例，不拉伸 */
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
    
    /* 4. 确保在最底层 */
    z-index: -100 !important;
    background-color: black !important;
    
    /* 5. 消除 AR.js 可能添加的 margin */
    margin: 0 !important;
}

/* base.css - 底部添加 */

/* 让 AI 画布与视频完全重合 */
#ai-detection-canvas {
    /* 1. 强制居中定位 (与视频一致) */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 2. 强制高度撑满，宽度自适应 (与视频一致) */
    height: 100% !important;
    
    /* 3. 保持比例 (关键) */
    object-fit: contain !important;
    
    /* 4. 确保在视频上层，但不可点击 */
    z-index: 999 !important;
    pointer-events: none !important;
}

#arjs-video,
#camera-video,
.a-canvas,
.a-loader-title,
.arjs-loader {
    pointer-events: none !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-light);
}

/* 调试与优化类 */
.debug-layer {
    border: 2px solid red;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    display: none;
}

.performance-optimize {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    -webkit-font-smoothing: antialiased;
}