*{box-sizing:border-box}html,body{margin:0;height:100%;color:#fff;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans TC;overflow:hidden}.page-container{position:relative;width:100vw;height:100vh}.sidebar{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:10}.sidebar .stack{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:420px}.nav-section{width:100%}.nav-section .nav-btn{display:inline-flex;touch-action:manipulation}.nav-section .panel,.nav-section.open .nav-btn{display:none}.nav-section.open .panel{display:flex}.nav-btn{background:#18181c;color:#fff;border:none;border-radius:40px;padding:12px 28px;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;box-shadow:0 2px 6px #00000040;transition:background .3s,transform .2s,box-shadow .3s}.nav-btn:hover{background:#24242a;transform:translate(3px);box-shadow:0 4px 12px #ffffff0f}.nav-btn.active{background:#20222a;box-shadow:0 0 10px #ffffff0d}.nav-btn .plus{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-weight:700;font-size:14px;line-height:1;color:#fff;background:#0c0c0c;border:1px solid #3a3a3a;box-sizing:border-box}.dot{width:16px;height:16px;border-radius:50%;background:#e95d0f;display:inline-block;border:2px solid transparent}.dot.dot-outline{border-color:#2a2a2a}.color-panel{position:relative;background:#1c1c1f;border-radius:18px;padding:20px 24px;color:#fff;font-size:15px;line-height:1.6;width:100%;box-shadow:0 4px 20px #0006;flex-direction:column;gap:12px;animation:fadeIn .2s ease forwards}.color-panel p{margin:0}.color-title{font-weight:600;color:#e6e6eb}.color-desc{font-weight:400;color:#ccc}.color-desc span{color:#fff;font-weight:600}.panel-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:1px solid #3a3a3a;background:#0f0f13;color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}.panel-close:hover{background:#1b1b22;transform:translateY(-1px)}.palette-row{display:flex;align-items:center;gap:14px;margin-top:6px}.chip{padding:0;width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .25s;text-indent:-9999px}.chip[title=黑色]{background:#070707}.chip[title=白色]{background:#f7f7f7}.chip[title=粉色]{background:#ff6e92}.chip[title=綠色]{background:#8fd4af}.chip[title=藍色]{background:#699abb}.chip:hover{transform:scale(1.1)}.chip.active{border-color:#fff;box-shadow:0 0 0 2px #222}@keyframes fadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.viewer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden}#three-container{position:relative;width:100%;height:100%;overflow:hidden}#three-container canvas{display:block;image-rendering:auto}#loading-screen{position:absolute;top:0;right:0;bottom:0;left:0;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:5}.spinner{width:60px;height:60px;border:6px solid #333;border-top-color:#777;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.loading-text{font-size:1.1rem;color:#aaa}@keyframes spin{to{transform:rotate(360deg)}}.ar-fab{position:absolute;right:28px;bottom:28px;padding:12px 18px;background:#1b1d2b;color:#fff;border:1px solid #2c2e45;border-radius:28px;font-weight:800;letter-spacing:.4px;box-shadow:0 6px 24px #00000059;cursor:pointer;z-index:6;transition:background .25s,transform .15s,opacity .2s}.ar-fab:hover{background:#22243a;transform:translateY(-1px)}.ar-fab:disabled{opacity:.45;cursor:not-allowed}#ar-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4}@media (max-width: 900px){.sidebar{left:0;right:0;bottom:env(safe-area-inset-bottom);top:auto;transform:none;position:fixed;z-index:12;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,#000000a6,#0000)}.sidebar .stack{width:100%;display:flex;flex-direction:row;align-items:center;gap:12px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:0 8px;flex-wrap:nowrap}.sidebar .stack::-webkit-scrollbar{display:none}.nav-section{width:auto!important;flex:0 0 auto;scroll-snap-align:start}.nav-section.open .nav-btn{display:inline-flex!important}.nav-section.open .panel{display:flex;position:fixed;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));width:auto;max-width:none;z-index:9999;box-shadow:0 12px 30px #00000080;pointer-events:auto}.nav-btn{padding:10px 18px;border-radius:28px;font-size:14px}.nav-btn .plus{width:18px;height:18px;font-size:13px}}