*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; } /* ===================================================== MESH MAX · DESIGN TOKENS Edit :root for DARK MODE, [data-theme="light"] for LIGHT MODE. Both blocks are fully independent — changing one never touches the other. The tokens marked ★ are the ones most likely to need adjustment when rebranding. DARK MODE (default) ────────────────────────────── --accent #e8703a ★ primary (orange) --accent2 #48c0b8 ★ secondary (teal) --green #48c878 success --red #e05060 danger --yellow #ffbe50 warning --bg #07070a ★ page background --panel rgba(10,10,16,.97) panel overlay --panel2 #12121a panel cards --panel3 #181820 input fields --border #1c1c28 subtle border --border2 #252535 visible border --text #e0e0ec ★ primary text --text-mid #8888a0 secondary text --text-dim #52526a muted text -- SURFACE TOKENS (also used by elements below) -- --topbar-bg rgba(22,22,30,.94) topbar --dropdown-bg rgba(13,13,19,.98) mobile dropdown --vp-btn-bg rgba(10,10,16,.92) viewport overlay buttons --vp-btn-col var(--text-dim) viewport button icons/text --vp-btn-hov rgba(255,255,255,.04) viewport button hover --popup-bg rgba(13,13,19,.98) snap/pivot/geo floating menus --reopen-bg rgba(10,10,16,.96) reopen panel pill --scene-bg #07070a ★ 3D viewport background (also set in env.js) --primary-btn-text #0a0400 ADD / primary button text ===================================================== */ :root{ --bg:#07070a;--panel:rgba(10,10,16,.97);--panel2:#12121a;--panel3:#181820; --border:rgba(51,51,60,0.35);--border2:#252535; --accent:#e8703a;--accent-lo:rgba(232,112,58,.10); --accent2:#48c0b8;--green:#48c878;--red:#e05060;--yellow:#ffbe50; --ai-accent:#783ce6;--ai-grad:linear-gradient(135deg,#783ce6,#e8703a);--ai-grad-soft:linear-gradient(135deg,rgba(120,60,230,.16),rgba(232,112,58,.16)); --text:#e0e0ec;--text-dim:#52526a;--text-mid:#8888a0; --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px); --topbar-h:50px;--panel-h:32vh; /* Surface tokens — dark mode values */ --topbar-bg: rgba(22,22,30,.94); --dropdown-bg: rgba(13,13,19,.98); --vp-btn-bg: rgba(10,10,16,.92); --vp-btn-col: var(--text-dim); --vp-btn-hov: rgba(255,255,255,.04); --popup-bg: rgba(13,13,19,.98); --reopen-bg: rgba(10,10,16,.96); --scene-bg: #07070a; --primary-btn-text: #0a0400; --btn-radius:7px;--btn-weight:700;--btn-border-w:1px; /* Type-family tokens — Settings can swap these via a body class. */ --font-display: 'Syne', sans-serif; --font-body: 'JetBrains Mono', monospace; /* Responsive type scale — bumped +1–2 for readability; clear tier spread (see fs-s/fs-l). */ --fs-xxs:clamp(8px,.7vw,11px); --fs-xs: clamp(9px,.8vw,12px); --fs-sm: clamp(10.5px,1vw,14px); --fs-md: clamp(12px,1.15vw,16px); --fs-lg: clamp(14px,1.4vw,19px); --fs-xl: clamp(16px,1.7vw,22px); --fs-2xl:clamp(19px,2.3vw,30px); } /* Font-size: explicit per-token overrides — clear, no calc chain. ~2px gap between tiers so S / M / L feel obviously distinct (the 1px previous gap read as "no change"). */ body.fs-s{ --fs-xxs:clamp(6px,.55vw,9px); --fs-xs: clamp(7px,.65vw,10px); --fs-sm: clamp(8.5px,.85vw,12px); --fs-md: clamp(10px,1vw,14px); --fs-lg: clamp(12px,1.2vw,16px); --fs-xl: clamp(14px,1.5vw,19px); --fs-2xl:clamp(16px,2vw,26px); } body.fs-l{ --fs-xxs:clamp(10px,.85vw,13px); --fs-xs: clamp(11px,.95vw,14px); --fs-sm: clamp(13px,1.2vw,17px); --fs-md: clamp(15px,1.4vw,20px); --fs-lg: clamp(17px,1.7vw,23px); --fs-xl: clamp(20px,2vw,26px); --fs-2xl:clamp(24px,2.8vw,35px); } /* Font themes — Settings picks one. Each swaps both display + body for visual consistency. */ body.font-f1{ --font-display:'Google Sans Flex', sans-serif; --font-body: 'Google Sans Flex', sans-serif; } body.font-f2{ --font-display:'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; } body.font-f3{ --font-display:'Jura', sans-serif; --font-body: 'Jura', sans-serif; } html,body{height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;} /* ══ TOP BAR ══ */ #topbar{position:fixed;top:0;left:0;right:0;height:calc(var(--topbar-h) + var(--safe-top));padding-top:var(--safe-top);background:var(--topbar-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding-left:clamp(10px,1.5vw,20px);padding-right:clamp(8px,1.2vw,16px);z-index:300;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);} .tb-left{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);} .tb-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:.25em;color:var(--accent);line-height:1;} /* ── LOGO ── */ #mm-logo{display:flex;align-items:center;flex-shrink:0;position:relative;top:3px;} #mm-logo svg{height:28px;width:auto;display:block;overflow:visible;} #mm-logo-about{display:block;} #mm-logo-about svg{height:44px;width:auto;display:block;overflow:visible;} @media(max-width:767px){ #mm-logo svg{height:22px;} } .tb-version{font-size:var(--fs-xxs);background:rgba(232,112,58,.10);color:var(--accent);border:1px solid rgba(232,112,58,.22);border-radius:3px;padding:1px 5px;letter-spacing:.1em;} .tb-sub{font-size:var(--fs-xxs);color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase;} .tb-right{display:flex;align-items:center;gap:clamp(4px,.5vw,8px);} .tb-btn{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:var(--btn-weight,700);font-size:var(--fs-sm);letter-spacing:.14em;border:none;border-radius:var(--btn-radius,7px);padding:0 clamp(9px,1vw,14px);height:clamp(29px,3.2vh,36px);cursor:pointer;touch-action:manipulation;-webkit-appearance:none;white-space:nowrap;transition:background .15s;} .tb-btn-primary{background:var(--accent);color:var(--primary-btn-text);} .tb-btn-primary:active{background:#ff9060;} .tb-btn-sec{background:var(--panel2);color:var(--text-mid);border:var(--btn-border-w,1px) solid var(--border2);} /* Account / sign-in — corner person icon, accent-orange so it's easy to find (signed-out = icon only). */ #authBtn{color:var(--accent);border-color:var(--accent-lo);} #authBtn svg{width:18px;height:18px;} #authBtn:hover{background:var(--accent-lo);border-color:var(--accent);} #authBtn .auth-label{display:none;} /* Signed in: no name in the bar — just a calm neutral tint (white in dark / dark in light, via --text); details live in the dropdown. Orange stays the signed-out CTA. */ #authBtn.auth-signed-in,#authBtnNav.auth-signed-in{color:var(--text);border-color:var(--border2);} #authBtn.auth-signed-in:hover{background:var(--panel3);border-color:var(--text-mid);} .tb-btn-sec:hover{border-color:rgba(232,112,58,.5);color:var(--text);} .tb-btn-primary:hover{background:#ff8c52;color:var(--primary-btn-text);} .tb-btn-sec:active{border-color:var(--accent);color:var(--accent);} #fileInput,#envFileInput,#texFileInput,#sessionFileInput{position:fixed;top:-300px;left:-300px;width:1px;height:1px;opacity:0;pointer-events:none;} #mini-info-tip{display:none;} /* ══ VIEWPORT ══ */ #viewport{position:fixed;top:calc(var(--topbar-h) + var(--safe-top));bottom:0;left:0;right:0;overflow:hidden;touch-action:none;} #canvas{width:100%;height:100%;display:block;touch-action:none;} #drop-ring{position:absolute;inset:10px;bottom:calc(var(--panel-h) + 10px);border:2px dashed transparent;border-radius:12px;pointer-events:none;transition:border-color .2s,background .2s;z-index:10;} #drop-ring.active{border-color:var(--accent);background:rgba(232,112,58,.04);} #drop-label{position:absolute;left:0;right:0;bottom:calc(var(--panel-h) + 50%);transform:translateY(50%);text-align:center;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.3em;color:var(--accent);opacity:0;pointer-events:none;transition:opacity .2s;z-index:11;} #drop-ring.active~#drop-label{opacity:1;} #empty-state{position:absolute;top:0;left:0;right:0;bottom:var(--panel-h);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:opacity .4s;z-index:5;} #empty-state.hidden{opacity:0;pointer-events:none;} .es-icon{width:clamp(44px,6vw,72px);height:clamp(44px,6vw,72px);margin-bottom:clamp(12px,1.5vh,20px);opacity:.17;animation:levitate 3.8s ease-in-out infinite;} @keyframes levitate{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-8px) rotate(2deg);}} .es-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.25em;color:var(--text-dim);} .es-sub{font-size:var(--fs-xs);color:var(--text-dim);letter-spacing:.15em;margin-top:5px;opacity:.5;} #emptyLoadBtn{margin-top:clamp(14px,2vh,24px);display:flex;align-items:center;gap:7px;background:transparent;color:var(--accent);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.2em;border:1px solid rgba(232,112,58,.35);border-radius:8px;padding:clamp(8px,1.2vh,14px) clamp(14px,2vw,26px);cursor:pointer;pointer-events:all;touch-action:manipulation;transition:background .15s;} #emptyLoadBtn:active{background:var(--accent-lo);} /* ══ PANEL ══ */ #panel{position:fixed;bottom:0;left:0;right:0;height:calc(var(--panel-h) + var(--safe-bottom));background:var(--panel);border-top:1px solid var(--border2);border-radius:14px 14px 0 0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:200;display:flex;flex-direction:column;overflow:hidden;transition:transform .32s cubic-bezier(.32,.72,0,1),right .32s cubic-bezier(.32,.72,0,1);} #panel.closed{transform:translateY(100%);} #panel-grip{flex:0 0 auto;height:10px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;} #panel-grip::before{content:'';width:40px;height:4px;border-radius:3px;background:var(--border2);transition:background .15s,width .15s;} #panel-grip:hover::before,#panel-grip.dragging::before{background:var(--accent2);width:56px;} #tab-bar{flex-shrink:0;display:flex;align-items:center;padding:clamp(2px,.3vh,4px) clamp(6px,.8vw,12px) 0;gap:2px;border-bottom:1px solid var(--border);position:relative;} #tab-scroll{flex:1;display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;} #tab-scroll::-webkit-scrollbar{display:none;} #tab-swipe-hint{display:none;position:sticky;right:0;flex:0 0 auto;align-items:center;justify-content:flex-end;width:34px;height:100%;margin-left:-34px;padding-right:2px;color:var(--text-dim);pointer-events:none;background:linear-gradient(90deg,transparent,var(--panel) 62%);opacity:1;transition:opacity .22s ease;} #tab-scroll.swiping #tab-swipe-hint{opacity:0;} .tab-btn{flex:1 0 auto;white-space:nowrap;height:clamp(26px,3.5vh,34px);background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:13px;letter-spacing:.15em;text-transform:uppercase;border:none;border-bottom:2px solid transparent;cursor:pointer;touch-action:manipulation;transition:color .15s,border-color .15s;-webkit-appearance:none;padding-bottom:2px;} @media(max-width:767px){ #tab-scroll.show-swipe-hint #tab-swipe-hint{display:flex;} .tab-btn{height:44px;font-size:13px;letter-spacing:.1em;padding:0 15px 2px;} #hideBtn{height:34px;font-size:var(--fs-xs);padding:0 12px;} } /* CAMERA panel (camera.js) — toggle rows reuse the .lc-row slider styling for ranges */ #panel-camera .cam-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:5px 0;cursor:pointer;font-size:var(--fs-xs);color:var(--text-mid);user-select:none;} #panel-camera .cam-row-lbl{flex:1;min-width:0;} #panel-camera .cam-chk{flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent2);cursor:pointer;} #panel-camera .cam-home-row{display:flex;gap:6px;margin:2px 0 8px;} #panel-camera .cam-btn{flex:1;min-width:0;height:30px;background:var(--panel3);color:var(--text-mid);border:1px solid var(--border2);border-radius:7px;font-size:var(--fs-xs);letter-spacing:.04em;cursor:pointer;transition:background .15s,color .15s,border-color .15s;} #panel-camera .cam-btn:hover{background:var(--panel2);color:var(--text);border-color:var(--accent2);} .cam-mini-btn{transition:border-color .14s,color .14s,background .14s;} .cam-mini-btn:hover{border-color:var(--accent2);color:var(--accent2);} #panel-camera .cam-int-row{display:flex;gap:8px;margin-top:4px;} #panel-camera .cam-int-row .cam-row{flex:1;min-width:0;} @media(min-width:768px){#panel-camera .cam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-top:4px;}} @media(max-width:767px){#panel-camera .cam-col + .cam-col{margin-top:10px;}} .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);} .tab-btn:not(.active):hover{color:var(--text-mid);} /* Full tab names on desktop (short on mobile); LIGHTS/SCENE are already full. Breakpoint is tunable. */ .tab-btn .tb-f{display:none;} @media (min-width:1100px) and (hover:hover) and (pointer:fine){ .tab-btn{font-size:13.5px;} .tab-btn .tb-s{display:none;} .tab-btn .tb-f{display:inline;} } #hideBtn:hover{border-color:var(--accent2);color:var(--text);} #hideBtn{flex-shrink:0;display:flex;align-items:center;gap:5px;height:clamp(22px,2.8vh,30px);background:var(--panel2);border:1px solid var(--border2);border-radius:6px;padding:0 clamp(6px,.8vw,12px);cursor:pointer;touch-action:manipulation;margin-left:4px;margin-bottom:3px;color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.15em;white-space:nowrap;transition:border-color .15s,color .15s;} #hideBtn:active{border-color:var(--accent);color:var(--accent);} #reopenBtn{position:fixed;bottom:calc(10px + var(--safe-bottom));left:50%;transform:translateX(-50%) translateY(0);background:var(--reopen-bg);border:1px solid var(--border2);border-radius:20px;padding:clamp(5px,.8vh,9px) clamp(14px,2vw,22px) clamp(5px,.8vh,9px) clamp(10px,1.5vw,16px);display:flex;align-items:center;gap:8px;cursor:pointer;touch-action:manipulation;z-index:210;opacity:0;pointer-events:none;transition:opacity .22s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} #reopenBtn.show{opacity:1;pointer-events:all;} #reopenBtn{transition:opacity .22s,border-color .18s,box-shadow .18s;} #reopenBtn:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(0,0,0,.3);} #reopenBtn:hover .reopen-lbl{color:var(--text);} #reopenBtn:hover .reopen-dot{box-shadow:0 0 10px rgba(232,112,58,.85);} .reopen-lbl{font-size:var(--fs-xs);letter-spacing:.18em;color:var(--text-mid);text-transform:uppercase;white-space:nowrap;} .reopen-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px rgba(232,112,58,.5);} #panel-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:var(--safe-bottom);} #panel-body::-webkit-scrollbar{width:2px;} #panel-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;} .tab-panel{display:none;padding:clamp(4px,.7vh,8px) clamp(8px,1.2vw,14px) clamp(8px,1.2vh,14px);} .tab-panel.active{display:block;} .sec{font-size:var(--fs-xxs);letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);margin:clamp(8px,1.2vh,14px) 0 clamp(5px,.8vh,8px);display:flex;align-items:center;gap:7px;} .sec:first-child{margin-top:clamp(2px,.4vh,5px);} .sec::after{content:'';flex:1;height:1px;background:var(--border);} .sec.mat-browse-row::after{display:none;} /* palette/filter buttons take the full row width instead of the divider */ .cfg-pal-row{transition:background .12s ease;} .cfg-pal-row:hover{background:var(--panel3,#1c1c24);} /* hover highlight on saved colour/material rows */ /* ══ ENV CARDS ══ */ .env-scroll{display:flex;gap:6px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;padding-bottom:4px;scroll-snap-type:x mandatory;} .env-scroll::-webkit-scrollbar{display:none;} .env-card{flex-shrink:0;width:clamp(60px,7vw,90px);border-radius:8px;border:1.5px solid var(--border);overflow:hidden;cursor:pointer;touch-action:manipulation;transition:border-color .18s,box-shadow .18s;background:var(--panel3);padding:0;scroll-snap-align:start;-webkit-appearance:none;} .env-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px rgba(232,112,58,.2);} .env-card canvas{width:100%;aspect-ratio:16/9;display:block;} .env-card img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;} .env-card-foot{padding:3px 5px;display:flex;align-items:center;justify-content:space-between;gap:2px;background:var(--panel2);} .env-card-name{font-size:var(--fs-xxs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;} .env-card.active .env-card-name{color:var(--accent);} .env-remove-btn{width:13px;height:13px;border-radius:50%;background:rgba(200,55,40,.75);border:none;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-xxs);color:#fff;line-height:1;padding:0;} .env-add-card{flex-shrink:0;width:clamp(60px,7vw,90px);aspect-ratio:1.2;border-radius:8px;border:1.5px dashed var(--border2);cursor:pointer;touch-action:manipulation;background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;scroll-snap-align:start;-webkit-appearance:none;transition:border-color .15s,background .15s;} .env-add-card:active,.env-add-card.drag-over{background:var(--accent-lo);border-color:var(--accent);} .env-add-icon{font-size:clamp(12px,1.8vw,20px);color:var(--text-dim);line-height:1;} .env-add-lbl{font-size:var(--fs-xxs);color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.3;} #env-drop-zone{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--border2);border-radius:8px;padding:clamp(6px,.9vh,10px) clamp(8px,1.2vw,12px);margin-top:6px;background:var(--panel2);cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s;} #env-drop-zone.drag-over{border-color:var(--accent);background:var(--accent-lo);} .dz-icon{font-size:clamp(14px,2vw,22px);flex-shrink:0;opacity:.45;} .dz-title{font-size:var(--fs-md);color:var(--text-mid);} .dz-sub{font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px;} /* ══ CONTROLS ══ */ .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:clamp(5px,.8vh,9px) 0;border-bottom:1px solid var(--border);} .toggle-row:last-child{border-bottom:none;} .toggle-lbl{font-size:var(--fs-md);color:var(--text-mid);} .toggle{width:clamp(32px,3.5vw,46px);height:clamp(18px,2.2vh,26px);background:var(--border2);border-radius:13px;cursor:pointer;touch-action:manipulation;position:relative;transition:background .18s;flex-shrink:0;} .toggle.on{background:var(--accent);} .toggle::after{content:'';position:absolute;width:calc(100% - 14px);aspect-ratio:1;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .18s;box-shadow:0 1px 4px rgba(0,0,0,.3);} .toggle.on::after{left:calc(100% - 3px);transform:translateX(-100%);} .slider-row{display:flex;align-items:center;gap:8px;padding:clamp(5px,.7vh,8px) 0;border-bottom:1px solid var(--border);} .slider-row:last-child{border-bottom:none;} /* Mobile: more breathing room between sliders across panels (lights, scene, material, env, post-fx) */ @media (max-width:767px){ .lc-row{padding-top:10px;padding-bottom:8px;} .slider-row{padding-top:9px;padding-bottom:9px;} } .slider-lbl{font-size:var(--fs-sm);color:var(--text-mid);width:clamp(60px,7vw,90px);flex-shrink:0;} input[type="range"]{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:var(--border2);border-radius:2px;outline:none;touch-action:none;min-width:0;} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:clamp(16px,1.8vw,22px);height:clamp(16px,1.8vw,22px);border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 0 2px rgba(232,112,58,.18);} .val-badge{font-size:var(--fs-xs);color:var(--text-dim);width:clamp(22px,2.8vw,34px);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;} input[type="color"]{width:clamp(26px,3vw,38px);height:clamp(22px,2.5vh,30px);border:1px solid var(--border2);border-radius:5px;background:none;cursor:pointer;padding:2px;flex-shrink:0;-webkit-appearance:none;} /* Checkbox / radio accent — orange by default everywhere (removes the browser-blue); teal inside the PFX panel (auto-purple in light via --accent2). More-specific existing rules (e.g. .cam-chk, .geo-prow, .hotspot-* checkboxes) keep their own accent. */ input[type="checkbox"],input[type="radio"]{accent-color:var(--accent);} #pfx-panel input[type="checkbox"],#pfx-panel input[type="radio"]{accent-color:var(--accent2);} /* ══ TRANSFORM GIZMO OVERLAY (top-left of viewport) ══ */ #xf-gizmo-bar{position:fixed;top:calc(var(--topbar-h) + var(--safe-top) + 10px);left:10px;display:flex;flex-direction:column;gap:5px;z-index:190;pointer-events:all;} .xf-gizmo-btn{display:flex;align-items:center;gap:6px;height:clamp(28px,3.8vh,38px);padding:0 clamp(8px,1vw,14px);background:var(--vp-btn-bg);border:1px solid var(--border2);border-radius:8px;cursor:pointer;touch-action:manipulation;font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.18em;color:var(--vp-btn-col);transition:border-color .15s,color .15s,background .15s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap;} .xf-gizmo-btn.active{background:linear-gradient(rgba(232,112,58,.30),rgba(232,112,58,.30)),var(--panel2);border-color:var(--accent);color:var(--accent);} .xf-gizmo-btn:hover:not(.active){background:rgba(255,255,255,.04);color:var(--text-mid);} .xf-gizmo-btn.mode-rot.active{background:linear-gradient(rgba(72,192,184,.30),rgba(72,192,184,.30)),var(--panel2);border-color:var(--accent2);color:var(--accent2);} .xf-gizmo-btn.mode-scl.active{background:linear-gradient(rgba(72,200,120,.30),rgba(72,200,120,.30)),var(--panel2);border-color:var(--green);color:var(--green);} #geoBtn.active{background:linear-gradient(rgba(72,192,184,.30),rgba(72,192,184,.30)),var(--panel2);border-color:var(--accent2);color:var(--accent2);} .xf-gizmo-btn.mode-sel.active{background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),var(--panel2);border-color:var(--text-mid);color:var(--text);} /* ══ PHYSICAL EXTRAS ══ */ #physicalExtras{display:none;border-top:1px solid var(--border);margin-top:4px;padding-top:4px;} #physicalExtras.show{display:block;} /* ══ UV TRANSFORM ══ */ #uvTransformSection{display:none;border-top:1px solid var(--border);margin-top:6px;padding-top:2px;} #uvTransformSection.show{display:block;} /* ══ CUSTOM LIGHTS ══ */ #customLightsContainer{margin-top:6px;} .custom-light-block{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(7px,1vh,11px) clamp(8px,1.2vw,12px);margin-bottom:6px;} .custom-light-block:last-child{margin-bottom:0;} .cl-shadow-btn{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border2);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;letter-spacing:.1em;transition:border-color .15s,color .15s;} .cl-shadow-btn.on{border-color:rgba(72,192,184,.4);color:var(--accent2);} .cl-del-btn{font-size:var(--fs-xxs);color:var(--red);background:transparent;border:1px solid rgba(224,80,96,.3);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;letter-spacing:.08em;transition:border-color .15s;} .cl-del-btn:active{border-color:var(--red);} #addLightBtn{width:100%;padding:clamp(8px,1.1vh,12px);background:transparent;color:var(--accent2);font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;border:1px dashed rgba(72,192,184,.35);border-radius:7px;cursor:pointer;touch-action:manipulation;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:7px;transition:border-color .15s,background .15s;-webkit-appearance:none;} #addLightBtn:active{border-color:var(--accent2);background:rgba(72,192,184,.06);} .light-block{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(7px,1vh,11px) clamp(8px,1.2vw,12px);margin-bottom:6px;} .light-block:last-child{margin-bottom:0;} .light-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;} .light-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.18em;color:var(--text);} .light-hdr-right{display:flex;align-items:center;gap:8px;} /* Lights panel — collapsible blocks (accordion, mirrors PFX sections) */ .light-hdr{cursor:pointer;user-select:none;-webkit-user-select:none;} .light-acc-chev{display:inline-flex;align-items:center;color:var(--text-dim);transition:transform .18s ease;flex:0 0 auto;} .light-block.collapsed .light-acc-chev{transform:rotate(-90deg);} .light-block.collapsed{margin-bottom:6px;} .light-block.collapsed .light-hdr{margin-bottom:0;} .light-block.collapsed > :not(.light-hdr){display:none !important;} /* Env panel — collapsible Rendering / Post FX sections (mirrors the lights accordion) */ .env-acc-hdr{cursor:pointer;user-select:none;-webkit-user-select:none;} .env-acc-hdr .env-acc-chev{order:2;display:inline-flex;align-items:center;color:var(--text-dim);transition:transform .18s ease;flex:0 0 auto;margin-left:7px;} .env-acc-hdr::after{order:1;} .env-acc.collapsed .env-acc-chev{transform:rotate(-90deg);} .env-acc.collapsed > :not(.env-acc-hdr){display:none !important;} .light-reset-btn{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border2);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;letter-spacing:.1em;transition:border-color .15s,color .15s;} .light-reset-btn:active{border-color:var(--accent);color:var(--accent);} .light-dot{width:9px;height:9px;border-radius:50%;cursor:pointer;touch-action:manipulation;flex-shrink:0;transition:all .18s;} .light-dot.on{background:var(--accent2);box-shadow:0 0 6px rgba(72,192,184,.5);} .light-dot.off{background:var(--border2);} .lc-row{display:flex;align-items:center;gap:7px;padding:clamp(6px,.9vh,10px) 0 clamp(2px,.3vh,4px);} .lc-lbl{font-size:var(--fs-xs);color:var(--text-dim);width:clamp(28px,3.2vw,42px);flex-shrink:0;} .axis-x{color:#d05060!important;}.axis-y{color:#50b850!important;}.axis-z{color:#4880d0!important;} .light-divider{height:1px;background:var(--border);margin:5px 0 1px;} .light-subsec{font-size:var(--fs-xxs);letter-spacing:.25em;text-transform:uppercase;color:var(--text-dim);margin-top:4px;margin-bottom:1px;} /* ══ SCENE / MODEL LIST ══ */ .model-item{display:flex;align-items:center;gap:8px;padding:clamp(6px,.9vh,10px) clamp(8px,1.2vw,12px);background:var(--panel2);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;touch-action:manipulation;transition:border-color .15s;} .model-item.selected{border-color:var(--accent);background:rgba(232,112,58,.06);} .model-item:last-child{margin-bottom:0;} .model-icon{width:clamp(24px,3vw,34px);height:clamp(24px,3vw,34px);border-radius:6px;background:var(--panel3);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:clamp(11px,1.4vw,16px);} .model-info{flex:1;min-width:0;} .model-name{font-size:var(--fs-sm);color:var(--text);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .model-meta{font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px;} /* Compact model list — tighter rows (the details line is already hidden in JS) */ body.compact-models .model-item{padding:3px 9px;margin-bottom:4px;gap:7px;} body.compact-models .model-icon{width:22px;height:22px;font-size:12px;border-radius:5px;} .model-btns{display:flex;gap:4px;flex-shrink:0;} .model-vis-btn,.model-del-btn{width:clamp(20px,2.5vw,28px);height:clamp(20px,2.5vw,28px);border-radius:5px;border:1px solid var(--border2);background:var(--panel3);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;font-size:clamp(9px,1.1vw,13px);color:var(--text-dim);transition:border-color .15s,color .15s;} .model-del-btn:active{border-color:var(--red);color:var(--red);} .model-vis-btn.hidden-model{opacity:.4;} .no-items{text-align:center;padding:clamp(12px,1.8vh,22px) 0;color:var(--text-dim);font-size:var(--fs-sm);letter-spacing:.12em;} /* Transform */ #transform-panel{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(7px,1vh,11px) clamp(8px,1.2vw,12px);margin-top:8px;display:none;} #transform-panel.show{display:block;} /* Scene panel — Position / Rotation / Scale side by side on desktop */ .xf-transforms{margin-bottom:7px;} @media (min-width:1024px){ #scene-xf-col .xf-transforms{display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:32px;align-items:start;} #scene-xf-col .xf-transforms .xf-group{margin-bottom:0;} #scene-xf-col .xf-transforms .lc-row{gap:4px;} #scene-xf-col .xf-transforms .lc-lbl{width:14px;} #scene-xf-col .xf-transforms .val-badge{min-width:clamp(28px,2.7vw,40px);margin-left:-2px;} } .xf-group{margin-bottom:7px;} .xf-group:last-child{margin-bottom:0;} .xf-label{font-size:var(--fs-xxs);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px;display:flex;align-items:center;gap:6px;} .xf-label::after{content:'';flex:1;height:1px;background:var(--border);} .xf-actions{display:flex;gap:6px;margin-top:8px;} /* Scene-panel accordions (Geometry / Transform) */ #geo-acc{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(7px,1vh,11px) clamp(8px,1.2vw,12px);margin-top:8px;} .sp-acc-hd{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;font-size:var(--fs-xxs);letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim);padding:0 0 7px;} .sp-acc-hd:hover{color:var(--text-mid);} .sp-acc-chev{display:flex;transition:transform .15s ease;} .sp-acc-hd.collapsed .sp-acc-chev{transform:rotate(-90deg);} .sp-acc-bd.collapsed{display:none;} /* Geometry param rows */ .geo-prow{display:flex;align-items:center;gap:7px;padding:clamp(4px,.7vh,8px) 0;} .geo-plbl{font-size:var(--fs-xs);color:var(--text-dim);width:clamp(58px,7vw,86px);flex-shrink:0;} .geo-prow input[type=range]{flex:1;min-width:0;} .geo-pval{font-size:var(--fs-xs);color:var(--text-dim);width:clamp(26px,3vw,38px);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;} .geo-prow select{flex:1;min-width:0;background:var(--panel3);color:var(--text-mid);border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-family:var(--font-body);font-size:var(--fs-xs);cursor:pointer;} .geo-prow input[type=checkbox]{margin:0 auto 0 0;cursor:pointer;width:14px;height:14px;accent-color:var(--accent2);} .geo-pnum{flex-shrink:0;width:clamp(42px,5vw,60px);background:var(--panel3);color:var(--text-mid);border:1px solid var(--border);border-radius:5px;padding:3px 6px;font-family:var(--font-body);font-size:var(--fs-xs);text-align:center;outline:none;-webkit-appearance:none;-moz-appearance:textfield;} /* mat filter */ .mat-filter-btn{flex:1;height:clamp(24px,3vh,30px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:all .15s;-webkit-appearance:none;} .mat-filter-btn.active{background:var(--accent-lo);color:var(--accent);border-color:rgba(232,112,58,.3);} .mat-filter-btn:hover{background:var(--panel3,#20202a);color:var(--text-mid,#dcdce2);border-color:var(--border2,#2a2a33);} .mat-filter-btn:active{transform:translateY(1px);} /* model-library source filter (All / Saved / From projects) */ #lib-src-sec .lib-src-label{flex:0 0 auto;font-size:var(--fs-xxs);letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);} /* mobile + tablet: full-width equal buttons, no line */ #lib-src-sec .lib-src-rule{display:none;} #lib-src-sec .lib-src-wrap{flex:1;display:flex;gap:5px;} /* desktop: standard padded buttons, all equal to the widest ("From projects"); line fills the empty space after them */ @media(min-width:1280px){ #lib-src-sec .lib-src-wrap{flex:0 0 auto;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;} #lib-src-sec .lib-src-wrap .mat-filter-btn{padding:0 12px;} #lib-src-sec .lib-src-rule{display:block;flex:1 1 0;height:1px;background:var(--border);} } /* desktop: list left, editor right */ @media(min-width:900px){ #mat-layout{display:flex;gap:12px;align-items:flex-start;} #mat-left{flex:0 0 clamp(150px,20vw,240px);min-width:0;} #mat-right{flex:1;min-width:0;} #mat-editor{margin-top:0;} } .mesh-item{display:flex;align-items:center;gap:8px;padding:clamp(6px,.9vh,9px) clamp(8px,1.2vw,11px);background:var(--panel2);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;cursor:pointer;touch-action:manipulation;transition:border-color .15s;} .mesh-item.selected{border-color:var(--accent2);} .mesh-item:last-child{margin-bottom:0;} .mesh-item{display:flex;align-items:center;gap:9px;padding:clamp(8px,1.1vh,12px) clamp(10px,1.4vw,14px);background:var(--panel2);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;touch-action:manipulation;transition:border-color .15s;} .mesh-item:last-child{margin-bottom:0;} .mesh-swatch{width:clamp(22px,2.6vw,30px);height:clamp(22px,2.6vw,30px);border-radius:5px;flex-shrink:0;border:1px solid var(--border2);} .mesh-info{flex:1;min-width:0;} .mesh-name{font-size:var(--fs-md);color:var(--text);word-break:break-word;overflow-wrap:anywhere;line-height:1.35;} .mesh-mat-name{font-size:var(--fs-xs);color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mesh-type-badge{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border);border-radius:3px;padding:2px 6px;flex-shrink:0;letter-spacing:.05em;display:none;} /* Mat presets */ .preset-scroll{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;} .preset-scroll::-webkit-scrollbar{display:none;} .mat-preset{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;touch-action:manipulation;padding:clamp(5px,.7vh,8px) clamp(4px,.6vw,7px);border-radius:7px;border:1.5px solid var(--border);background:var(--panel3);transition:border-color .15s;width:clamp(46px,5.5vw,68px);} .mat-preset:active,.mat-preset.active{border-color:var(--accent);} .preset-ball{width:clamp(24px,3vw,38px);height:clamp(24px,3vw,38px);border-radius:50%;flex-shrink:0;} .preset-name{font-size:var(--fs-xxs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);text-align:center;} /* Mat editor */ #mat-editor{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(7px,1vh,11px) clamp(8px,1.2vw,12px);display:none;margin-top:8px;} #mat-editor-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border);} #mat-editor-swatch{width:clamp(18px,2vw,24px);height:clamp(18px,2vw,24px);border-radius:4px;flex-shrink:0;border:1px solid var(--border2);} #mat-editor-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);color:var(--text);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;} #mat-editor-type{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border);border-radius:3px;padding:2px 6px;flex-shrink:0;} #mat-editor.show{display:block;} /* Mat type row */ .mat-type-row{display:flex;align-items:center;gap:8px;padding:clamp(5px,.7vh,8px) 0;border-bottom:1px solid var(--border);} .mat-type-lbl{font-size:var(--fs-sm);color:var(--text-mid);width:clamp(56px,6.5vw,82px);flex-shrink:0;} select.mat-type-select{flex:1;background:var(--panel3);color:var(--text);border:1px solid var(--border2);border-radius:5px;padding:4px 8px;font-family:var(--font-body);font-size:var(--fs-xs);cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;} select.mat-type-select option{background:var(--panel3);} /* Texture slot */ .tex-slot{display:flex;align-items:center;gap:7px;padding:clamp(5px,.7vh,8px) 0;border-bottom:1px solid var(--border);} .tex-slot:last-child{border-bottom:none;} .tex-lbl{font-size:var(--fs-xs);color:var(--text-mid);width:clamp(56px,6.5vw,82px);flex-shrink:0;} .tex-thumb{width:clamp(22px,2.5vw,32px);height:clamp(22px,2.5vw,32px);border-radius:4px;border:1px solid var(--border2);object-fit:cover;flex-shrink:0;background:var(--panel3);display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-dim);cursor:pointer;touch-action:manipulation;overflow:hidden;} .tex-thumb img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:none;} .tex-thumb img.loaded{display:block;} .tex-thumb-label{font-size:var(--fs-xxs);} .tex-upload-btn{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border2);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;letter-spacing:.08em;transition:border-color .15s,color .15s;flex-shrink:0;} .tex-upload-btn:active{border-color:var(--accent2);color:var(--accent2);} .tex-remove-btn{font-size:var(--fs-xxs);color:var(--red);background:transparent;border:1px solid rgba(224,80,96,.3);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;letter-spacing:.08em;display:none;transition:border-color .15s;} .tex-remove-btn.show{display:block;} .tex-remove-btn:active{border-color:var(--red);} .tex-invert-btn{font-size:var(--fs-xxs);color:var(--accent2);background:transparent;border:1px solid rgba(72,192,184,.32);border-radius:4px;padding:2px 7px;cursor:pointer;touch-action:manipulation;display:none;transition:border-color .15s;} .tex-invert-btn.show{display:block;} .tex-invert-btn:active{border-color:var(--accent2);} /* AI generated-map results: cards wrap across the row on desktop/4K, stack full-width on mobile */ .mat-ai-results{flex-wrap:wrap;gap:8px;margin-top:8px;align-items:stretch;} .mat-res-card{display:flex;align-items:center;gap:6px;flex:1 1 200px;min-width:185px;max-width:300px;padding:6px;border:1px solid var(--border2);border-radius:8px;box-sizing:border-box;} .mat-res-prev{width:40px;height:40px;border-radius:7px;object-fit:cover;border:1px solid var(--border2);cursor:zoom-in;flex:0 0 auto;} .mat-res-sel{flex:1 1 auto;min-width:0;width:auto;font-size:var(--fs-xxs);} .mat-res-card select.mat-res-sel,.mat-res-card .mat-res-apply{height:30px;box-sizing:border-box;} .mat-res-apply{flex:0 0 auto;} .mat-res-tag{font-size:var(--fs-xxs);color:var(--accent2);flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} @media(max-width:640px){.mat-res-card{flex:1 1 100%;max-width:none;}} .tex-val{flex:1;} /* ══ INFO ══ */ .info-card{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(9px,1.2vh,14px) clamp(10px,1.4vw,16px);margin-bottom:8px;} .info-card:last-child{margin-bottom:0;} .info-card-title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.15em;color:var(--text);margin-bottom:8px;} .stat-row{display:flex;justify-content:space-between;align-items:center;padding:clamp(4px,.6vh,7px) 0;border-bottom:1px solid var(--border);} .stat-row:last-child{border-bottom:none;} .stat-k{font-size:var(--fs-sm);color:var(--text-dim);} .stat-v{font-size:var(--fs-md);color:var(--accent2);font-family:var(--font-display);font-weight:600;} .stat-v.accent{color:var(--accent);} /* ══ BUTTONS ══ */ .act-btn{width:100%;padding:clamp(8px,1.1vh,12px);background:transparent;color:var(--text-mid);font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--border);border-radius:7px;cursor:pointer;touch-action:manipulation;margin-bottom:6px;display:flex;align-items:center;justify-content:center;gap:7px;transition:border-color .15s,color .15s,background .15s;-webkit-appearance:none;} .act-btn:active{border-color:var(--accent);color:var(--accent);background:var(--accent-lo);} @media (hover:hover){ .act-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lo);} } .act-btn.accent{border-color:var(--accent);color:var(--accent);} @media (hover:hover){ .act-btn.accent:hover{background:var(--accent-lo);color:var(--accent);border-color:var(--accent);} } /* Teal (dark) / purple (light) action button — State + Events capture/add */ .act-btn.tp{border-color:rgba(72,192,184,.4);color:var(--accent2);} .act-btn.tp:active{border-color:var(--accent2);color:var(--accent2);background:rgba(72,192,184,.12);} .act-btn.tp.active{border-color:var(--accent2);color:var(--accent2);background:transparent;} [data-theme="light"] .act-btn.tp.active{border-color:#783ce6;color:#783ce6;background:transparent;} @media (hover:hover){ .act-btn.tp:hover{border-color:var(--accent2);color:var(--accent2);background:rgba(72,192,184,.12);} } [data-theme="light"] .act-btn.tp{border-color:rgba(120,60,230,.4);color:#783ce6;} [data-theme="light"] .act-btn.tp:active{border-color:#783ce6;color:#783ce6;background:rgba(120,60,230,.10);} @media (hover:hover){ [data-theme="light"] .act-btn.tp:hover{border-color:#783ce6;color:#783ce6;background:rgba(120,60,230,.10);} } .act-btn:last-child{margin-bottom:0;} /* ══ AI GENERATE BLOCKS (lighting · material · texture — brand gradient stroke, State-section sizing) ══ */ .ai-gen-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px;} .ai-gen-input{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:8px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-sm);outline:none;border:1px solid transparent;background:linear-gradient(var(--panel2),var(--panel2)) padding-box,var(--ai-grad) border-box;} .ai-gen-input::placeholder{color:var(--text-dim);} .ai-gen-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text);border:1px solid transparent;background:linear-gradient(var(--panel2),var(--panel2)) padding-box,var(--ai-grad) border-box;transition:filter .15s,transform .05s;-webkit-appearance:none;white-space:nowrap;} .ai-gen-btn:hover{filter:brightness(1.3);} .ai-gen-btn:active{transform:translateY(1px);} /* Generating… — spinning brand-gradient border (button is disabled during the call) */ @property --ai-angle{syntax:'';initial-value:0deg;inherits:false;} .ai-gen-btn[disabled]{cursor:progress;opacity:.92;background:linear-gradient(var(--panel2),var(--panel2)) padding-box,conic-gradient(from var(--ai-angle),#783ce6,#e8703a,#783ce6) border-box;animation:ai-rotate .9s linear infinite;} .ai-gen-input.generating{background:linear-gradient(var(--panel2),var(--panel2)) padding-box,conic-gradient(from var(--ai-angle),#783ce6,#e8703a,#783ce6) border-box;animation:ai-rotate .9s linear infinite;} @keyframes ai-rotate{to{--ai-angle:360deg;}} .ai-sub-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-mid);background:var(--panel3);border:1px solid var(--border2);transition:border-color .15s,color .15s;-webkit-appearance:none;white-space:nowrap;} .ai-sub-btn:hover{border-color:var(--ai-accent);color:var(--text);} /* gradient sparkle icon — self-contained SVG (gradient baked in, renders reliably) */ .ai-gen-icon{display:inline-block;width:13px;height:13px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23783ce6'/%3E%3Cstop offset='1' stop-color='%23e8703a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;} .ai-gen-icon-lead{width:16px;height:16px;} /* AI section title — leading icon + bold gradient text */ .ai-sec-title{display:flex;align-items:center;gap:6px;} .ai-sec-title-txt{background:var(--ai-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;} /* AI input/controls bar: one row on desktop, two rows on mobile (#7) */ .ai-gen-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 0 2px;} .ai-gen-bar .ai-gen-input{flex:1 1 150px;width:auto;min-width:0;} @media (max-width:760px){ .ai-gen-bar .ai-gen-input{flex:1 1 100%;} .ai-gen-bar .ai-sub-btn,.ai-gen-bar .ai-gen-btn{flex:1 1 0;justify-content:center;} } /* Desktop: Generate is content-width. Mobile: full width. */ @media (max-width:760px){ .ai-gen-btn{flex:1 1 auto;width:100%;} } /* Sequencer toolbar buttons — hover affordance (#7) */ .seq-icon-btn{background:var(--panel3);color:var(--text-mid);border:1px solid var(--border2);transition:border-color .14s,color .14s,background .14s;} .seq-icon-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lo);} .seq-icon-btn:active{transform:translateY(1px);} .act-btn.danger{border-color:rgba(224,80,96,.3);color:var(--red);} .act-btn.save-btn{border-color:rgba(72,192,184,.35);color:var(--accent2);} .act-btn.active{border-color:var(--accent2);color:var(--accent2);background:rgba(72,192,184,.14);} .act-btn.save-btn:active{border-color:var(--accent2);background:rgba(72,192,184,.08);} /* ══ ABOUT ══ */ .about-card{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:clamp(10px,1.4vh,16px) clamp(11px,1.6vw,18px);margin-bottom:7px;} .about-name{font-family:var(--font-display);font-weight:500;font-size:var(--fs-xl);letter-spacing:.1em;color:var(--text);margin-bottom:2px;} .about-tag{font-family:var(--font-display);font-weight:400;font-size:var(--fs-sm);color:var(--accent);letter-spacing:.08em;margin-bottom:2px;} .about-role{font-size:var(--fs-xs);color:var(--text-dim);letter-spacing:.18em;text-transform:uppercase;} .about-divider{height:1px;background:var(--border);margin:clamp(7px,1vh,12px) 0;} .about-row{display:flex;justify-content:space-between;padding:3px 0;} .about-row-k{font-size:var(--fs-sm);color:var(--text-dim);} .about-row-v{font-size:var(--fs-sm);color:var(--text-mid);} .about-row-v.ver{font-family:var(--font-display);font-weight:600;color:var(--accent);} .cl-item{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--border);} .cl-item:last-child{border-bottom:none;} .cl-dot{width:5px;height:5px;border-radius:50%;background:var(--accent2);margin-top:3px;flex-shrink:0;} .cl-dot.new{background:var(--green);} .cl-text{font-size:var(--fs-sm);color:var(--text-mid);line-height:1.55;} .cl-ver{font-size:var(--fs-xs);letter-spacing:.18em;margin-bottom:6px;font-family:var(--font-display);font-weight:600;} /* ══ TOPBAR MOBILE HAMBURGER ══ */ #tb-hamburger{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;cursor:pointer;touch-action:manipulation;color:var(--text-mid);font-size:var(--fs-xl);flex-shrink:0;} #themeToggleBtnNav{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;cursor:pointer;touch-action:manipulation;color:var(--text-mid);flex-shrink:0;transition:all .15s;} /* Mobile sign-in icon — sits in the old theme-toggle nav slot; accent so it's easy to find. */ #authBtnNav{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--accent-lo);border-radius:7px;cursor:pointer;touch-action:manipulation;color:var(--accent);flex-shrink:0;transition:all .15s;} #authBtnNav svg{width:18px;height:18px;} #authBtnNav:hover{border-color:var(--accent);background:var(--accent-lo);} #tb-dropdown{display:none;position:fixed;top:calc(var(--topbar-h) + var(--safe-top) + 6px);right:10px;background:var(--dropdown-bg);border:1px solid var(--border2);border-radius:10px;padding:8px;z-index:400;min-width:180px;flex-direction:column;gap:5px;backdrop-filter:blur(16px);} #tb-dropdown.open{display:flex;} .tb-drop-btn{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.15em;border:1px solid var(--border2);border-radius:7px;padding:0 14px;height:36px;cursor:pointer;touch-action:manipulation;background:var(--panel2);color:var(--text-mid);width:100%;text-align:left;transition:border-color .15s,color .15s;} .tb-drop-btn.primary{background:var(--accent-lo);color:var(--accent);border-color:rgba(232,112,58,.3);} .tb-drop-btn:hover{border-color:rgba(232,112,58,.5);color:var(--text);} .tb-drop-btn:active{border-color:var(--accent);color:var(--accent);} @media(max-width:1280px){ #tb-right-desktop{display:none;} #tb-hamburger{display:flex;} #authBtnNav{display:flex;} #tb-export-gltf-btn{display:none;} } #mc-camwrap{position:fixed;bottom:calc(var(--panel-h) + 14px);right:12px;width:clamp(140px,18vw,200px);border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#000;z-index:190;transition:opacity .3s,width .3s;backdrop-filter:blur(4px);} #mc-camwrap.hidden{opacity:0;pointer-events:none;width:0;} #panel.closed ~ #mc-camwrap{bottom:calc(50px + var(--safe-bottom));} #mc-webcam{width:100%;display:block;transform:scaleX(-1);} #mc-handcanvas{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1);} #mc-sphere{position:fixed;top:50%;left:50%;transform:translate(-50%,-60%);pointer-events:none;z-index:50;opacity:0;transition:opacity .3s;} #mc-sphere.show{opacity:1;} #mc-toggleBtn{display:flex;align-items:center;gap:6px;height:clamp(28px,3.8vh,38px);padding:0 clamp(8px,1vw,14px);background:var(--vp-btn-bg);border:1px solid var(--border2);border-radius:8px;cursor:pointer;touch-action:manipulation;font-family:var(--font-display);font-weight:600;font-size:var(--fs-xs);letter-spacing:.18em;color:var(--vp-btn-col);backdrop-filter:blur(10px);white-space:nowrap;transition:all .15s;} #mc-toggleBtn:hover:not(.on):not(.gyro-on){background:var(--vp-btn-hov);color:var(--text-mid);} #mc-toggleBtn.on{background:linear-gradient(rgba(107,53,212,.28),rgba(107,53,212,.28)),var(--panel2);border-color:rgba(107,53,212,.55);color:#6b35d4;} .mc-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);flex-shrink:0;transition:all .2s;} #mc-toggleBtn.on .mc-dot{background:#6b35d4;box-shadow:0 0 6px rgba(107,53,212,.6);} #mc-badge{position:fixed;top:calc(var(--topbar-h) + var(--safe-top) + 56px);right:10px;font-family:var(--font-body);font-size:var(--fs-xxs);padding:3px 10px;border-radius:20px;border:1px solid var(--border2);background:rgba(10,10,16,.88);color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;z-index:190;pointer-events:none;opacity:0;transition:opacity .2s;} #mc-badge.show{opacity:1;} #mc-badge.pan{border-color:var(--accent2);color:var(--accent2);} #mc-badge.orbit{border-color:#a060e0;color:#a060e0;} #mc-badge.zoom{border-color:var(--green);color:var(--green);} #mc-badge.locked{border-color:var(--red);color:var(--red);} /* ══ LIBRARY ══ */ .lib-sub-btn{flex:1;height:clamp(24px,3vh,30px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.15em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:all .15s;-webkit-appearance:none;} .lib-sub-btn.active{background:var(--accent-lo);color:var(--accent);border-color:rgba(232,112,58,.3);} .lib-mesh-card{display:flex;align-items:center;gap:9px;padding:clamp(7px,1vh,10px) clamp(9px,1.2vw,13px);background:var(--panel2);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;touch-action:manipulation;transition:border-color .15s;} .lib-mesh-card:last-child{margin-bottom:0;} .lib-mesh-card:hover{border-color:var(--accent2);} .lib-mesh-thumb{width:clamp(36px,5vw,52px);height:clamp(36px,5vw,52px);border-radius:7px;flex-shrink:0;background:var(--panel3);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;overflow:hidden;} .lib-mesh-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:none;} .lib-mesh-thumb img.loaded{display:block;} .lib-mesh-placeholder{font-size:clamp(16px,2.5vw,22px);opacity:.3;} .lib-mesh-info{flex:1;min-width:0;} .lib-mesh-name{font-size:var(--fs-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-weight:600;} .lib-mesh-meta{font-size:var(--fs-xxs);color:var(--text-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .lib-mesh-price{font-size:var(--fs-sm);color:var(--accent2);font-family:var(--font-display);font-weight:600;flex-shrink:0;} .lib-icon-btn{width:clamp(22px,2.8vw,30px);height:clamp(22px,2.8vw,30px);border-radius:6px;border:1px solid var(--border2);background:var(--panel3);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;font-size:clamp(9px,1.1vw,12px);color:var(--text-dim);transition:all .15s;} .lib-icon-btn:active{border-color:var(--accent);color:var(--accent);} .lib-icon-btn.del:active{border-color:var(--red);color:var(--red);} .lib-mat-card{display:flex;align-items:center;gap:9px;padding:clamp(7px,1vh,10px) clamp(9px,1.2vw,13px);background:var(--panel2);border:1px solid var(--border);border-radius:9px;margin-bottom:6px;cursor:pointer;touch-action:manipulation;transition:border-color .15s;} .lib-mat-card:hover{border-color:var(--accent2);} .lib-mat-swatch{width:clamp(32px,4vw,44px);height:clamp(32px,4vw,44px);border-radius:7px;flex-shrink:0;border:1px solid var(--border2);} .lib-mat-name{font-size:var(--fs-sm);color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .lib-mat-type{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border:1px solid var(--border);border-radius:3px;padding:2px 5px;flex-shrink:0;} .preset-ball.dynamic{animation:dynShimmer 2s ease-in-out infinite;} @keyframes dynShimmer{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35);}} .vp-ic{display:flex;align-items:center;justify-content:center;width:clamp(28px,3.8vh,38px);height:clamp(28px,3.8vh,38px);background:var(--vp-btn-bg);border:1px solid var(--border2);border-radius:8px;cursor:pointer;touch-action:manipulation;color:var(--vp-btn-col);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .15s,color .15s,background .15s;} .vp-ic:active,.vp-ic.on{background:rgba(232,112,58,.25);border-color:var(--accent);color:var(--accent);} .vp-ic:hover:not(.on):not(.rot-on){background:var(--vp-btn-hov);color:var(--text-mid);} .vp-ic.rot-on{background:rgba(72,192,184,.25);border-color:var(--accent2);color:var(--accent2);} #vp-iconbar-collapse{display:flex;align-items:center;justify-content:center;width:clamp(28px,3.8vh,38px);height:clamp(28px,3.8vh,38px);background:var(--vp-btn-bg);border:1px solid var(--border2);border-radius:8px;cursor:pointer;touch-action:manipulation;font-size:10px;color:var(--vp-btn-col);backdrop-filter:blur(10px);transition:all .15s;} #vp-iconbar-collapse:hover{background:var(--vp-btn-hov);color:var(--text-mid);} #vpArBtn:hover:not(.on){background:var(--vp-btn-hov)!important;} #vpArBtn.on{background:linear-gradient(rgba(72,192,184,.28),rgba(72,192,184,.28)),var(--panel2)!important;border-color:var(--accent2)!important;} #vp-iconbar-collapse:active{border-color:var(--accent2);color:var(--accent2);} #vp-iconbar-inner{display:flex;flex-direction:column;gap:5px;overflow:hidden;transition:max-height .25s,opacity .2s;max-height:300px;opacity:1;} #vp-iconbar-inner.collapsed{max-height:0;opacity:0;pointer-events:none;} .hier-node{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;touch-action:manipulation;margin-bottom:3px;border:1px solid transparent;transition:all .15s;} .hier-node:hover{background:var(--panel2);}.hier-node.sel{background:rgba(72,192,184,.08);border-color:var(--accent2);} .hier-icon{font-size:10px;color:var(--text-dim);flex-shrink:0;width:14px;text-align:center;}.hier-name{font-size:var(--fs-xs);color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}.hier-badge{font-size:var(--fs-xxs);color:var(--text-dim);background:var(--panel3);border-radius:3px;padding:1px 5px;flex-shrink:0;} .hier-del{font-size:var(--fs-xxs);color:var(--text-dim);flex-shrink:0;padding:0 4px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;line-height:1;} .hier-node:hover .hier-del{opacity:1;} .hier-del:hover{color:var(--red);} .hier-eye{display:inline-flex;align-items:center;justify-content:center;width:16px;flex-shrink:0;color:var(--text-dim);cursor:pointer;opacity:.55;transition:opacity .15s,color .15s;line-height:0;} .hier-eye:hover{opacity:1;color:var(--accent2);} .hier-node.hier-hidden .hier-name{opacity:.4;font-style:italic;} .hier-node.hier-hidden .hier-eye{opacity:.85;color:var(--text-dim);} /* Hierarchy left dock (desktop) — slides in from the left edge; the tool rail shifts right and collapses to icon-only while it's open */ #xf-gizmo-bar{transition:left .24s cubic-bezier(.4,0,.2,1);} #hierDockBtn .ico-tree,#hierDockBtn .ico-back{display:inline-flex;align-items:center;} #hierDockBtn .ico-back{display:none;} /* compact (icon-only) mode — labels collapse via font-size:0, fixed-size SVGs stay */ #xf-gizmo-bar.compact .xf-gizmo-btn, #xf-gizmo-bar.compact #vpArBtn, #xf-gizmo-bar.compact #mc-toggleBtn{font-size:0!important;gap:0!important;padding:0!important;width:40px!important;justify-content:center!important;} /* icon-only mode: enlarge the icons (not the buttons) for legibility */ #xf-gizmo-bar.compact .xf-gizmo-btn > svg, #xf-gizmo-bar.compact #vpArBtn > svg, #xf-gizmo-bar.compact #mc-toggleBtn > svg, #xf-gizmo-bar.compact #hierDockBtn span > svg, #xf-gizmo-bar.compact #railWidthBtn span > svg{width:16px;height:16px;} /* hide the width chevron while the hierarchy panel is open */ #xf-gizmo-bar.panel-open #railWidthBtn{display:none;} /* width chevron (bottom of rail): « when full, » when narrow */ #railWidthBtn .ico-collapse,#railWidthBtn .ico-expand{display:inline-flex;align-items:center;} #railWidthBtn .ico-expand{display:none;} #xf-gizmo-bar.compact #railWidthBtn .ico-collapse{display:none;} #xf-gizmo-bar.compact #railWidthBtn .ico-expand{display:inline-flex;} .rail-width{opacity:.55;margin-top:3px;} .rail-width:hover{opacity:1;} /* rail order: Objects on top, Geometry under it (no DOM move) */ #hierDockBtn{order:-3;} #xf-gizmo-bar > div:has(#geoBtn){order:-2;} /* object dock header buttons + maximize (mirrors PFX/Config) */ .dock-hd-actions{display:flex;align-items:center;gap:6px;} .dock-icon-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border2);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:13px;line-height:1;transition:border-color .15s,color .15s;} .dock-icon-btn:hover{color:var(--text);border-color:var(--accent);} #scene-dock-max{display:none;} /* model rows in the outliner stand out from their child parts */ .hier-node.hier-model{margin-top:3px;} .hier-node.hier-model .hier-name{font-weight:700;color:var(--text);} #scene-dock{position:fixed;top:calc(var(--topbar-h) + var(--safe-top) + 10px);left:10px;width:clamp(210px,17vw,260px);bottom:calc(var(--panel-h) + 16px + var(--footer-h,0px));background:var(--panel);border:1px solid var(--border2);border-radius:12px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:205;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.4);transform:translateX(calc(-100% - 18px));opacity:0;pointer-events:none;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .2s ease;} #scene-dock.open{transform:translateX(0);opacity:1;pointer-events:auto;} #scene-dock-hd{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border);font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.2em;color:var(--accent);flex:0 0 auto;} #scene-dock-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border2);border-radius:6px;color:var(--text-dim);cursor:pointer;font-size:13px;line-height:1;transition:border-color .15s,color .15s;} #scene-dock-close:hover{color:var(--text);border-color:var(--accent);} #scene-dock-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 12px;} #scene-dock-tree:empty::before{content:"Select a model to see its parts";display:block;color:var(--text-dim);font-size:var(--fs-xxs);line-height:1.5;padding:6px 2px;} #scene-dock-body::-webkit-scrollbar{width:3px;} #scene-dock-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;} /* Mobile: hierarchy becomes a closable bottom-sheet object list; maximize to full-screen */ @media(max-width:1279px){ #scene-dock{top:auto;left:0;right:0;bottom:var(--footer-h,0px);width:auto;height:clamp(300px,44vh,480px);border-radius:16px 16px 0 0;transform:translateY(110%);z-index:205;} #scene-dock.open{transform:translateY(0);} #scene-dock-max{display:flex;} #scene-dock.maximized{height:calc(100dvh - var(--topbar-h) - var(--safe-top) - var(--footer-h,0px));max-height:none;} } /* Desktop: hierarchy left, transform right */ @media(min-width:900px){ #scene-split{display:flex;gap:10px;align-items:flex-start;} #scene-hier-col{flex:0 0 clamp(120px,18vw,200px);min-width:0;} #scene-xf-col{flex:1;min-width:0;position:sticky;top:0;align-self:flex-start;} #transform-panel{margin-top:8px;} #scene-hierarchy{margin-top:0;display:block!important;} } @media(min-width:900px){ #mat-right{position:sticky;top:0;align-self:flex-start;} } /* ══ PIVOT MENU ══ */ .pivot-opt{display:block;width:100%;text-align:left;background:none;border:none;padding:6px 10px;font-size:var(--fs-xs);color:var(--text-mid);cursor:pointer;border-radius:6px;font-family:var(--font-body);transition:background .12s,color .12s;} .pivot-opt:hover{background:var(--panel3);color:var(--accent2);} .scope-btn{padding:3px 10px;background:var(--panel2);border:1px solid var(--border2);border-radius:5px;font-size:var(--fs-xxs);color:var(--text-dim);cursor:pointer;font-family:var(--font-body);transition:all .12s;white-space:nowrap;} .scope-btn.active{background:rgba(72,192,184,.1);border-color:var(--accent2);color:var(--accent2);} .ef-lbl{font-size:var(--fs-xxs);color:var(--text-dim);letter-spacing:.1em;margin-bottom:4px;} .ef-sel{width:100%;background:var(--panel3);border:1px solid var(--border2);border-radius:6px;padding:6px 8px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xs);outline:none;cursor:pointer;} .anim-state-card{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;} .anim-state-name{flex:1;font-size:var(--fs-xs);color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .anim-state-preview{font-size:var(--fs-xxs);padding:2px 8px;background:var(--panel3);border:1px solid var(--border2);border-radius:4px;cursor:pointer;color:var(--text-dim);white-space:nowrap;touch-action:manipulation;transition:all .15s;} .anim-state-preview:hover{border-color:var(--accent2);color:var(--accent2);} .anim-state-del{font-size:var(--fs-xxs);color:var(--text-dim);cursor:pointer;opacity:0;padding:0 3px;transition:opacity .15s,color .15s;} .anim-state-card:hover .anim-state-del{opacity:1;} .anim-state-del:hover{color:var(--red);} .anim-event-card{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:5px;} .anim-event-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xxs);color:var(--text-dim);} .anim-ev-chip{background:var(--panel3);border:1px solid var(--border2);border-radius:4px;padding:2px 7px;color:var(--accent2);white-space:nowrap;} .anim-event-del{font-size:var(--fs-xxs);color:var(--text-dim);cursor:pointer;opacity:0;padding:0 3px;transition:opacity .15s,color .15s;margin-left:auto;} .anim-event-card:hover .anim-event-del{opacity:1;} .anim-event-del:hover{color:var(--red);} /* ── ANIM PANEL LAYOUT ──────────────────────────────────── */ #anim-mobile-tabs{display:none;gap:4px;margin-bottom:8px;} #anim-content{display:none;} #anim-content.shown{display:block;} #empty-state.hidden #emptyLoadBtn{pointer-events:none;} .anim-col-tab{flex:1;height:clamp(26px,3.2vh,32px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:all .15s;-webkit-appearance:none;} .anim-col-tab.active{background:var(--accent-lo);border-color:var(--accent);color:var(--accent);} #anim-content.shown{display:block;} @media(min-width:768px){ #anim-mobile-tabs{display:none!important;} #anim-content.shown{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start;} #anim-col-left,#anim-col-behaviors,#anim-col-right{min-width:0;} } @media(max-width:767px){ #anim-mobile-tabs{display:flex;flex-wrap:wrap;} #anim-col-left,#anim-col-behaviors,#anim-col-right{display:none;} #anim-col-left.col-active,#anim-col-behaviors.col-active,#anim-col-right.col-active{display:block;} } /* Sequencer panel — 3 columns (desktop) / one section at a time via tabs (mobile) */ #seq-mobile-tabs{display:none;gap:4px;margin-bottom:8px;} #seq-content{display:block;} .seq-col-tab{flex:1;height:clamp(26px,3.2vh,32px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:all .15s;-webkit-appearance:none;} .seq-col-tab.active{background:var(--accent-lo);border-color:var(--accent);color:var(--accent);} @media(min-width:768px){ #seq-mobile-tabs{display:none!important;} #seq-content{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start;} #seq-col-chapters,#seq-col-overlays,#seq-col-connections{min-width:0;} } @media(max-width:767px){ #seq-mobile-tabs{display:flex;flex-wrap:wrap;} #seq-col-chapters,#seq-col-overlays,#seq-col-connections{display:none;} #seq-col-chapters.col-active,#seq-col-overlays.col-active,#seq-col-connections.col-active{display:block;} } /* Hotspot list cards (Anim → Hotspots column) */ .hotspot-card{display:flex;align-items:center;gap:8px;padding:6px 9px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;margin-bottom:5px;} .hotspot-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--panel2),0 0 0 3px rgba(255,255,255,.08);} .hotspot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;} .hotspot-name{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xs);padding:1px 0;outline:none;-webkit-appearance:none;} .hotspot-name:focus{border-bottom-color:var(--accent);} .hotspot-sub{font-size:var(--fs-xxs);color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .hotspot-del{font-size:var(--fs-sm);color:var(--text-dim);cursor:pointer;padding:0 3px;flex-shrink:0;transition:color .15s;} .hotspot-del:hover{color:var(--red);} .hotspot-card.placing{border-color:var(--accent);background:var(--accent-lo);} .hotspot-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;} .hotspot-pos{background:var(--panel3);border:1px solid var(--border2);border-radius:6px;color:var(--text-mid);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.04em;padding:3px 9px;cursor:pointer;touch-action:manipulation;transition:border-color .15s,color .15s,background .15s;-webkit-appearance:none;} .hotspot-pos:hover{border-color:var(--accent);color:var(--accent);} .hotspot-pos.on{border-color:var(--accent);color:var(--accent);background:var(--accent-lo);} .hotspot-follow{display:flex;align-items:center;gap:5px;font-size:var(--fs-xxs);color:var(--text-dim);cursor:pointer;user-select:none;} .hotspot-follow input{accent-color:var(--accent);cursor:pointer;flex-shrink:0;} .hotspot-show{display:flex;align-items:center;gap:6px;font-size:var(--fs-xxs);color:var(--text-mid);cursor:pointer;user-select:none;margin-bottom:9px;} .hotspot-show input{accent-color:var(--accent);cursor:pointer;flex-shrink:0;} /* Per-hotspot trigger editor */ .hotspot-editor{margin:-2px 0 7px;padding:9px;border:1px solid var(--border2);border-left:2px solid var(--accent);border-radius:0 8px 8px 0;background:var(--panel3);display:flex;flex-direction:column;gap:7px;} .hs-ed-row{display:flex;flex-direction:column;gap:3px;} .hs-ed-lbl{font-size:var(--fs-xxs);color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;} .hs-ed-inp,.hs-ed-area,.hs-ed-sel,.hs-ed-num{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xxs);padding:5px 7px;outline:none;-webkit-appearance:none;} .hs-ed-area{resize:vertical;line-height:1.5;} .hs-ed-sel{cursor:pointer;} .hs-ed-num{width:72px;} .hs-ed-inp:focus,.hs-ed-area:focus,.hs-ed-sel:focus,.hs-ed-num:focus{border-color:var(--accent);} .hs-ed-imgctl{display:flex;align-items:center;gap:8px;} .hs-ed-thumb{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--border2);} .hs-ed-mini,.hs-ed-cap{background:var(--panel2);border:1px solid var(--border2);border-radius:6px;color:var(--text-mid);font-family:var(--font-body);font-size:var(--fs-xxs);padding:5px 9px;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;} .hs-ed-cap{color:var(--accent);border-color:rgba(232,112,58,.4);} .hs-ed-mini:hover,.hs-ed-cap:hover{border-color:var(--accent);color:var(--accent);} .hs-ed-note{font-size:var(--fs-xxs);color:var(--text-dim);line-height:1.45;} .hs-ed-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-xxs);color:var(--text-mid);cursor:pointer;user-select:none;} .hs-ed-check input{accent-color:var(--accent);cursor:pointer;} .hs-ed-vis{display:flex;flex-direction:column;gap:6px;padding-bottom:7px;margin-bottom:1px;border-bottom:1px dashed var(--border2);} .hs-ed-row2{display:flex;align-items:center;gap:6px;padding-left:22px;} .hs-ed-row2 .hs-ed-lbl{margin:0;} .hs-ed-row2 .hs-ed-num{width:60px;} .hs-ed-color{width:34px;height:24px;padding:0;border:1px solid var(--border2);border-radius:6px;background:var(--panel2);cursor:pointer;} .hs-mk{--mk:#e8703a;width:14px;height:14px;border-radius:50%;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;line-height:1;box-sizing:border-box;background:var(--mk);border:1px solid rgba(255,255,255,.5);} .hs-mk.s-s{width:10px;height:10px;font-size:8px;} .hs-mk.s-l{width:20px;height:20px;font-size:12px;} .hs-mk.t-ring{background:transparent;border:2px solid var(--mk);color:var(--mk);} .hs-mk.t-pulse{box-shadow:0 0 0 0 var(--mk);animation:hsMkPulse 1.6s ease-out infinite;} @keyframes hsMkPulse{0%{box-shadow:0 0 0 0 var(--mk);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}} .hs-zoom-cfg{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:7px;} .hs-zoom-hd{font-size:var(--fs-xxs);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);} .hs-zoom-note{font-size:var(--fs-xxs);color:var(--text-dim);line-height:1.45;} .hs-zoom-row{display:flex;align-items:center;justify-content:space-between;gap:8px;} .hs-zoom-row label{font-size:var(--fs-xxs);color:var(--text-mid);} .hs-zoom-row select,.hs-zoom-row input{background:var(--panel2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xxs);padding:4px 7px;outline:none;-webkit-appearance:none;} .hs-zoom-row select{flex:1;cursor:pointer;} .hs-zoom-row input{width:70px;text-align:center;} .hs-zoom-row select:focus,.hs-zoom-row input:focus{border-color:var(--accent);} .hide-full{display:flex;align-items:center;gap:4px;} .hide-compact{display:none;} /* ── MOBILE FONT + BUTTON OVERRIDES ─────────────────────── */ @media(max-width:767px){ :root{--fs-xxs:9px;--fs-xs:10.5px;--fs-sm:12px;--fs-md:13px;} .sec{font-size:var(--fs-xs);} .xf-gizmo-btn,#mc-toggleBtn,#mc-camViewBtn,#vpArBtn{font-size:7px;letter-spacing:.1em;} #scrollCaptureBtn{flex:0 0 auto!important;max-width:120px;} #animCaptureBtn,#animAddEventBtn{flex-shrink:0;} #miniInfoBtn{display:none!important;} #mini-info-tip{display:none!important;} .hide-full{display:none!important;} .hide-compact{display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--accent2);} } /* ── AR LIGHTING SELECTOR ───────────────────────────────── */ .ar-lit-btn{flex:1;padding:7px 4px;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.08em;cursor:pointer;touch-action:manipulation;transition:all .15s;-webkit-appearance:none;} .ar-lit-btn.active{background:rgba(232,112,58,.12);border-color:var(--accent);color:var(--accent);} #ar-cam-section{margin-bottom:10px;text-align:left;} #ar-cam-thumb{display:none;width:100%;aspect-ratio:2/1;border-radius:8px;overflow:hidden;margin-bottom:8px;border:1px solid var(--border2);} #ar-cam-thumb img{width:100%;height:100%;object-fit:cover;display:block;} /* ── GYRO MODE INDICATOR ────────────────────────────────── */ #mc-toggleBtn.gyro-on{background:linear-gradient(rgba(72,192,184,.24),rgba(72,192,184,.24)),var(--panel2);border-color:var(--accent2);color:var(--accent2);} #gyro-badge{display:none;position:fixed;top:12px;left:50%;transform:translateX(-50%);background:rgba(72,192,184,.15);border:1px solid var(--accent2);border-radius:20px;padding:4px 14px;font-size:var(--fs-xxs);color:var(--accent2);letter-spacing:.15em;z-index:200;pointer-events:none;} #gyro-badge.show{display:block;} /* ── CAPTURE / ADD BUTTON WIDTHS ────────────────────────── */ #animCaptureBtn,#animAddEventBtn,#scrollCaptureBtn{flex-shrink:1;max-width:70%;} @media(max-width:767px){ #animCaptureBtn,#animAddEventBtn,#scrollCaptureBtn{max-width:60%;} } .scroll-kf-card{display:flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-bottom:5px;} .scroll-kf-pct{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--accent);font-weight:700;min-width:36px;flex-shrink:0;} .scroll-kf-info{font-size:var(--fs-xxs);color:var(--text-dim);flex:1;letter-spacing:.06em;} .scroll-kf-btn{width:22px;height:22px;border-radius:5px;border:1px solid var(--border2);background:var(--panel3);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;font-size:var(--fs-xxs);color:var(--text-dim);flex-shrink:0;transition:border-color .15s,color .15s;line-height:1;} .scroll-kf-btn:hover{border-color:var(--accent2);color:var(--accent2);} .scroll-kf-btn.del:hover{border-color:var(--red);color:var(--red);} #scroll-col-divider{border:none;border-top:1px solid var(--border);margin:10px 0;} /* anim preview active state */ #animPreviewBtn.active{background:rgba(72,192,184,.1);border-color:var(--accent2);color:var(--accent2);} .ai-api-btn{flex:1;height:clamp(30px,3.5vh,38px);background:var(--panel3);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--border);border-radius:7px;cursor:pointer;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s;} .ai-api-btn.active{background:rgba(160,100,255,.12);color:#c080ff;border-color:rgba(160,100,255,.4);} /* Higgsfield — orange active state overrides purple in both themes */ #apiToggleHiggsfield.active{background:rgba(255,152,80,.15) !important;border-color:rgba(255,152,80,.55) !important;color:#ff9850 !important;} /* ── AI Tools + About + Projects modals — wider on desktop ── */ @media (min-width: 1280px) { #ai-modal-inner { max-width: 800px !important; } #about-modal-inner { max-width: 800px !important; } #projects-modal-inner { max-width: 800px !important; } } /* Projects browser — wider on larger screens so the feature filter pills fit one row */ @media (min-width: 1024px) { #projects-browser-inner { max-width: 920px !important; } } @media (min-width: 1320px) { #projects-browser-inner { max-width: 1080px !important; } } /* ── Gemini resolution buttons ── */ .ai-res-btn{padding:4px 14px;background:var(--panel3);border:1px solid var(--border2);border-radius:5px;color:var(--text-mid);font-family:var(--font-body);font-size:var(--fs-xxs);font-weight:700;cursor:pointer;touch-action:manipulation;transition:all .15s;letter-spacing:.1em;-webkit-appearance:none;} .ai-res-btn.active{background:rgba(160,100,255,.18);border-color:rgba(160,100,255,.5);color:#c080ff;} [data-theme="light"] .ai-res-btn.active{background:rgba(107,53,212,.16) !important;border-color:rgba(107,53,212,.55) !important;color:#6b35d4 !important;} /* ── History sub-tabs ── */ .ai-history-sub{flex:1;height:34px;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;cursor:pointer;touch-action:manipulation;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xxs);letter-spacing:.12em;color:var(--text-dim);transition:all .15s;padding:0 4px;-webkit-appearance:none;} .ai-history-sub.active{background:rgba(160,100,255,.18);border-color:rgba(160,100,255,.45);color:#d0a0ff;} [data-theme="light"] .ai-history-sub.active{background:rgba(107,53,212,.18) !important;border-color:rgba(107,53,212,.5) !important;color:#6b35d4 !important;} .ai-style-card{background:var(--panel3);border:1px solid var(--border);border-radius:9px;padding:clamp(8px,1.2vh,12px) 8px;cursor:pointer;touch-action:manipulation;text-align:center;transition:all .15s;} .ai-style-card:hover{border-color:rgba(160,100,255,.4);} .ai-style-card.active{background:rgba(160,100,255,.1);border-color:rgba(160,100,255,.6);} .ai-style-icon{font-size:clamp(18px,2.5vw,24px);margin-bottom:4px;} .ai-style-name{font-size:var(--fs-xxs);color:var(--text-mid);letter-spacing:.1em;text-transform:uppercase;} #loading{position:fixed;inset:0;background:rgba(7,7,10,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .22s;} #loading.active{opacity:1;pointer-events:all;} .spinner{width:clamp(30px,4vw,44px);height:clamp(30px,4vw,44px);border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .78s linear infinite;} .load-text{margin-top:14px;font-size:var(--fs-sm);letter-spacing:.3em;color:var(--text-dim);text-transform:uppercase;} @keyframes spin{to{transform:rotate(360deg);}} #toast{position:fixed;bottom:calc(var(--panel-h) + 10px);left:50%;transform:translateX(-50%) translateY(8px);background:var(--panel3);border:1px solid var(--border2);border-radius:20px;padding:6px 16px;font-size:var(--fs-sm);color:var(--text-mid);letter-spacing:.07em;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;z-index:400;pointer-events:none;} #toast.show{opacity:1;transform:translateX(-50%) translateY(0);} #toast.panel-closed{bottom:calc(44px + var(--safe-bottom));} /* ── SCROLL TIMELINE: hide Snap mode on mobile (CSS scroll-snap conflicts with touch scroll) */ @media (max-width: 768px) { button.ev-mode-btn[data-mode="snap-b"] { display: none !important; } } /* ── BG Color swatches */ .bg-swatch.active { border-color: var(--accent) !important; } .bg-swatch:hover { border-color: rgba(255,255,255,.5) !important; } /* ══════════════════════════════════════════════════════════ THEME TOGGLE BUTTON ══════════════════════════════════════════════════════════ */ #themeToggleBtn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;touch-action:manipulation;transition:all .15s;padding:0;} #themeToggleBtn:hover{border-color:var(--accent2);color:var(--accent2);} /* ══════════════════════════════════════════════════════════ GEOMETRY TOOLBAR ══════════════════════════════════════════════════════════ */ .geo-prim-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background:var(--panel2);border:1px solid var(--border);border-radius:7px;cursor:pointer;touch-action:manipulation;color:var(--text-mid);font-size:8px;font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;transition:all .12s;-webkit-appearance:none;} .geo-prim-btn:hover{background:var(--panel3);border-color:var(--accent2);color:var(--accent2);} .geo-prim-btn svg{width:22px;height:22px;flex-shrink:0;} /* ══════════════════════════════════════════════════════════ LIGHT THEME TOKENS Edit these values to customize light mode. Dark mode tokens live in :root above — fully independent. ══════════════════════════════════════════════════════════ */ /* ── GRAPHITE theme — neutral bluish-graphite dark; keeps the brand accents (orange/teal/purple) ── */ [data-theme="graphite"] { --bg:#161619; --panel:rgba(30,30,36,.97); --panel2:#222228; --panel3:#2b2b32; --border:#33333c; --border2:#41414c; --text:#f2f2f7; --text-mid:#aeaebc; --text-dim:#7a7a88; --scene-bg:#121216; --topbar-bg: rgba(34,34,40,.94); --dropdown-bg: rgba(25,25,30,.98); --vp-btn-bg: rgba(34,34,41,.98); --vp-btn-col: var(--text-mid); --vp-btn-hov: rgba(52,52,62,.98); --popup-bg: rgba(25,25,30,.98); --reopen-bg: rgba(28,28,33,.96); --ai-accent:#8b5cf6; --ai-grad:linear-gradient(135deg,#8b5cf6,#e8703a); } /* Graphite: brighter (AI-toned) purple on the Magic Cam active state */ [data-theme="graphite"] #mc-toggleBtn.on{background:linear-gradient(rgba(139,92,246,.30),rgba(139,92,246,.30)),var(--panel2);border-color:rgba(139,92,246,.6);color:#a78bfa;} [data-theme="graphite"] #mc-toggleBtn.on .mc-dot{background:#a78bfa;box-shadow:0 0 6px rgba(139,92,246,.6);} [data-theme="light"] { /* backgrounds — mid light grey (Sajjad-tuned in Design Tokens) */ --bg: #cfcfd3; --panel: rgba(218,218,220,0.98); --panel2: #e4e4e6; --panel3: #ebebee; /* borders — low-contrast vs surfaces so edges recede; border2 = the more-visible edge */ --border: #cdcdd0; --border2: #b4b4b7; /* text */ --text: #121218; --text-mid: #2d2d34; --text-dim: #6e6e73; /* primary accent — slightly richer orange for light bg */ --accent: #e45c3c; --accent-lo: rgba(228,92,60,.12); /* secondary accent — PURPLE replaces teal in light mode */ --accent2: #6b35d4; /* status */ --green: #1a8040; --red: #b02030; --yellow: #a06800; /* surface tokens — kept in step with the mid panels */ --topbar-bg: rgba(216,216,218,0.97); --dropdown-bg: rgba(220,220,225,.99); --vp-btn-bg: rgba(206,206,214,.82); --vp-btn-col: #1a1a22; --vp-btn-hov: rgba(232,232,238,.9); --popup-bg: rgba(216,216,221,.99); --reopen-bg: rgba(210,210,217,.96); --scene-bg: #d2d2d6; --primary-btn-text: #ffffff; } /* ── Inline-styled elements (use variables so token edits cascade) ── */ [data-theme="light"] #vpArBtn { background: var(--vp-btn-bg) !important; color: var(--vp-btn-col) !important; } [data-theme="light"] #vpArBtn:hover:not(.on) { background: var(--vp-btn-hov) !important; color: #6b35d4 !important; } [data-theme="light"] #vp-sel-name { background: var(--vp-btn-bg) !important; color: #f0f0f0 !important; } [data-theme="light"] #mini-info-tip { background: var(--popup-bg) !important; } [data-theme="light"] #snapMenu, [data-theme="light"] #pivotMenu, [data-theme="light"] #geoPanel { background: var(--popup-bg) !important; } /* ── GEO button: neutral default, purple hover (no teal) ─────────── */ [data-theme="light"] #geoBtn { color: var(--vp-btn-col) !important; border-color: var(--border2) !important; } [data-theme="light"] #geoBtn:hover { color: var(--accent2) !important; border-color: rgba(107,53,212,.5) !important; } /* ── MAGIC button .on: same purple as base, slightly bolder for light ─ */ [data-theme="light"] #mc-toggleBtn.on { background: linear-gradient(rgba(107,53,212,.18),rgba(107,53,212,.18)),var(--panel2); border-color: rgba(107,53,212,.65); color: #6b35d4; } /* ── Gyro-on: teal bg is hardcoded — override to purple in light ───── */ [data-theme="light"] #mc-toggleBtn.gyro-on { background: linear-gradient(rgba(107,53,212,.14),rgba(107,53,212,.14)),var(--panel2); border-color: #6b35d4; color: #6b35d4; } /* ── act-btn: slightly thicker borders + bolder text in light mode ─── */ [data-theme="light"] .act-btn { border-width: 1.5px; color: var(--text-mid); } [data-theme="light"] .act-btn:hover { border-color: var(--border); color: var(--text); } [data-theme="light"] .act-btn.save-btn { border-color: rgba(107,53,212,.4); color: var(--accent2); } [data-theme="light"] .act-btn.save-btn:active { border-color: var(--accent2); background: rgba(107,53,212,.1); } /* Capture / Add buttons that have hardcoded teal inline borders */ [data-theme="light"] #animCaptureBtn, [data-theme="light"] #animAddEventBtn { border-color: rgba(107,53,212,.45) !important; border-width: 1.5px !important; } [data-theme="light"] #scrollCaptureBtn { border-width: 1.5px !important; } /* ── Modals ──────────────────────────────────────────────────────── */ [data-theme="light"] #about-modal { background: rgba(13,13,19,.96) !important; } [data-theme="light"] #export-viewer-modal > div { background: var(--panel2); } [data-theme="light"] #ar-overlay { background: rgba(155,155,162,.78); } [data-theme="light"] #ai-render-modal { background: rgba(158,158,164,.97); } /* ── Logo: topbar MESH letters dark; about modal stays light on dark bg ── */ [data-theme="light"] #mm-logo svg > g path, [data-theme="light"] #mm-logo svg > g polygon { fill: #1a1a22 !important; } [data-theme="light"] #mm-logo-about svg > g path, [data-theme="light"] #mm-logo-about svg > g polygon { fill: #e8e6eb !important; } [data-theme="light"] #mm-logo-home svg > g path, [data-theme="light"] #mm-logo-home svg > g polygon { fill: #1a1a22 !important; } /* ── Gizmo active: POS→orange ROT→purple SCL→green ─────────── */ [data-theme="light"] .xf-gizmo-btn.active { background: linear-gradient(rgba(228,92,60,.18),rgba(228,92,60,.18)),var(--panel2); border-color: rgba(228,92,60,.65); color: #e45c3c; } [data-theme="light"] .xf-gizmo-btn.mode-rot.active { background: linear-gradient(rgba(107,53,212,.18),rgba(107,53,212,.18)),var(--panel2); border-color: rgba(107,53,212,.65); color: #6b35d4; } [data-theme="light"] .xf-gizmo-btn.mode-scl.active { background: linear-gradient(rgba(26,128,64,.18),rgba(26,128,64,.18)),var(--panel2); border-color: rgba(26,128,64,.65); color: #1a8040; } /* ── Inputs ──────────────────────────────────────────────────────── */ [data-theme="light"] input[type="range"] { accent-color: var(--accent); } [data-theme="light"] input[type="color"] { background: var(--panel2); border-color: var(--border2); } /* ── Scrollbars ──────────────────────────────────────────────────── */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--panel2); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); } /* ══════════════════════════════════════════════════════════ AI TOOLS — TABS, MESHY COMPONENTS Base styles (dark mode): use light purple #c080ff / rgba(160,100,255,...) Light mode: override to rich purple #6b35d4 ══════════════════════════════════════════════════════════ */ .ai-tab-btn{flex:1;height:36px;background:transparent;border:none;border-radius:7px;cursor:pointer;touch-action:manipulation;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xxs);letter-spacing:.12em;color:var(--text-dim);transition:all .15s;padding:0 4px;-webkit-appearance:none;} .ai-tab-btn.active{background:rgba(160,100,255,.18);color:#d0a0ff;} .ai-tab-btn:hover:not(.active){color:var(--text-mid);} .meshy-style-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;cursor:pointer;touch-action:manipulation;color:var(--text-dim);font-size:var(--fs-xxs);font-family:var(--font-body);letter-spacing:.08em;transition:all .12s;-webkit-appearance:none;} .meshy-style-btn.active{background:rgba(160,100,255,.18);border-color:rgba(160,100,255,.55);color:#d0a0ff;} .meshy-style-btn:hover:not(.active){border-color:rgba(160,100,255,.3);color:var(--text-mid);} .meshy-style-icon{font-size:16px;} #meshy-img-drop{transition:border-color .15s;} #meshy-img-drop:hover,#meshy-img-drop.drag-over{border-color:rgba(160,100,255,.6);color:var(--text-mid);} /* ── AI Tools light mode: replace all light purple with #6b35d4 ── */ [data-theme="light"] .ai-tab-btn { color: var(--text-dim); } [data-theme="light"] .ai-tab-btn.active { background: rgba(107,53,212,.20); color: #6b35d4; } [data-theme="light"] .ai-tab-btn:hover:not(.active) { color: #4a28a8; } [data-theme="light"] .meshy-style-btn.active { background: rgba(107,53,212,.22); border-color: rgba(107,53,212,.6); color: #6b35d4; } [data-theme="light"] .meshy-style-btn:hover:not(.active) { border-color: rgba(107,53,212,.35); color: #6b35d4; } [data-theme="light"] #meshy-img-drop:hover, [data-theme="light"] #meshy-img-drop.drag-over { border-color: rgba(107,53,212,.55); } /* AI modal buttons with inline purple styles */ [data-theme="light"] #aiEngineerBtn { background: rgba(107,53,212,.14) !important; border-color: rgba(107,53,212,.5) !important; color: #6b35d4 !important; } [data-theme="light"] #aiRenderRunBtn { background: linear-gradient(135deg,rgba(107,53,212,.22),rgba(70,40,180,.18)) !important; border-color: rgba(107,53,212,.6) !important; color: #6b35d4 !important; } [data-theme="light"] #meshyText3dBtn, [data-theme="light"] #meshyImage3dBtn { background: linear-gradient(135deg,rgba(107,53,212,.22),rgba(70,40,180,.18)) !important; border-color: rgba(107,53,212,.6) !important; color: #6b35d4 !important; } [data-theme="light"] #meshyText3dLoadBtn, [data-theme="light"] #meshyImage3dLoadBtn { background: rgba(107,53,212,.18) !important; border-color: rgba(107,53,212,.55) !important; color: #6b35d4 !important; } [data-theme="light"] #meshy-result-text3d, [data-theme="light"] #meshy-result-image3d { border-color: rgba(107,53,212,.35) !important; } [data-theme="light"] #meshy-bar-text3d, [data-theme="light"] #meshy-bar-image3d { background: linear-gradient(90deg,#5520b0,#6b35d4) !important; } [data-theme="light"] #meshy-status-text3d, [data-theme="light"] #meshy-status-image3d { color: #6b35d4 !important; } [data-theme="light"] #meshyKeySection { border-color: rgba(107,53,212,.28) !important; } /* ══════════════════════════════════════════════════════════ LIGHT MODE — ADDITIONAL FIXES & IMPROVEMENTS ══════════════════════════════════════════════════════════ */ /* ── Version badge — white text, light gray bg (lighter than topbar) ── */ [data-theme="light"] .tb-version { color: #fff; background: rgba(210,210,216,.75); border-color: rgba(192,192,200,.9); } /* ── Hide mini info button globally (redundant, About modal covers it) ── */ #miniInfoBtn { display: none !important; } /* ── Topbar secondary btn hover — soft fill instead of orange stroke ── */ [data-theme="light"] .tb-btn-sec:hover { background: rgba(35,35,48,.10); border-color: var(--border2); color: var(--text); } /* ── Theme toggle mobile nav btn hover ── */ [data-theme="light"] #themeToggleBtnNav:hover { border-color: var(--accent2); color: var(--accent2); } /* Override hardcoded teal inline border on dropdown theme btn ── */ [data-theme="light"] #themeToggleBtnMob { border-color: rgba(107,53,212,.30) !important; color: var(--accent2) !important; } /* ── Gizmo left bar hover — use the lighter vp-btn-hov token ── */ [data-theme="light"] .xf-gizmo-btn:hover:not(.active) { background: var(--vp-btn-hov); color: var(--text); } /* ── AR button: purple tint in light mode ── */ [data-theme="light"] #vpArBtn.on { background: linear-gradient(rgba(107,53,212,.18),rgba(107,53,212,.18)),var(--panel2) !important; border-color: rgba(107,53,212,.6) !important; color: #6b35d4 !important; } [data-theme="light"] #vpArBtn { border-color: rgba(107,53,212,.35) !important; color: #6b35d4 !important; } /* ── Loading overlay ── */ [data-theme="light"] #loading { background: rgba(180,180,185,.90); } [data-theme="light"] #loading .load-text { color: var(--text-mid); } /* ── Magic cam badge ── */ [data-theme="light"] #mc-badge { background: var(--vp-btn-bg); border-color: var(--border2); color: var(--text-dim); } [data-theme="light"] #mc-badge.pan { border-color: var(--accent2); color: var(--accent2); } [data-theme="light"] #mc-badge.orbit { border-color: #6b35d4; color: #6b35d4; } [data-theme="light"] #mc-badge.zoom { border-color: var(--green); color: var(--green); } [data-theme="light"] #mc-badge.locked { border-color: var(--red); color: var(--red); } /* ── Hierarchy selected node — purple tint ── */ [data-theme="light"] .hier-node.sel { background: rgba(107,53,212,.08); border-color: var(--accent2); } /* ── Scope btn active — purple tint ── */ [data-theme="light"] .scope-btn.active { background: rgba(107,53,212,.10); border-color: var(--accent2); color: var(--accent2); } /* ── Light dot glow — purple ── */ [data-theme="light"] .light-dot.on { box-shadow: 0 0 6px rgba(107,53,212,.45); } /* ── Add Light button — purple style ── */ [data-theme="light"] #addLightBtn { border-color: rgba(107,53,212,.35); color: var(--accent2); border-width: 2px; } [data-theme="light"] #addLightBtn:active { border-color: var(--accent2); background: rgba(107,53,212,.07); } /* ── Empty state icon — darker strokes + more opaque ── */ [data-theme="light"] .es-icon { opacity: .52; } [data-theme="light"] .es-icon polygon, [data-theme="light"] .es-icon line { stroke: #282838; } /* ── Browse file & panel action buttons — thicker borders ── */ [data-theme="light"] .act-btn { border-width: 2px; } [data-theme="light"] #emptyLoadBtn { border-width: 2px; border-color: rgba(228,92,60,.58); } [data-theme="light"] .tex-upload-btn { border-width: 1.5px; color: var(--text-mid); } [data-theme="light"] .light-reset-btn { border-width: 1.5px; } [data-theme="light"] .cl-shadow-btn { border-width: 1.5px; } [data-theme="light"] .scroll-kf-btn { border-width: 1.5px; } [data-theme="light"] .lib-icon-btn { border-width: 1.5px; } [data-theme="light"] .model-vis-btn, [data-theme="light"] .model-del-btn { border-width: 1.5px; } /* ── About modal inner — keep dark bg, restore dark-mode text colors ── */ [data-theme="light"] #about-modal .about-card { background: #12121a; border-color: #1c1c28; } [data-theme="light"] #about-modal .about-name { color: #e0e0ec; } [data-theme="light"] #about-modal .about-tag { color: #e8703a; } [data-theme="light"] #about-modal .about-role { color: #52526a; } [data-theme="light"] #about-modal .about-divider { background: #1c1c28; } [data-theme="light"] #about-modal .about-row-k { color: #52526a; } [data-theme="light"] #about-modal .about-row-v { color: #8888a0; } [data-theme="light"] #about-modal .about-row-v.ver { color: #e8703a; } [data-theme="light"] #about-modal .cl-ver { color: #707088; } [data-theme="light"] #about-modal .cl-dot { background: #48c0b8; } [data-theme="light"] #about-modal .cl-dot.new { background: #48c878; } [data-theme="light"] #about-modal .cl-text { color: #c4c4d8; } [data-theme="light"] #about-modal .sec { color: #52526a; } [data-theme="light"] #about-modal .sec::after { background: #1c1c28; } [data-theme="light"] #about-modal > div:last-child { border-color: #1c1c28 !important; color: #52526a; } /* ── AI Tools topbar buttons — rich purple ── */ [data-theme="light"] #aiRenderBtn, [data-theme="light"] #aiRenderBtnMob { color: #6b35d4 !important; border-color: rgba(107,53,212,.40) !important; } /* ── AI provider tabs (GPT Image 2, Nano Banana) — darker in light mode ── */ [data-theme="light"] .ai-api-btn { color: var(--text-mid); } [data-theme="light"] .ai-api-btn.active { background: rgba(107,53,212,.15); color: #6b35d4; border-color: rgba(107,53,212,.50); } [data-theme="light"] .ai-api-btn:hover:not(.active) { color: var(--text); } /* Higgsfield — orange theme, no purple fill ── */ [data-theme="light"] #apiToggleHiggsfield { color: #b03000 !important; border-color: rgba(185,65,0,.38) !important; } [data-theme="light"] #apiToggleHiggsfield.active { background: rgba(228,92,60,.12) !important; color: #b03000 !important; border-color: rgba(228,92,60,.52) !important; } /* ── #themeToggleBtn now shows next to the logo on every breakpoint (mobile included); the nav slot holds the sign-in icon (#authBtnNav). ── */ /* ── SNAP btn active — darker text on orange fill (#4) ── */ [data-theme="light"] #snapBtn.active { color: #7a2a00 !important; } /* ── PIVOT btn — neutral in light mode; inline gold #ffbe50 reads poorly on light bg (dark mode keeps gold) ── */ [data-theme="light"] #pivotBtn { color: var(--text-mid) !important; border-color: var(--border2) !important; } [data-theme="light"] #pivotBtn:hover { color: var(--text-mid) !important; } /* ── GEO btn active — purple theme, not orange (#6) ── */ [data-theme="light"] #geoBtn.active { background: linear-gradient(rgba(107,53,212,.16),rgba(107,53,212,.16)),var(--panel2) !important; border-color: rgba(107,53,212,.55) !important; color: #6b35d4 !important; } /* GEO btn base — keep purple/accent2 identity in light mode ── */ [data-theme="light"] #geoBtn { border-color: rgba(107,53,212,.30) !important; color: var(--accent2) !important; } /* ── Select tool active — neutral (light) ── */ [data-theme="light"] .xf-gizmo-btn.mode-sel.active { background: linear-gradient(rgba(0,0,0,.07),rgba(0,0,0,.07)),var(--panel2); border-color: var(--text-mid); color: var(--text); } /* ── Panel tab active — slightly bold for orange accent (#8) ── */ [data-theme="light"] .tab-btn.active { font-weight: 700; } /* ── Remaining teal → purple in light mode (#9 + general cleanup) ── */ [data-theme="light"] .vp-ic.rot-on { background: rgba(107,53,212,.20) !important; border-color: var(--accent2) !important; color: var(--accent2) !important; } [data-theme="light"] #animPreviewBtn.active { background: rgba(107,53,212,.10) !important; border-color: var(--accent2) !important; color: var(--accent2) !important; } [data-theme="light"] #gyro-badge { background: rgba(107,53,212,.12); border-color: var(--accent2); color: var(--accent2); } [data-theme="light"] .cl-shadow-btn.on { border-color: rgba(107,53,212,.40) !important; color: var(--accent2) !important; } [data-theme="light"] .act-btn.save-btn { border-color: rgba(107,53,212,.35) !important; color: var(--accent2) !important; } [data-theme="light"] .act-btn.save-btn:active { background: rgba(107,53,212,.07) !important; border-color: var(--accent2) !important; } /* ── BG color preset swatches (#10) ── */ .bg-preset-swatch { width: 14px; height: 14px; border-radius: 3px; padding: 0; flex-shrink: 0; border: 1px solid rgba(128,128,128,.25); cursor: pointer; transition: transform .12s, border-color .12s; -webkit-appearance: none; } .bg-preset-swatch:hover { transform: scale(1.28); border-color: var(--accent2); } /* ══════════════════════════════════════════════════════════ LIGHT MODE — LIB & ANIM TEAL / CLICK-STATE FIXES (#9) ══════════════════════════════════════════════════════════ */ /* ── Auto-saved library restore banner — teal → purple ── */ [data-theme="light"] #lib-restore-banner { background: rgba(107,53,212,.07) !important; border-color: rgba(107,53,212,.28) !important; } [data-theme="light"] #libRestoreYes { color: #fff !important; } /* ── Load Lib button — border teal → purple ── */ [data-theme="light"] #libImportJsonBtn { border-color: rgba(107,53,212,.35) !important; } /* ── ANIM: Capture & Add Event buttons — border teal → purple ── */ [data-theme="light"] #animCaptureBtn { border-color: rgba(107,53,212,.40) !important; } [data-theme="light"] #animAddEventBtn { border-color: rgba(107,53,212,.40) !important; } /* ── Click/active state — all accent2-themed act-btns use purple not orange ── */ [data-theme="light"] #libImportJsonBtn:active, [data-theme="light"] #animCaptureBtn:active, [data-theme="light"] #animAddEventBtn:active, [data-theme="light"] #animAddCounterState:active, [data-theme="light"] #animPreviewBtn:active, [data-theme="light"] #scrollChapterBtn:active, [data-theme="light"] #scrollCaptureBtn:active { background: rgba(107,53,212,.10) !important; border-color: rgba(107,53,212,.50) !important; color: var(--accent2) !important; } /* ══════════════════════════════════════════════════════════ PARTICLE FX (PFX) PANEL v2.0 ══════════════════════════════════════════════════════════ */ /* ── Toolbar button ── */ #pfxBtn { border-color: rgba(72,192,184,.30); color: var(--accent2); } #pfxBtn.active { background: rgba(72,192,184,.12); border-color: rgba(72,192,184,.50); color: var(--accent2); } #annotationsBtn { border-color: rgba(72,192,184,.30); color: var(--accent2); } #annotationsBtn.active { background: rgba(72,192,184,.12); border-color: rgba(72,192,184,.50); color: var(--accent2); } /* ── Panel container — bottom mode (default) ── */ #pfx-panel { position: fixed; bottom: 0; left: 0; right: 0; height: clamp(300px, 44vh, 480px); background: var(--panel); border-top: 1px solid var(--border2); border-radius: 14px 14px 0 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 210; display: flex; flex-direction: column; overflow: hidden; transform: translateY(110%); transition: transform .32s cubic-bezier(.32,.72,0,1); pointer-events: none; } #pfx-panel.open { transform: translateY(0); pointer-events: all; } /* ══ ANNOTATIONS PANEL (hotspots + dimensions) — mirrors #pfx-panel geometry ══ */ #annotations-panel { position: fixed; bottom: 0; left: 0; right: 0; height: clamp(300px, 44vh, 480px); background: var(--panel); border-top: 1px solid var(--border2); border-radius: 14px 14px 0 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 210; display: flex; flex-direction: column; overflow: hidden; transform: translateY(110%); transition: transform .32s cubic-bezier(.32,.72,0,1); pointer-events: none; } #annotations-panel.open { transform: translateY(0); pointer-events: all; } #annotations-panel { bottom: var(--footer-h); } @media (min-width: 1280px) { #annotations-panel[data-layout="side"] { bottom: var(--footer-h); top: calc(var(--topbar-h) + var(--safe-top)); left: auto; right: 0; width: var(--annotations-panel-w, 340px); height: auto; border-radius: 12px 0 0 12px; border-left: 1px solid var(--border2); transform: translateX(110%); } #annotations-panel[data-layout="side"].open { transform: translateX(0); } #viewport.annotations-side-open { right: var(--annotations-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } #panel.annotations-side-open { right: var(--annotations-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } } #annotations-panel.maximized { height: calc(100dvh - var(--topbar-h) - var(--safe-top) - var(--footer-h)); } /* Edge tab — persistent desktop opener on the right, stacked below the cfg/pfx tabs. Fixed offset (not own-height) so the long label doesn't push it far down. */ #annotations-collapsed-tab { display: none; position: fixed; right: 0; top: 50%; width: 26px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 5px; background: var(--panel); border: 1px solid var(--border2); border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; z-index: 209; writing-mode: vertical-lr; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xxs); letter-spacing: .22em; color: var(--accent2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); touch-action: manipulation; transition: background .15s, border-color .15s; } #annotations-collapsed-tab:hover { background: rgba(72,192,184,.08); border-color: rgba(72,192,184,.4); } [data-theme="light"] #annotations-collapsed-tab { background: rgba(188,188,192,.97); color: var(--accent2); } @media (max-width: 1279px) { #annotations-collapsed-tab { display: none !important; } } /* mobile uses the footer button */ body.cap-annotations-off #annotations-collapsed-tab, body.cap-annotations-off #annotations-panel, body.cap-annotations-off [data-cap="annotations"] { display: none !important; } /* Dimension value labels — projected HTML overlay above the canvas */ #dim-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; } .dim-label { position: absolute; transform: translate(-50%, -50%); transform-origin: center; padding: 2px 7px; border-radius: 6px; white-space: nowrap; background: rgba(14, 16, 20, 0.82); border: 1px solid var(--accent2); color: #fff; font-family: var(--font-body); font-size: calc(11px * var(--mm-dim-scale, 1)); font-weight: 600; letter-spacing: .02em; line-height: 1.2; pointer-events: none; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); } [data-theme="light"] .dim-label { background: rgba(255, 255, 255, 0.9); color: #1a1a1f; } /* Tab strip inside the panel */ .annotations-tabs, .cfg-tabs { display: flex; gap: 4px; padding: 8px 12px 0; flex-shrink: 0; } .annotations-tab, .cfg-tab { flex: 1; height: 30px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px 8px 0 0; color: var(--text-dim); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xxs); letter-spacing: .12em; cursor: pointer; -webkit-appearance: none; transition: all .15s; text-transform: uppercase; } .annotations-tab:hover, .cfg-tab:hover { color: var(--text-mid); } .annotations-tab.active, .cfg-tab.active { background: rgba(232,112,58,.12); border-color: rgba(232,112,58,.4); color: var(--accent); } [data-theme="light"] .annotations-tab.active, [data-theme="light"] .cfg-tab.active { background: rgba(232,112,58,.12); border-color: rgba(232,112,58,.4); color: var(--accent); } .annotations-tab-body { display: none; } .annotations-tab-body.active { display: block; } /* ── Side mode — desktop ≥1280px ── */ @media (min-width: 1280px) { #pfx-panel[data-layout="side"] { bottom: 0; top: calc(var(--topbar-h) + var(--safe-top)); left: auto; right: 0; width: var(--pfx-panel-w); height: auto; border-radius: 12px 0 0 12px; border-top: 1px solid var(--border2); border-left: 1px solid var(--border2); transform: translateX(110%); } #pfx-panel[data-layout="side"].open { transform: translateX(0); } /* Viewport — no deformation, canvas resizes via resize event */ #viewport.pfx-side-open { right: var(--pfx-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } /* Bottom panel + reopen button push */ #panel.pfx-side-open { right: var(--pfx-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } #reopenBtn.pfx-side-open { /* position handled by scene-ui.js onPfxPanelLayout */ } } /* ── Collapsed tab — right-edge strip when side+closed+desktop ── */ #pfx-collapsed-tab { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: 26px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 5px; background: var(--panel); border: 1px solid var(--border2); border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; z-index: 209; writing-mode: vertical-lr; font-family:var(--font-display); font-weight: 700; font-size: var(--fs-xxs); letter-spacing: .22em; color: var(--accent2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); touch-action: manipulation; transition: background .15s, border-color .15s; } #pfx-collapsed-tab:hover { background: rgba(72,192,184,.08); border-color: rgba(72,192,184,.4); } /* ── Header ── */ .pfx-hd { display:flex; align-items:center; justify-content:space-between; padding:clamp(8px,1vh,12px) clamp(10px,1.2vw,16px); border-bottom:1px solid var(--border); flex-shrink:0; } .pfx-hd-l { display:flex; align-items:center; gap:7px; color:var(--accent2); } .pfx-hd-title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:.2em; color:var(--accent2); } .pfx-hd-r { display:flex; align-items:center; gap:5px; } .pfx-icon-btn { width:29px; height:29px; border-radius:6px; border:1px solid var(--border2); background:var(--panel2); color:var(--text-dim); font-size:15px; cursor:pointer; touch-action:manipulation; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; -webkit-appearance:none; } .pfx-icon-btn:hover { color:var(--text); } .pfx-icon-btn[title="Close"]:hover { color:#ff5a5a; border-color:rgba(255,90,90,.55); background:rgba(255,90,90,.12); } .pfx-icon-del:hover { border-color:rgba(224,80,96,.5); color:var(--red); } /* ── Scrollable body ── */ .pfx-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:clamp(8px,1vh,12px) clamp(10px,1.2vw,14px) 20px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .pfx-body::-webkit-scrollbar { width:2px; } .pfx-body::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; } /* ── Accordion ── */ .pfx-acc { border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-bottom:7px; } .pfx-acc-hd { display:flex; align-items:center; justify-content:space-between; padding:clamp(7px,.9vh,10px) clamp(9px,1.1vw,13px); background:var(--panel2); user-select:none; cursor:pointer; } .pfx-acc-hd:hover { background:var(--panel3); } .pfx-acc-title { font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.16em; color:var(--text-mid); text-transform:uppercase; } .pfx-acc-chevron { color:var(--text-dim); display:flex; align-items:center; transition:transform .18s; flex-shrink:0; } .pfx-acc-chevron.collapsed { transform:rotate(-90deg); } .pfx-acc-body { padding:clamp(8px,1vh,12px) clamp(9px,1.1vw,13px); } /* ── Layer accordion header ── */ .pfx-layer-hd { gap:6px; } .pfx-layer-hd-l { display:flex; align-items:center; gap:7px; flex:1; min-width:0; } .pfx-layer-hd-r { display:flex; align-items:center; gap:4px; } .pfx-layer-onoff { font-family:var(--font-body); font-size:var(--fs-xs); width:28px; height:22px; border-radius:5px; border:1px solid var(--border2); background:var(--panel3); color:var(--text-dim); cursor:pointer; touch-action:manipulation; transition:all .15s; flex-shrink:0; display:flex; align-items:center; justify-content:center; -webkit-appearance:none; } .pfx-layer-onoff.on { background:rgba(72,192,184,.16); border-color:rgba(72,192,184,.5); color:var(--accent2); } .pfx-type-badge { font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.12em; color:var(--text-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ── Add layer ── */ .pfx-add-layer-btn { width:100%; height:34px; background:transparent; border:1px dashed rgba(72,192,184,.3); border-radius:8px; color:var(--accent2); font-family:var(--font-display); font-weight:700; font-size:var(--fs-xxs); letter-spacing:.15em; cursor:pointer; touch-action:manipulation; transition:all .15s; margin-top:4px; -webkit-appearance:none; } .pfx-add-layer-btn:hover { background:rgba(72,192,184,.06); border-color:rgba(72,192,184,.5); } .pfx-add-menu { background:var(--panel2); border:1px solid var(--border2); border-radius:8px; overflow:hidden; margin-bottom:6px; } .pfx-add-menu-btn { display:block; width:100%; padding:9px 14px; background:transparent; border:none; border-bottom:1px solid var(--border); text-align:left; font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.14em; color:var(--text-mid); cursor:pointer; touch-action:manipulation; transition:background .12s; } .pfx-add-menu-btn:last-child { border-bottom:none; } .pfx-add-menu-btn:hover { background:var(--panel3); color:var(--accent2); } /* ── Control row (label + slider + editable value) ── */ .pfx-row { display:flex; align-items:center; gap:7px; margin-bottom:clamp(8px,1.1vh,13px); } .pfx-lbl { font-size:var(--fs-xxs); color:var(--text-dim); letter-spacing:.1em; min-width:62px; flex-shrink:0; } .pfx-slider { flex:1; accent-color:var(--accent2); } .pfx-val { font-size:var(--fs-xxs); color:var(--accent2); font-family:var(--font-body); min-width:32px; text-align:right; flex-shrink:0; border-radius:3px; padding:1px 3px; transition:background .12s; outline:none; cursor:text; } .pfx-val:focus { background:rgba(72,192,184,.12); } /* ── Sub-headers ── */ .pfx-sub-hd { font-size:var(--fs-xxs); color:var(--text-dim); letter-spacing:.16em; text-transform:uppercase; margin:clamp(9px,1.2vh,14px) 0 clamp(5px,.7vh,8px); } /* ── Option button groups ── */ .pfx-btn-row { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:2px; } .pfx-opt-btn { padding:4px 9px; background:var(--panel3); border:1px solid var(--border2); border-radius:5px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); cursor:pointer; touch-action:manipulation; transition:all .15s; -webkit-appearance:none; } .pfx-opt-btn.active { background:rgba(72,192,184,.14); border-color:rgba(72,192,184,.45); color:var(--accent2); } /* ── Checkbox row ── */ .pfx-check-row { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:var(--fs-xxs); color:var(--text-mid); letter-spacing:.08em; margin-bottom:clamp(6px,.9vh,10px); } .pfx-check-row input[type="checkbox"] { accent-color:var(--accent2); } /* ── Interactive mode button ── */ .pfx-interactive-btn { width:100%; height:32px; background:var(--panel2); border:1px solid var(--border2); border-radius:0 0 9px 9px; color:var(--text-dim); font-family:var(--font-body); font-weight:700; font-size:var(--fs-xxs); letter-spacing:.14em; cursor:pointer; touch-action:manipulation; transition:all .18s; flex-shrink:0; -webkit-appearance:none; } .pfx-interactive-btn:hover { color:var(--accent2); border-color:rgba(72,192,184,.4); } .pfx-interactive-btn.on { background:rgba(72,192,184,.14); border-color:rgba(72,192,184,.55); color:var(--accent2); } /* ── Action button ── */ .pfx-action-btn { width:100%; height:34px; background:rgba(72,192,184,.08); border:1px solid rgba(72,192,184,.28); border-radius:8px; color:var(--accent2); font-family:var(--font-display); font-weight:700; font-size:var(--fs-xxs); letter-spacing:.15em; cursor:pointer; touch-action:manipulation; display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s; -webkit-appearance:none; } .pfx-action-btn:active { background:rgba(72,192,184,.18); border-color:var(--accent2); } /* ── Source row / select ── */ .pfx-source-row { display:flex; gap:5px; margin-bottom:10px; align-items:center; } .pfx-select { background:var(--panel3); border:1px solid var(--border2); border-radius:7px; color:var(--text-mid); font-family:var(--font-body); font-size:var(--fs-xxs); padding:5px 8px; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; } /* ── Info note ── */ .pfx-info { font-size:var(--fs-xxs); color:var(--text-dim); background:var(--panel2); border-radius:7px; padding:7px 10px; line-height:1.7; } /* ══ PFX — LIGHT MODE ══ */ [data-theme="light"] #pfxBtn { color:var(--accent2) !important; border-color:rgba(107,53,212,.30) !important; } [data-theme="light"] #pfxBtn.active { background:rgba(107,53,212,.12) !important; border-color:rgba(107,53,212,.45) !important; } [data-theme="light"] #annotationsBtn { color:var(--accent2) !important; border-color:rgba(107,53,212,.30) !important; } [data-theme="light"] #annotationsBtn.active { background:rgba(107,53,212,.12) !important; border-color:rgba(107,53,212,.45) !important; } [data-theme="light"] .pfx-layer-onoff.on { background:rgba(107,53,212,.14); border-color:rgba(107,53,212,.5); color:var(--accent2); } [data-theme="light"] .pfx-opt-btn.active { background:rgba(107,53,212,.12); border-color:rgba(107,53,212,.40); color:var(--accent2); } [data-theme="light"] .pfx-action-btn { background:rgba(107,53,212,.07); border-color:rgba(107,53,212,.28); color:var(--accent2); } [data-theme="light"] .pfx-action-btn:active { background:rgba(107,53,212,.15) !important; border-color:var(--accent2) !important; } [data-theme="light"] .pfx-add-layer-btn { border-color:rgba(107,53,212,.3); color:var(--accent2); } [data-theme="light"] #pfx-collapsed-tab { background:rgba(188,188,192,.97); color:var(--accent2); } /* ── Group E — Editable val-badge (transform sliders) ── */ .val-badge[contenteditable] { cursor:text; outline:none; border-radius:3px; padding:1px 3px; transition:background .12s; } .val-badge[contenteditable]:hover { background:rgba(255,255,255,.06); } .val-badge[contenteditable]:focus { background:rgba(72,192,184,.14); color:var(--accent2); } [data-theme="light"] .val-badge[contenteditable]:focus { background:rgba(107,53,212,.12); } /* ── Group F — PFX Basic/Advanced ── */ .pfx-body:not(.pfx-advanced) .pfx-adv { display: none !important; } /* ── PFX adv-btn (Basic/Advanced toggle) ── */ .pfx-adv-btn { width:100%; height:30px; background:var(--panel2); border:1px solid var(--border); border-radius:0 0 9px 9px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.14em; cursor:pointer; touch-action:manipulation; transition:all .18s; flex-shrink:0; -webkit-appearance:none; margin-top:1px; } .pfx-adv-btn:hover { color:var(--text-mid); } .pfx-adv-btn.on { background:rgba(72,192,184,.08); border-color:rgba(72,192,184,.35); color:var(--accent2); } /* ── Bug 1 fix — hide theme pick modal for returning users (theme already chosen) ── */ body.mm-has-theme #theme-pick-modal { display: none !important; } /* ═══════════════════════════════════════════════════════════ 3D CONFIGURATOR PANEL (configurator.js) Mirrors the PFX panel pattern. Uses --accent (orange) to distinguish from PFX (--accent2 teal). Side mode is wider (320px) than PFX (272px) per the configurator's denser UI. ═══════════════════════════════════════════════════════════ */ #cfgBtn { border-color: rgba(232,112,58,.30); color: var(--accent); } #cfgBtn.active { background: rgba(232,112,58,.12); border-color: rgba(232,112,58,.50); color: var(--accent); } /* ── Panel container — bottom mode (default) ── */ #cfg-panel { position: fixed; bottom: 0; left: 0; right: 0; height: clamp(300px, 44vh, 480px); background: var(--panel); border-top: 1px solid var(--border2); border-radius: 14px 14px 0 0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 210; display: flex; flex-direction: column; overflow: hidden; transform: translateY(110%); transition: transform .32s cubic-bezier(.32,.72,0,1); pointer-events: none; } #cfg-panel.open { transform: translateY(0); pointer-events: all; } /* ── Side mode — desktop ≥1280px, wider than PFX ── */ @media (min-width: 1280px) { #cfg-panel[data-layout="side"] { bottom: 0; top: calc(var(--topbar-h) + var(--safe-top)); left: auto; right: 0; width: var(--cfg-panel-w); height: auto; border-radius: 12px 0 0 12px; border-top: 1px solid var(--border2); border-left: 1px solid var(--border2); transform: translateX(110%); } #cfg-panel[data-layout="side"].open { transform: translateX(0); } #viewport.cfg-side-open { right: var(--cfg-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } #panel.cfg-side-open { right: var(--cfg-panel-w); transition: right .32s cubic-bezier(.32,.72,0,1); } } /* ── Collapsed tab — right-edge strip when side+closed+desktop ── */ #cfg-collapsed-tab { display: none; position: fixed; right: 0; top: 50%; transform: translateY(calc(-100% - 5px)); width: 26px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 5px; background: var(--panel); border: 1px solid var(--border2); border-right: none; border-radius: 10px 0 0 10px; cursor: pointer; z-index: 209; writing-mode: vertical-lr; font-family:var(--font-display); font-weight: 700; font-size: var(--fs-xxs); letter-spacing: .22em; color: var(--accent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); touch-action: manipulation; transition: background .15s, border-color .15s; } #cfg-collapsed-tab:hover { background: rgba(232,112,58,.08); border-color: rgba(232,112,58,.4); } /* ── Header ── */ .cfg-hd { display:flex; align-items:center; justify-content:space-between; padding:clamp(8px,1vh,12px) clamp(10px,1.2vw,16px); border-bottom:1px solid var(--border); flex-shrink:0; } .cfg-hd-l { display:flex; align-items:center; gap:7px; color:var(--accent); } .cfg-hd-title { font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:.2em; color:var(--accent); } .cfg-hd-r { display:flex; align-items:center; gap:5px; } .cfg-icon-btn { width:26px; height:26px; border-radius:6px; border:1px solid var(--border2); background:var(--panel2); color:var(--text-dim); font-size:12px; cursor:pointer; touch-action:manipulation; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; -webkit-appearance:none; padding:0; } .cfg-icon-btn:hover { color:var(--text); } .cfg-icon-del:hover { color:#ff6b6b; border-color:rgba(255,107,107,.4); } /* Set icon picker (button + popover grid) */ .cfg-icon-pick { width:34px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--panel2); border:1px solid var(--border2); border-radius:8px; color:var(--text-mid); cursor:pointer; padding:0; -webkit-appearance:none; transition:all .15s; } .cfg-icon-pick:hover { border-color:var(--accent2); color:var(--accent2); } .cfg-icon-pick svg { width:17px; height:17px; } .cfg-icon-pick-img { width:20px; height:20px; object-fit:contain; border-radius:3px; } .cfg-icon-pick-none { color:var(--text-dim); } .cfg-icon-pop { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:5px; box-shadow:0 12px 34px rgba(0,0,0,.45); width:220px; } .cfg-icon-tile { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--panel2); border:1px solid var(--border2); border-radius:7px; color:var(--text-mid); cursor:pointer; padding:0; -webkit-appearance:none; transition:all .12s; } .cfg-icon-tile:hover { border-color:var(--accent2); color:var(--accent2); } .cfg-icon-tile svg { width:17px; height:17px; } .cfg-icon-tile-custom { font-size:16px; color:var(--accent2); } /* ── Body ── */ .cfg-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:clamp(8px,1vh,12px) clamp(10px,1.2vw,14px) 20px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Basic/Advanced mode — advanced-only controls are hidden unless the body is .cfg-advanced */ .cfg-body:not(.cfg-advanced) .cfg-adv-only { display:none !important; } .cfg-adv-btn { width:100%; height:30px; background:var(--panel2); border:1px solid var(--border); border-radius:9px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.14em; cursor:pointer; touch-action:manipulation; transition:all .18s; -webkit-appearance:none; margin:0 0 10px; } .cfg-adv-btn:hover { color:var(--text-mid); } .cfg-adv-btn.on { background:rgba(72,192,184,.08); border-color:rgba(72,192,184,.35); color:var(--accent2); } [data-theme="light"] .cfg-adv-btn.on { background:rgba(107,53,212,.08); border-color:rgba(107,53,212,.35); } /* Groups flow into balanced columns as the panel widens (drag-resize). Multi-column (not grid) so a short group doesn't leave a gap — the next group fills the space. */ .cfg-groups { column-width:252px; column-gap:8px; } .cfg-groups > .cfg-acc { margin:0 0 8px; break-inside:avoid; -webkit-column-break-inside:avoid; } /* Same pattern for PFX — General + layers flow into balanced columns; wider panel → more columns. */ .pfx-groups { column-width:252px; column-gap:8px; } .pfx-groups > .pfx-acc { margin:0 0 8px; break-inside:avoid; -webkit-column-break-inside:avoid; } /* Drag-to-resize handle — left edge of the configurator, desktop side mode only. Full-height invisible hit area + a short centred grip pill (mirrors #panel-grip). */ #cfg-resize { display:none; } @media (min-width:1280px){ #cfg-panel[data-layout="side"] #cfg-resize { display:block; position:absolute; left:0; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:6; touch-action:none; } #cfg-panel[data-layout="side"] #cfg-resize::after { content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%); width:4px; height:40px; border-radius:3px; background:var(--border2); transition:background .15s, height .15s; } #cfg-panel[data-layout="side"] #cfg-resize:hover::after, #cfg-panel[data-layout="side"] #cfg-resize.dragging::after { background:var(--accent2); height:56px; } } #pfx-resize { display:none; } @media (min-width:1280px){ #pfx-panel[data-layout="side"] #pfx-resize { display:block; position:absolute; left:0; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:6; touch-action:none; } #pfx-panel[data-layout="side"] #pfx-resize::after { content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%); width:4px; height:40px; border-radius:3px; background:var(--border2); transition:background .15s, height .15s; } #pfx-panel[data-layout="side"] #pfx-resize:hover::after, #pfx-panel[data-layout="side"] #pfx-resize.dragging::after { background:var(--accent2); height:56px; } } body.panel-resizing #viewport, body.panel-resizing #panel { transition:none !important; } .cfg-body::-webkit-scrollbar { width:2px; } .cfg-body::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; } /* Bottom dock, desktop: 3 full-width balanced columns (not fixed-width masonry), plus a top-edge height grip that mirrors the main panel grip. */ #cfg-resize-v { display:none; } @media (min-width:1024px){ #cfg-panel:not([data-layout="side"]) .cfg-groups { column-count:3; column-width:auto; } #pfx-panel:not([data-layout="side"]) .pfx-groups { column-count:3; column-width:auto; } #cfg-panel:not([data-layout="side"]) { height: var(--cfg-panel-h, clamp(300px,44vh,480px)); } #cfg-panel:not([data-layout="side"]) #cfg-resize-v { display:flex; flex:0 0 auto; height:10px; align-items:center; justify-content:center; cursor:ns-resize; touch-action:none; -webkit-user-select:none; user-select:none; } #cfg-panel:not([data-layout="side"]) #cfg-resize-v::before { content:''; width:40px; height:4px; border-radius:3px; background:var(--border2); transition:background .15s, width .15s; } #cfg-panel:not([data-layout="side"]) #cfg-resize-v:hover::before, #cfg-panel:not([data-layout="side"]) #cfg-resize-v.dragging::before { background:var(--accent2); width:56px; } } /* ── Accordions ── */ .cfg-acc { border:1px solid var(--border); border-radius:9px; overflow:hidden; margin-bottom:7px; } .cfg-acc-hd { display:flex; align-items:center; justify-content:space-between; padding:clamp(7px,.9vh,10px) clamp(9px,1.1vw,13px); background:var(--panel2); user-select:none; cursor:pointer; } .cfg-acc-hd:hover { background:var(--panel3); } .cfg-acc-title { font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.16em; color:var(--text-mid); text-transform:uppercase; } .cfg-acc-chevron { color:var(--text-dim); display:flex; align-items:center; transition:transform .18s; flex-shrink:0; } .cfg-acc-chevron.collapsed { transform:rotate(-90deg); } .cfg-acc-body { padding:clamp(8px,1vh,12px) clamp(9px,1.1vw,13px); } .cfg-hd-l { display:flex; align-items:center; gap:7px; } .cfg-hd-r { display:flex; align-items:center; gap:5px; } .cfg-grp-badge { font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.1em; color:var(--accent); text-transform:uppercase; } /* ── Rows ── */ .cfg-row { display:flex; align-items:center; gap:7px; margin-bottom:clamp(7px,1vh,11px); } .cfg-lbl { font-size:var(--fs-xxs); color:var(--text-dim); letter-spacing:.1em; min-width:62px; flex-shrink:0; } .cfg-lbl-sm { min-width:52px; } .cfg-text, .cfg-num { flex:1; background:var(--panel2); border:1px solid var(--border2); border-radius:5px; color:var(--text); font-family:var(--font-body); font-size:var(--fs-xxs); padding:5px 7px; outline:none; -webkit-appearance:none; } .cfg-text:focus, .cfg-num:focus { border-color:rgba(232,112,58,.45); } .cfg-num { max-width:90px; } .cfg-color, .cfg-swatch { width:30px; height:24px; padding:0; border:1px solid var(--border2); border-radius:5px; background:none; cursor:pointer; flex-shrink:0; -webkit-appearance:none; } .cfg-color::-webkit-color-swatch-wrapper, .cfg-swatch::-webkit-color-swatch-wrapper { padding:2px; } .cfg-color::-webkit-color-swatch, .cfg-swatch::-webkit-color-swatch { border:none; border-radius:3px; } /* Colour swatch is dimmed when an image swatch overrides it. */ .cfg-swatch-dim { opacity:.4; } /* Per-variant image swatch control (sits between colour swatch and name). */ .cfg-vthumb { position:relative; width:24px; height:24px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; } .cfg-vthumb-img { width:24px; height:24px; object-fit:cover; border-radius:5px; border:1px solid var(--border2); display:block; } .cfg-vthumb-clear { position:absolute; top:-5px; right:-5px; width:14px; height:14px; border-radius:50%; border:none; background:var(--panel3); color:var(--text); font-size:9px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 1px 3px rgba(0,0,0,.35); } .cfg-vthumb-clear:hover { background:#ff6b6b; color:#fff; } .cfg-vthumb-pick { width:24px; height:24px; border-radius:5px; border:1px dashed var(--border2); background:var(--panel2); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; -webkit-appearance:none; transition:all .15s; } .cfg-vthumb-pick:hover { color:var(--accent); border-color:rgba(232,112,58,.45); } /* Thumb appearance row (label + control + note) and auto-from-map state. */ .cfg-thumb-block { margin-bottom:8px; } .cfg-thumb-row { margin-bottom:5px; } .cfg-thumb-note { font-size:var(--fs-xxs); color:var(--text-dim); opacity:.7; font-family:var(--font-body); } .cfg-vthumb-hint { font-size:var(--fs-xxs); color:var(--text-dim); opacity:.6; white-space:nowrap; } .cfg-vthumb-auto { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); font-size:7px; letter-spacing:.06em; font-weight:700; color:#fff; background:var(--accent); border-radius:3px; padding:0 3px; line-height:1.5; pointer-events:none; } .cfg-check-disabled { opacity:.5; } .cfg-check-disabled input { cursor:not-allowed; } .cfg-thumb-hint { font-size:var(--fs-xxs); color:var(--text-dim); opacity:.7; } /* Registered-only (gated) Display controls + sign-in banner. */ .cfg-locked { opacity:.45; cursor:pointer; position:relative; } .cfg-locked * { pointer-events:none; } .cfg-lock-note { font-size:var(--fs-xxs); color:var(--text-dim); background:var(--panel2); border:1px solid var(--border2); border-radius:6px; padding:7px 9px; margin-bottom:9px; line-height:1.4; } .cfg-lock-link { background:none; border:none; padding:0; color:var(--accent); font-family:var(--font-body); font-size:var(--fs-xxs); font-weight:600; cursor:pointer; text-decoration:underline; -webkit-appearance:none; } .cfg-lock-link:hover { opacity:.8; } .cfg-opt-btn.cfg-locked-opt { opacity:.45; cursor:pointer; } /* Info "i" affordance + hover/focus tooltip (replaces verbose inline hints). */ .cfg-info { position:relative; display:inline-flex; align-items:center; color:var(--text-dim); opacity:.55; cursor:help; vertical-align:middle; } .cfg-info svg { display:block; } .cfg-info:hover, .cfg-info:focus-visible { opacity:1; color:var(--accent); outline:none; } .cfg-info--end { margin-left:auto; margin-right:8px; } .cfg-lbl .cfg-info { margin-left:5px; } .cfg-sub-hd--info { display:flex; align-items:center; justify-content:space-between; } .cfg-info-tip { display:none; position:fixed; width:210px; max-width:62vw; background:var(--panel3); color:var(--text-mid); border:1px solid var(--border2); border-radius:7px; padding:8px 10px; font-size:var(--fs-xxs); font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.45; z-index:12001; box-shadow:0 8px 22px rgba(0,0,0,.45); pointer-events:none; } .cfg-variant-toggle { display:flex; align-items:center; justify-content:center; width:100%; height:13px; background:none; border:none; padding:0; margin:0 0 4px; cursor:pointer; color:var(--text-dim); opacity:.5; border-radius:4px; -webkit-appearance:none; } .cfg-variant-toggle:hover { opacity:1; color:var(--text); background:var(--panel3); } .cfg-variant-toggle .cfg-vt-grip { display:flex; transition:transform .18s; } .cfg-variant-toggle.collapsed .cfg-vt-grip { transform:rotate(-90deg); } .cfg-slider { flex:1; accent-color:var(--accent); } .cfg-val { font-size:var(--fs-xxs); color:var(--accent); font-family:var(--font-body); min-width:32px; text-align:right; flex-shrink:0; } .cfg-select { flex:1; background:var(--panel2); border:1px solid var(--border2); border-radius:5px; color:var(--text); font-family:var(--font-body); font-size:var(--fs-xxs); padding:5px 6px; outline:none; cursor:pointer; -webkit-appearance:none; } /* ── Conditional-visibility (SHOW WHEN) block inside a group ── */ .cfg-showwhen { margin-top:7px; padding:2px 0 2px 9px; border-left:2px solid var(--border2); } /* ── Group headers (tier-1 dividers in the Display section) ── */ .cfg-grp-hd { display:flex; align-items:center; gap:9px; margin:clamp(16px,2vh,22px) 0 clamp(7px,1vh,10px); } .cfg-acc-body > .cfg-grp-hd:first-child { margin-top:2px; } .cfg-grp-hd-title { font-family:var(--font-display); font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text); white-space:nowrap; } .cfg-grp-hd-line { flex:1; height:1px; background:linear-gradient(to right, var(--border2), transparent); } /* ── Sub-headers ── */ .cfg-sub-hd { font-size:var(--fs-xxs); color:var(--text-dim); letter-spacing:.16em; text-transform:uppercase; margin:clamp(9px,1.2vh,14px) 0 clamp(5px,.7vh,8px); } /* ── Button groups ── */ .cfg-btn-row { display:flex; gap:4px; flex-wrap:wrap; } .cfg-opt-btn { padding:4px 9px; background:var(--panel3); border:1px solid var(--border2); border-radius:5px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); cursor:pointer; touch-action:manipulation; transition:all .15s; -webkit-appearance:none; } .cfg-opt-btn.active { background:rgba(232,112,58,.14); border-color:rgba(232,112,58,.45); color:var(--accent); } .cfg-opt-btn:not(.active):hover { background:var(--panel2); border-color:var(--border); color:var(--text); } /* ── Checks ── */ .cfg-check-row { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:var(--fs-xxs); color:var(--text-mid); letter-spacing:.08em; margin-bottom:clamp(6px,.9vh,10px); } .cfg-check-row input[type="checkbox"] { accent-color:var(--accent); } /* ── Variant card ── */ .cfg-variant { border:1px solid var(--border); border-radius:8px; padding:9px; margin-bottom:8px; background:var(--panel2); } .cfg-variant-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .cfg-variant-name { flex:1; min-width:0; background:var(--panel); border:1px solid var(--border2); border-radius:5px; color:var(--text); font-family:var(--font-body); font-size:var(--fs-xxs); padding:5px 7px; outline:none; -webkit-appearance:none; } .cfg-variant-name:focus { border-color:rgba(232,112,58,.45); } /* ── Actions ── */ .cfg-actions { display:flex; flex-direction:column; gap:6px; margin-top:4px; } .cfg-action { border:1px solid var(--border2); border-radius:6px; padding:7px; background:var(--panel); } .cfg-action-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; } .cfg-targets { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:7px; } .cfg-target-chip { display:flex; align-items:center; gap:4px; padding:3px 7px; border:1px solid var(--border2); border-radius:12px; font-size:var(--fs-xs); color:var(--text-dim); cursor:pointer; transition:all .15s; max-width:100%; } .cfg-target-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; } .cfg-target-chip.on { background:rgba(232,112,58,.12); border-color:rgba(232,112,58,.45); color:var(--accent); } .cfg-target-chip input[type="checkbox"] { accent-color:var(--accent); width:12px; height:12px; } .cfg-hint { font-size:var(--fs-xxs); color:var(--text-dim); font-style:italic; padding:4px 0; } /* Grouped target picker (5a) — Model | Material modes, collapsible groups */ .cfg-tgt { margin-bottom:7px; } .cfg-tgt-toolbar { display:flex; gap:6px; align-items:center; margin-bottom:6px; } .cfg-tgt-mode { display:inline-flex; border:1px solid var(--border2); border-radius:6px; overflow:hidden; flex:0 0 auto; } .cfg-tgt-mode-btn { font-family:inherit; font-size:var(--fs-xxs); color:var(--text-dim); background:var(--panel); border:none; padding:4px 9px; cursor:pointer; transition:all .15s; } .cfg-tgt-mode-btn + .cfg-tgt-mode-btn { border-left:1px solid var(--border2); } .cfg-tgt-mode-btn.on { background:rgba(232,112,58,.16); color:var(--accent); font-weight:600; } .cfg-tgt-search { flex:1 1 auto; min-width:0; font-family:inherit; font-size:var(--fs-xxs); color:var(--text); background:var(--panel2); border:1px solid var(--border2); border-radius:6px; padding:4px 8px; } .cfg-tgt-summary { font-size:var(--fs-xxs); color:var(--text-dim); margin-bottom:5px; } .cfg-tgt-groups { display:flex; flex-direction:column; gap:4px; } .cfg-tgt-group { border:1px solid var(--border2); border-radius:6px; background:var(--panel); overflow:hidden; } .cfg-tgt-group.has-sel { border-color:rgba(232,112,58,.4); } .cfg-tgt-group-hd { display:flex; align-items:center; gap:7px; padding:7px 9px; user-select:none; } .cfg-tgt-chevron { font-size:9px; color:var(--text-dim); width:10px; flex:0 0 auto; cursor:pointer; } .cfg-tgt-master { accent-color:var(--accent); width:13px; height:13px; flex:0 0 auto; cursor:pointer; } .cfg-tgt-swatch { width:13px; height:13px; border-radius:3px; border:1px solid var(--border2); flex:0 0 auto; } .cfg-tgt-gname { flex:1 1 auto; font-size:var(--fs-xs); color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .cfg-tgt-badge { flex:0 0 auto; font-size:var(--fs-xxs); color:var(--text-dim); font-variant-numeric:tabular-nums; } .cfg-tgt-group-body { display:flex; flex-wrap:wrap; gap:4px; padding:0 7px 7px 7px; } /* Tree mode — nested hierarchy (5a.1) */ .cfg-tree-node { display:block; } .cfg-tree-row { display:flex; align-items:center; gap:6px; padding:4px 7px; border-radius:5px; } .cfg-tree-row.has-sel { background:rgba(232,112,58,.08); } .cfg-tree-chevron { font-size:9px; color:var(--text-dim); width:11px; flex:0 0 auto; cursor:pointer; text-align:center; } .cfg-tree-cb { accent-color:var(--accent); width:13px; height:13px; flex:0 0 auto; cursor:pointer; } .cfg-tree-name { flex:1 1 auto; font-size:var(--fs-xs); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; } .cfg-tree-badge { flex:0 0 auto; font-size:var(--fs-xxs); color:var(--text-dim); font-variant-numeric:tabular-nums; } /* Pick-in-viewport (5b) */ .cfg-tgt-sumrow { display:flex; align-items:center; justify-content:space-between; gap:8px; } .cfg-tgt-pick-btn { flex:0 0 auto; font-family:inherit; font-size:var(--fs-xxs); line-height:1; color:var(--accent); background:var(--panel); border:1px solid var(--border2); border-radius:6px; padding:5px 10px; cursor:pointer; transition:all .15s; white-space:nowrap; } .cfg-tgt-pick-btn:hover { border-color:var(--accent); } .cfg-tgt-pick-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); } /* Material texture row (6a) */ .cfg-tex-box { display:flex; align-items:center; gap:6px; } .cfg-tex-thumb { width:34px; height:34px; border-radius:5px; object-fit:cover; border:1px solid var(--border2); background:#0003; } .cfg-tex-pick { font-family:inherit; font-size:var(--fs-xxs); color:var(--accent); background:var(--panel); border:1px dashed var(--border2); border-radius:6px; padding:5px 10px; cursor:pointer; transition:all .15s; } .cfg-tex-pick:hover { border-color:var(--accent); } .cfg-tex-clear { font-family:inherit; font-size:var(--fs-xxs); color:var(--text-dim); background:none; border:none; cursor:pointer; padding:2px 5px; } .cfg-tex-clear:hover { color:var(--accent); } .cfg-add-action-btn { width:100%; height:26px; margin-top:6px; background:transparent; border:1px dashed var(--border2); border-radius:6px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.1em; cursor:pointer; transition:all .15s; -webkit-appearance:none; } .cfg-add-action-btn:hover { color:var(--accent); border-color:rgba(232,112,58,.4); } /* ── Add buttons + preview bar ── */ .cfg-add-sub-btn { width:100%; height:30px; background:transparent; border:1px dashed rgba(232,112,58,.3); border-radius:7px; color:var(--accent); font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.12em; cursor:pointer; touch-action:manipulation; transition:all .15s; margin-top:4px; -webkit-appearance:none; } .cfg-add-sub-btn:hover { background:rgba(232,112,58,.06); border-color:rgba(232,112,58,.5); } .cfg-add-group-btn { width:100%; height:36px; background:transparent; border:1px dashed rgba(232,112,58,.35); border-radius:8px; color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:var(--fs-xxs); letter-spacing:.15em; cursor:pointer; touch-action:manipulation; transition:all .15s; margin-top:4px; -webkit-appearance:none; } .cfg-add-group-btn:hover { background:rgba(232,112,58,.06); border-color:rgba(232,112,58,.55); } /* Reorder + duplicate (variant duplicate, drag-to-reorder groups & variants) */ .cfg-icon-dup { color:var(--text-dim); } .cfg-icon-dup:hover { color:var(--accent); border-color:rgba(232,112,58,.4); } /* Up/down reorder arrows (groups + variants) — vertical, borderless, compact. Scoped as .cfg-move .cfg-move-btn so the sizing beats the .cfg-icon-btn width/height set in the responsive block lower in the file. */ .cfg-move { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; margin-right:1px; } .cfg-move .cfg-move-btn { width:18px; height:14px; min-height:0; border:none; background:none; border-radius:3px; color:var(--text-dim); padding:0; } .cfg-move .cfg-move-btn svg { width:12.5px; height:12.5px; stroke-width:2.7; } .cfg-move-btn:disabled { opacity:.26; cursor:default; pointer-events:none; } .cfg-move .cfg-move-btn:not(:disabled):hover { color:var(--accent); } /* Preview + Duplicate buttons relocated onto the price row, pushed to the right. */ .cfg-price-row .cfg-num { max-width:84px; } .cfg-variant-acts { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0; } .cfg-preview-bar { margin-top:10px; } .cfg-reset-btn { width:100%; height:30px; background:var(--panel2); border:1px solid var(--border2); border-radius:7px; color:var(--text-dim); font-family:var(--font-body); font-size:var(--fs-xxs); letter-spacing:.14em; cursor:pointer; touch-action:manipulation; transition:all .18s; -webkit-appearance:none; } .cfg-reset-btn:hover { color:var(--accent); border-color:rgba(232,112,58,.4); } /* ── Light theme overrides — accent already swaps via tokens ── */ [data-theme="light"] #cfg-collapsed-tab { background:rgba(188,188,192,.97); color:var(--accent); } /* ── Stack the three right-edge collapsed tabs (Config / Annotations / PFX) as a centred column with fixed heights so the long label can't push them apart. ── */ #cfg-collapsed-tab, #pfx-collapsed-tab, #annotations-collapsed-tab { height: 122px; box-sizing: border-box; z-index: 209; } #cfg-collapsed-tab { top: 50%; transform: translateY(calc(-50% - 130px)); } #annotations-collapsed-tab { top: 50%; transform: translateY(-50%); } #pfx-collapsed-tab { top: 50%; transform: translateY(calc(-50% + 130px)); } #cfg-panel, #pfx-panel { z-index: 210; } /* ── Configurator toolbar button — light-mode match (parity with #pfxBtn / #aiRenderBtn) ── */ [data-theme="light"] #cfgBtn { color: var(--accent) !important; border-color: rgba(228,92,60,.35) !important; } [data-theme="light"] #cfgBtn.active { background: rgba(228,92,60,.12) !important; border-color: rgba(228,92,60,.5) !important; } [data-theme="light"] #cfgBtnMob { color: var(--accent) !important; border-color: rgba(228,92,60,.35) !important; } /* ── Bolder configurator titles in light mode for legibility ── */ [data-theme="light"] .cfg-grp-badge { font-weight: 700; } [data-theme="light"] .cfg-acc-title { font-weight: 600; } [data-theme="light"] .cfg-sub-hd { font-weight: 600; } /* ── Light-mode legibility: darken SMALL accent-coloured text only ────────────── Targets value badges, active option/filter/scope buttons, chips and small badges where the text colour previously matched a same-hue tinted fill. Does NOT touch large text or primary buttons. */ [data-theme="light"]{ --accent-ink: #c2402a; /* darker orange-red — small text */ --accent2-ink: #5326a8; /* darker purple — small text */ } [data-theme="light"] .cfg-val, [data-theme="light"] .cfg-opt-btn.active, [data-theme="light"] .cfg-target-chip.on, [data-theme="light"] .cfg-tgt-mode-btn.on, [data-theme="light"] .mat-filter-btn.active, [data-theme="light"] .lib-sub-btn.active, [data-theme="light"] .anim-col-tab.active, [data-theme="light"] .seq-col-tab.active, [data-theme="light"] .matcap-modes button.active, [data-theme="light"] .grad-seg button.active, [data-theme="light"] .grad-rev.active, [data-theme="light"] .ar-lit-btn.active, [data-theme="light"] .vp-ic.on, [data-theme="light"] .vp-ic:active, [data-theme="light"] .xf-gizmo-btn.active { color: var(--accent-ink) !important; } [data-theme="light"] .pfx-val, [data-theme="light"] .pfx-opt-btn.active, [data-theme="light"] .pfx-layer-onoff.on, [data-theme="light"] .pfx-interactive-btn.on, [data-theme="light"] .pfx-adv-btn.on, [data-theme="light"] .scope-btn.active, [data-theme="light"] .anim-ev-chip, [data-theme="light"] #gyro-badge, [data-theme="light"] #mc-badge.pan, [data-theme="light"] #animPreviewBtn.active, [data-theme="light"] .cl-shadow-btn.on, [data-theme="light"] .xf-gizmo-btn.mode-rot.active, [data-theme="light"] #geoBtn.active, [data-theme="light"] .val-badge[contenteditable]:focus { color: var(--accent2-ink) !important; } /* SCL must stay green and SEL neutral in light mode — the broad .active rule above (accent-ink !important) otherwise forces them orange like POS. */ [data-theme="light"] .xf-gizmo-btn.mode-scl.active { color: #1a8040 !important; } [data-theme="light"] .xf-gizmo-btn.mode-sel.active { color: var(--text) !important; } /* ── Responsive side-panel width (PFX + Configurator share one token) ── 320 base (1356/1440) · 340 ≥1700 (covers 1920) · 400 ≥2400 (2K+). scene-ui.js reads the panel's actual rendered width, so the viewport push always matches whatever this token resolves to. */ :root{ --side-panel-w: 320px; } :root{ --cfg-panel-w: var(--side-panel-w); } /* configurator width; overridden by drag-resize */ :root{ --pfx-panel-w: var(--side-panel-w); } /* particle FX width; overridden by drag-resize */ :root{ --annotations-panel-w: var(--side-panel-w); } /* annotations side width */ @media (min-width: 1700px){ :root{ --side-panel-w: 340px; } } @media (min-width: 2400px){ :root{ --side-panel-w: 400px; } } /* ── #3 bolder add-buttons in the configurator panel ── */ .cfg-add-action-btn, .cfg-add-sub-btn { font-weight: 600; } /* ── #5 PFX light-mode purple parity ── */ [data-theme="light"] #pfxBtnMob { border-color: rgba(107,53,212,.30) !important; } [data-theme="light"] .pfx-interactive-btn.on { background: rgba(107,53,212,.14); border-color: rgba(107,53,212,.55); } [data-theme="light"] .pfx-adv-btn.on { background: rgba(107,53,212,.08); border-color: rgba(107,53,212,.35); } /* ── Header toolbar buttons smaller on ≤1920 desktops; unchanged ≥1921 ── */ @media (min-width: 1281px) and (max-width: 1920px){ .tb-btn { font-size: var(--fs-xs); letter-spacing: .12em; padding: 0 clamp(8px,0.9vw,13px); height: clamp(28px,3.2vh,34px); gap: 5px; } .tb-version { font-size: 9px; } } /* ═══════════════════════════════════════════════════════════ STATUS FOOTER (footer.js) — solid narrow bar, RESERVES SPACE. The fill prevents overlap; everything bottom-anchored ends above it. Layout: stats (desktop) / 3 colored toggles (mobile) left; FPS + icons right. ═══════════════════════════════════════════════════════════ */ :root{ --footer-h: 28px; } @media (max-width: 1280px){ :root{ --footer-h: 36px; } } #footer{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: var(--panel); border-top: 1px solid var(--border); z-index: 250; font-family:var(--font-body); font-size: var(--fs-xxs); color: var(--text-dim); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ft-left, .ft-right{ display: flex; align-items: center; gap: 6px; } .ft-stats{ display: flex; gap: 12px; align-items: center; white-space: nowrap; } .ft-stat b{ color: var(--text-mid); font-weight: 600; } .ft-fps{ color: var(--accent2); white-space: nowrap; min-width: 50px; text-align: right; } .ft-btn{ background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--text-dim); font-family: inherit; font-size: var(--fs-xxs); padding: 3px 5px; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; transition: color .15s, border-color .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; } .ft-btn:hover{ color: var(--text); } .ft-btn svg{ width: 14px; height: 14px; } .ft-icon{ padding: 3px 4px; } .ft-icon.on{ color: var(--accent); } #ft-settings svg{ width: 17px; height: 17px; } /* Three colored panel toggles — mobile only (desktop uses the top toolbar) */ .ft-panel-toggle{ display: none; } .ft-cfg{ color: var(--accent); } .ft-pfxb{ color: var(--accent2); } .ft-annob{ color: var(--accent2); } .ft-aib{ color: #c080ff; } .ft-cfg.on{ color: var(--text); border-bottom-color: var(--accent); } .ft-pfxb.on{ color: var(--text); border-bottom-color: var(--accent2); } .ft-annob.on{ color: var(--text); border-bottom-color: var(--accent2); } .ft-aib.on{ color: var(--text); border-bottom-color: #c080ff; } [data-theme="light"] .ft-aib{ color: #8b46d6; } [data-theme="light"] .ft-aib.on{ border-bottom-color: #8b46d6; } /* Reserve space: lift everything bottom-anchored above the bar */ #viewport{ bottom: var(--footer-h); } #panel{ bottom: var(--footer-h); } #reopenBtn{ bottom: calc(10px + var(--safe-bottom) + var(--footer-h)); } #mc-camwrap{ bottom: calc(var(--panel-h) + 14px + var(--footer-h)); } #toast{ bottom: calc(var(--panel-h) + 10px + var(--footer-h)); } #pfx-panel{ bottom: var(--footer-h); } #cfg-panel{ bottom: var(--footer-h); } @media (min-width: 1280px){ #pfx-panel[data-layout="side"]{ bottom: var(--footer-h); } #cfg-panel[data-layout="side"]{ bottom: var(--footer-h); } } /* Compact mode (≤1280px, matches hamburger): stats hidden, three colored toggles bottom-left, larger taps, narrower panel title bars */ @media (max-width: 1280px){ .ft-stats{ display: none; } .ft-panel-toggle{ display: inline-flex; align-items: center; padding: 6px 2px; } .ft-btn{ padding: 6px 8px; } #footer{ gap: 6px; } #ft-theme{ display: none; } /* hide dark/light toggle on mobile */ #ft-grid{ display: none; } /* grid toggle is desktop-only */ /* Narrower PFX + Config title bars on mobile */ .pfx-hd, .cfg-hd{ padding: 5px 12px; } .pfx-icon-btn, .cfg-icon-btn{ width: 24px; height: 24px; } } /* Tablet (768–1280px, the hamburger range): footer "menu" buttons a little larger than phone for touch — icons, labels and tap area grow within the 36px footer. */ @media (min-width:768px) and (max-width:1280px){ .ft-btn{ padding: 8px 9px; font-size: 13px; } /* fixed label size — no shrink on small tablets */ .ft-panel-toggle{ padding: 8px 5px; } .ft-btn svg{ width: 17px; height: 17px; } #ft-settings svg{ width: 20px; height: 20px; } } /* Mobile (<768px): larger labels too (matches tablet), but tighter spacing between buttons so the row still fits on a narrow phone. */ @media (max-width:767px){ .ft-btn{ font-size: var(--fs-xs); padding: 6px 5px; } .ft-panel-toggle{ padding: 6px 3px; } .ft-left, .ft-right{ gap: 3px; } #footer{ gap: 4px; } } /* ── Panel maximize — bottom-sheet mode only (<1280px) ────────── Button hidden in desktop side mode; in sheet mode it expands the panel to fill from just under the top bar down to the footer. */ #pfx-max-btn, #cfg-max-btn{ display: none; } @media (max-width: 1280px){ #pfx-max-btn, #cfg-max-btn{ display: flex; } #pfx-panel.maximized, #cfg-panel.maximized{ height: calc(100dvh - var(--topbar-h) - var(--safe-top) - var(--footer-h)); } } /* ══ PROJECTS — toolbar chip + dashboard modal (v1.22.1) ══════════════════════ */ /* Toolbar project-name chip (cloud-save-in-place made visible) */ .tb-proj-chip{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--border2);border-radius:7px;height:clamp(30px,3.5vh,40px);padding:0 12px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--text-mid);max-width:170px;-webkit-appearance:none;transition:border-color .15s,color .15s;} .tb-proj-chip:hover{border-color:rgba(232,112,58,.5);color:var(--text);} .tb-proj-chip #projNameChipText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .proj-chip-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex-shrink:0;} .tb-proj-chip.unsaved .proj-chip-dot{background:var(--text-dim);} /* Tab segmented control */ .proj-tabs{display:flex;gap:4px;margin-bottom:18px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:4px;} .proj-tab-btn{flex:1;height:34px;background:transparent;border:none;border-radius:7px;cursor:pointer;touch-action:manipulation;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xxs);letter-spacing:.14em;color:var(--text-dim);transition:all .15s;-webkit-appearance:none;} .proj-tab-btn.active{background:var(--accent-lo);color:var(--accent);} .proj-tab-btn:hover:not(.active){color:var(--text-mid);} /* Section header with optional "See all" link */ .proj-sec{display:flex;align-items:center;justify-content:space-between;margin:clamp(10px,1.4vh,16px) 0 10px;} .proj-sec-title{font-size:var(--fs-xxs);letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);} .proj-sec-link{font-size:var(--fs-xxs);color:var(--accent2);cursor:pointer;letter-spacing:.05em;} .proj-sec-link:hover{color:var(--accent);} /* Card grid + tiles */ .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;} .proj-tile{position:relative;background:var(--panel2);border:1px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .15s;} .proj-tile:hover{border-color:var(--accent2);} .proj-tile-thumb{aspect-ratio:16/10;background:var(--panel3);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;} .proj-tile-thumb img{width:100%;height:100%;object-fit:cover;display:none;} .proj-tile-thumb img.loaded{display:block;} .proj-tile-ph{font-size:28px;opacity:.25;} .proj-tile-info{padding:8px 10px;} .proj-tile-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .proj-tile-meta{font-size:var(--fs-xxs);color:var(--text-dim);margin-top:2px;} .proj-tile-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;border:1px solid var(--border2);background:rgba(8,8,12,.78);color:var(--text-dim);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;} .proj-tile:hover .proj-tile-del{display:flex;} .proj-tile-del:hover{border-color:var(--red);color:var(--red);} /* New + ghost variants */ .proj-tile.new{border-style:dashed;border-color:rgba(232,112,58,.45);} .proj-tile.new .proj-tile-thumb{background:var(--accent-lo);} .proj-tile.new .proj-tile-ph{color:var(--accent);opacity:.7;} .proj-tile.ghost{cursor:default;opacity:.55;} .proj-tile.ghost:hover{border-color:var(--border);} .proj-note{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.6;margin-top:10px;letter-spacing:.02em;} .proj-footer{margin-top:22px;padding-top:14px;border-top:1px solid var(--border);text-align:center;} /* Touch devices have no hover — keep the delete button visible */ @media (hover: none) { .proj-tile .proj-tile-del { display:flex; } } /* ══ PROJECTS — tile ⋮ menu (v1.23.0) ════════════════════════════════════════ */ .proj-tile-info{display:flex;align-items:center;gap:8px;} /* override block layout for the ⋮ row */ .proj-tile-txt{flex:1;min-width:0;} .proj-tile-menu{flex-shrink:0;width:26px;height:26px;border:none;background:transparent;color:var(--text-dim);border-radius:6px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;} .proj-tile-menu:hover{background:var(--panel3);color:var(--text);} .proj-menu{position:fixed;z-index:900;min-width:150px;background:var(--panel);border:1px solid var(--border2);border-radius:10px;padding:5px;box-shadow:0 10px 34px rgba(0,0,0,.42);} .proj-menu-item{padding:8px 12px;border-radius:6px;cursor:pointer;font-family:var(--font-display);font-size:var(--fs-sm);color:var(--text-mid);} .proj-menu-item:hover{background:var(--panel3);color:var(--text);} .proj-menu-item.danger{color:var(--red);} .proj-menu-item.danger:hover{background:rgba(255,80,80,.12);} /* #7 — scene-panel cloud (☁ save-to-library) sits apart from the view/delete icons */ .model-btns .model-lib-btn{margin-right:6px;} /* ══ FOOTER project chip (v1.23.x) — desktop only, left ══════════════════════ */ .ft-proj{display:flex;align-items:center;gap:6px;padding-right:10px;margin-right:4px;max-width:200px;border-right:1px solid var(--border);} .ft-proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text-dim);transition:background .2s;} .ft-proj-dot.saved{background:var(--accent2);} /* teal — saved & no pending changes */ .ft-proj-dot.unsaved{background:#f0a83a;} /* amber — unsaved changes / never saved */ .ft-proj-name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* Two links in the modal footer */ .proj-footer{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;} @media (max-width: 1280px) { .ft-proj { display: none; } } /* hide chip in footer compact mode (matches stats) */ /* ══ EXPORT HUB (v1.24.0) — scalable target registry ════════════════════ */ .xh-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:18px;} .xh-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:16px 14px;background:var(--panel2);border:1px solid var(--border2);border-radius:12px;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;font-family:inherit;} .xh-card.live:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--panel3);} .xh-card.hero{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;background:var(--accent-lo);border-color:var(--accent);} .xh-card.soon{cursor:not-allowed;opacity:.5;} .xh-card.locked{cursor:pointer;opacity:.6;} .xh-card.locked:hover{opacity:.85;border-color:var(--accent);} .xh-card.hero.locked{background:var(--panel2);border-color:var(--border2);} .xh-ico{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--text-mid);} .xh-ico svg{width:100%;height:100%;} .xh-card.hero .xh-ico{width:34px;height:34px;color:var(--accent);} .xh-hero-body{display:flex;flex-direction:column;gap:3px;flex:1;} .xh-label{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--text);letter-spacing:.04em;} .xh-desc{font-size:var(--fs-xxs);color:var(--text-dim);line-height:1.55;} .xh-badge{position:absolute;top:9px;right:9px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);background:var(--panel);border:1px solid var(--border2);border-radius:99px;padding:2px 7px;} .xh-result{margin-top:16px;padding:14px;background:var(--panel2);border:1px solid var(--accent);border-radius:12px;} .xh-result-row{display:flex;gap:8px;align-items:center;margin-top:10px;} .xh-url{flex:1;min-width:0;background:var(--panel3);border:1px solid var(--border2);border-radius:8px;padding:9px 11px;color:var(--accent);font-family:var(--font-body);font-size:var(--fs-xxs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Embed Code result: snippet box, height control, paste tips */ .xh-embed-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:10px;} .xh-embed-h{display:flex;align-items:center;gap:6px;font-size:var(--fs-xxs);color:var(--text-mid);font-family:var(--font-body);} .xh-embed-h input{width:64px;background:var(--panel3);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xxs);padding:4px 6px;outline:none;-webkit-appearance:none;} .xh-embed-hint{font-size:var(--fs-xxs);color:var(--text-dim);} .xh-embed-code{display:block;width:100%;margin-top:9px;box-sizing:border-box;resize:vertical;background:var(--panel3);border:1px solid var(--border2);border-radius:8px;padding:10px 11px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-xxs);line-height:1.5;outline:none;white-space:pre;} .xh-embed-code:focus{border-color:var(--accent);} .xh-embed-tips{margin-top:11px;font-size:var(--fs-xxs);color:var(--text-dim);} .xh-embed-tips summary{cursor:pointer;color:var(--text-mid);letter-spacing:.02em;user-select:none;} .xh-embed-tips summary:hover{color:var(--text);} .xh-embed-tips ul{margin:8px 0 0;padding-left:16px;line-height:1.65;} .xh-embed-tips li{margin-bottom:3px;} .xh-embed-tips b{color:var(--text-mid);font-weight:600;} .xh-embed-tips i{font-style:normal;color:var(--accent);} /* ══ WORKSPACES (mode system) ══════════════════════════════════════════════════ The controller (workspace.js) sets body.cap--off; these rules hide every element tagged data-cap="". !important so they beat any inline display the panel scripts toggle. Studio sets no cap-*-off class → everything shows. */ body.cap-anim-off [data-cap="anim"], body.cap-pfx-off [data-cap="pfx"], body.cap-configurator-off [data-cap="configurator"], body.cap-magiccam-off [data-cap="magiccam"], body.cap-camera-off [data-cap="camera"]{ display:none !important; } /* Env panel — hide artistic controls in the commerce workspaces (Showcase + 3D Configurator). Rendering (exposure / env intensity) stays; Custom Environment + Post FX are hidden. */ body[data-mode="showcase"] #sec-custom-env, body[data-mode="showcase"] #env-drop-zone, body[data-mode="showcase"] #customEnvScroll, body[data-mode="showcase"] #env-acc-postfx, body[data-mode="config"] #sec-custom-env, body[data-mode="config"] #env-drop-zone, body[data-mode="config"] #customEnvScroll, body[data-mode="config"] #env-acc-postfx { display:none !important; } /* Lights panel — in the commerce workspaces (Showcase + 3D Configurator) hide the manual light blocks (Ambient / Fill / Rim) and Custom Lights; Key, Contact Shadow, Lighting Presets and AI Light remain. */ body[data-mode="showcase"] .light-block[data-light="amb"], body[data-mode="showcase"] .light-block[data-light="fill"], body[data-mode="showcase"] .light-block[data-light="rim"], body[data-mode="showcase"] #sec-custom-lights, body[data-mode="showcase"] #customLightsContainer, body[data-mode="showcase"] #addLightBtn, body[data-mode="config"] .light-block[data-light="amb"], body[data-mode="config"] .light-block[data-light="fill"], body[data-mode="config"] .light-block[data-light="rim"], body[data-mode="config"] #sec-custom-lights, body[data-mode="config"] #customLightsContainer, body[data-mode="config"] #addLightBtn { display:none !important; } /* Library panel — hide the Products sub-tab in Showcase (config keeps it for variant/SKU binding) */ body[data-mode="showcase"] .lib-sub-btn[data-lib="meshes"], body[data-mode="showcase"] #lib-meshes { display:none !important; } /* ── Workspace pill (top-right) ── */ #mm-ws-pill{display:flex;align-items:center;gap:6px;height:clamp(28px,3vh,34px);padding:0 clamp(8px,.9vw,12px);background:var(--panel2);border:1px solid var(--border2);border-radius:99px;cursor:pointer;touch-action:manipulation;-webkit-appearance:none;font-family:var(--font-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--text-mid);white-space:nowrap;flex-shrink:0;transition:border-color .15s,color .15s,background .15s;} #mm-ws-pill:hover{border-color:rgba(232,112,58,.5);color:var(--text);} #mm-ws-pill:active{border-color:var(--accent);color:var(--accent);} .mm-ws-ico{display:flex;align-items:center;justify-content:center;width:14px;height:14px;color:var(--accent);flex-shrink:0;} .mm-ws-ico svg{width:100%;height:100%;} .mm-ws-label{max-width:120px;overflow:hidden;text-overflow:ellipsis;} .mm-ws-caret{display:flex;align-items:center;justify-content:center;width:11px;height:11px;opacity:.55;flex-shrink:0;} .mm-ws-caret svg{width:100%;height:100%;} /* Placement: desktop → ride at the far right of the toolbar cluster; ≤1280 (right cluster hidden) → lead the mobile right cluster near the hamburger. */ @media(min-width:1281px){ #tb-right-desktop{ margin-left:auto; } #mm-ws-pill{ margin-left:8px; } } /* Side-edge collapsed tabs (Config / PFX / Notes) crowd #vp-iconbar below 2K — show only on 2K+ (≥2560px). The header buttons (#cfgBtn etc.) stay visible at all sizes, controlled by workspaces. */ @media(max-width:2559px){ #cfg-collapsed-tab, #pfx-collapsed-tab, #annotations-collapsed-tab{ display:none !important; } } @media(max-width:1280px){ #mm-ws-pill{ margin-left:auto; margin-right:8px; } #authBtnNav{ margin-left:0; margin-right:8px; } } @media(max-width:600px){ #mm-ws-pill{height:28px;gap:5px;padding:0 9px;font-size:var(--fs-xs);letter-spacing:.05em;} .mm-ws-ico{width:13px;height:13px;} .mm-ws-label{max-width:72px;} .mm-ws-caret{display:none;} .tb-version{display:none;} } /* ── Workspace picker modal ── */ .mm-ws-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} .mm-ws-modal.open{display:flex;} .mm-ws-sheet{width:100%;max-width:680px;max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border2);border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.5);} .mm-ws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px;} .mm-ws-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);letter-spacing:.06em;color:var(--text);} .mm-ws-sub{font-size:var(--fs-xs);color:var(--text-dim);line-height:1.55;margin-top:5px;max-width:52ch;} .mm-ws-x{flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--border2);border-radius:8px;color:var(--text-mid);cursor:pointer;touch-action:manipulation;font-size:13px;transition:border-color .15s,color .15s;} .mm-ws-x:hover{border-color:var(--accent);color:var(--accent);} .mm-ws-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .mm-ws-group-label{font-family:var(--font-body);font-size:var(--fs-xxs);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin:0 2px 8px;display:flex;align-items:center;gap:8px;} .mm-ws-group-label::after{content:'';flex:1;height:1px;background:var(--border);} .mm-ws-grid + .mm-ws-group-label{margin-top:16px;} @media(max-width:600px){ .mm-ws-card{padding:11px 10px;gap:5px;} .mm-ws-media{height:36px;} .mm-ws-media svg{width:20px;height:20px;} .mm-ws-card-name{font-size:var(--fs-sm);} .mm-ws-card-tag{font-size:var(--fs-xxs);line-height:1.35;} } .mm-ws-card{position:relative;display:grid;grid-template-columns:1fr;gap:9px;padding:18px 16px;background:var(--panel2);border:1px solid var(--border2);border-radius:13px;text-align:left;cursor:pointer;touch-action:manipulation;font-family:inherit;transition:border-color .15s,background .15s,transform .1s;} .mm-ws-card:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--panel3);} .mm-ws-card.active{border-color:var(--accent);background:var(--accent-lo);cursor:default;} .mm-ws-card.active:hover{transform:none;} .mm-ws-media{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:var(--panel3);border:1px solid var(--border);border-radius:10px;color:var(--accent);} .mm-ws-media svg{width:30px;height:30px;} .mm-ws-card-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);letter-spacing:.04em;color:var(--text);} .mm-ws-card-tag{font-size:var(--fs-xxs);color:var(--text-dim);line-height:1.55;} .mm-ws-card-badge{display:none;position:absolute;top:11px;right:11px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--panel);border:1px solid var(--accent);border-radius:99px;padding:2px 8px;} .mm-ws-card.active .mm-ws-card-badge{display:block;} /* Light-mode: darker accent ink for the small accent text/badge */ [data-theme="light"] .mm-ws-card-badge{ color:var(--accent-ink); border-color:var(--accent-ink); } [data-theme="light"] .mm-ws-ico, [data-theme="light"] .mm-ws-media{ color:var(--accent-ink); } /* ── SETTINGS MODAL (settings.js) — small focused panel, opened from footer ⚙ ── */ .mm-settings-modal{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,5,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);} .mm-settings-modal.open{display:flex;} .mm-settings-sheet{width:100%;max-width:480px;max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border2);border-radius:16px;padding:18px;} .mm-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;} .mm-settings-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);letter-spacing:.18em;color:var(--accent);} .mm-settings-x{width:32px;height:32px;background:var(--panel2);border:1px solid var(--border2);border-radius:8px;cursor:pointer;color:var(--text-dim);font-size:14px;display:flex;align-items:center;justify-content:center;touch-action:manipulation;} .mm-settings-body{display:flex;flex-direction:column;gap:14px;} .mm-settings-row{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--panel2);border:1px solid var(--border2);border-radius:11px;} .mm-settings-rowtitle{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--text);letter-spacing:.04em;} .mm-settings-rowsub{font-size:var(--fs-xxs);color:var(--text-dim);margin-top:3px;line-height:1.45;} .mm-settings-seg{display:flex;flex-wrap:wrap;gap:6px;} .mm-settings-segbtn{font-family:inherit;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;background:var(--panel3);border:1px solid var(--border);color:var(--text-mid);padding:7px 12px;border-radius:7px;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s,color .15s;} .mm-settings-segbtn:hover{border-color:var(--accent);color:var(--text);} .mm-settings-segbtn.active{border-color:var(--accent);background:var(--accent-lo);color:var(--accent);} [data-theme="light"] .mm-settings-segbtn.active{ border-color:var(--accent-ink); color:var(--accent-ink); } /* ── Annotations: maximize button is for mobile only (desktop uses side/bottom) ── */ @media (min-width: 1280px) { #annotations-max-btn { display: none !important; } } /* ── Unified delete/remove controls across tabs: larger glyph + warm hover (grows) ── */ .mm-del, .hotspot-del, .lib-icon-btn.del, .model-del, .anim-event-del, .anim-state-del, .hier-del, .tex-remove, .cl-del { cursor: pointer; font-size: 16px; line-height: 1; transition: color .15s, background .15s, transform .12s; } .mm-del, .hotspot-del, .model-del, .anim-event-del, .anim-state-del, .hier-del, .cl-del { color: var(--text-dim); padding: 2px 6px; border-radius: 5px; flex: 0 0 auto; } .mm-del:hover, .hotspot-del:hover, .lib-icon-btn.del:hover, .model-del:hover, .anim-event-del:hover, .anim-state-del:hover, .hier-del:hover, .tex-remove:hover, .cl-del:hover { color: #ff7a3a !important; background: rgba(255,122,58,.13); transform: scale(1.18); } /* ── Version tag: show only on 2K+ monitors (hidden on smaller desktops/laptops) ── */ @media (max-width: 2559px) { .tb-version { display: none !important; } } /* ── Export hub: 2-up cards on small screens (hero stays full-width) to cut scrolling ── */ @media (max-width: 600px){ #export-hub-grid.xh-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #export-hub-grid .xh-card{ padding:13px 11px; } #export-hub-grid .xh-card.hero{ grid-column:1/-1; } } /* Material panel — collapsible advanced sections (Physical Properties, UV Transform) */ .mat-acc-hd{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;user-select:none;} .mat-acc-chev{font-size:var(--fs-xs);color:var(--text-dim);transition:transform .15s ease;line-height:1;} .mat-acc-hd.open .mat-acc-chev{transform:rotate(90deg);} .mat-acc-bd{display:none;} .mat-acc-bd.open{display:block;} /* Matcap section — shown only when material type is Matcap */ #matcapSection{display:none;} #matcapSection.show{display:block;} /* ── Matcap source toggle + gradient editor (gradient-editor.js) ───────────── */ .matcap-modes{display:flex;gap:5px;margin:7px 0 9px;} .matcap-modes button{flex:1;height:clamp(26px,3.2vh,32px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,color .15s;-webkit-appearance:none;} .matcap-modes button.active{background:var(--accent-lo);border-color:var(--accent);color:var(--accent);} .grad-ed{margin:2px 0 4px;} .grad-ctrls{display:flex;align-items:center;gap:6px;margin-bottom:8px;} .grad-seg{display:flex;gap:4px;flex:1;} .grad-seg button,.grad-rev{height:clamp(24px,3vh,30px);background:var(--panel2);color:var(--text-dim);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:background .15s,border-color .15s,color .15s;-webkit-appearance:none;} .grad-seg button{flex:1;} .grad-rev{padding:0 12px;flex-shrink:0;} .grad-seg button.active,.grad-rev.active{background:var(--accent-lo);border-color:var(--accent);color:var(--accent);} .grad-angle{display:flex;align-items:center;gap:8px;margin:0 0 8px;} .grad-angle-lbl{font-size:var(--fs-xxs);color:var(--text-mid);min-width:40px;} .grad-angle input[type=range]{flex:1;} .grad-angle-val{font-size:var(--fs-xxs);color:var(--text-dim);min-width:34px;text-align:right;} .grad-stoprow{display:flex;align-items:center;gap:9px;margin-top:4px;} .grad-swatch{width:36px;height:26px;padding:0;border:1px solid var(--border2);border-radius:6px;background:var(--panel3);cursor:pointer;-webkit-appearance:none;appearance:none;flex-shrink:0;} .grad-swatch::-webkit-color-swatch-wrapper{padding:2px;} .grad-swatch::-webkit-color-swatch{border:none;border-radius:4px;} .grad-swatch::-moz-color-swatch{border:none;border-radius:4px;} .grad-pos{font-size:var(--fs-xxs);color:var(--text-mid);min-width:34px;} .grad-del{margin-left:auto;height:26px;padding:0 11px;background:var(--panel2);color:var(--text-mid);font-family:var(--font-body);font-size:var(--fs-xxs);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:manipulation;transition:border-color .15s,color .15s;-webkit-appearance:none;} .grad-del:active:not(:disabled){border-color:var(--red);color:var(--red);} .grad-del:disabled{cursor:default;} /* Multi-select highlight in the hierarchy/outliner */ .hier-node.multisel{background:color-mix(in srgb, var(--accent2) 22%, transparent);box-shadow:inset 2px 0 0 var(--accent2);} /* Phong specular section — shown only when material type is Phong */ #phongSection{display:none;} #phongSection.show{display:block;} /* Toon tones section — shown only when material type is Toon */ #toonSection{display:none;} #toonSection.show{display:block;} /* Named groups list (Scene > Groups) */ #groups-list{display:flex;flex-direction:column;gap:3px;} .group-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:6px;cursor:pointer;background:var(--panel-2,rgba(127,127,127,.06));font-size:var(--fs-xs);} .group-row:hover{background:color-mix(in srgb, var(--accent2) 16%, transparent);} .group-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .group-count{opacity:.6;font-size:var(--fs-xxs);min-width:14px;text-align:center;} .group-del{opacity:.5;cursor:pointer;padding:0 2px;} .group-del:hover{opacity:1;color:#ff6b6b;} .group-btn{opacity:.5;cursor:pointer;padding:0 2px;font-size:var(--fs-xxs);line-height:1;user-select:none;} .group-btn:hover{opacity:1;color:var(--accent2);} .group-row.editing{background:color-mix(in srgb, var(--accent2) 14%, transparent);outline:1px solid var(--accent2);} .group-row.editing .group-edit{opacity:1;color:var(--accent2);} .group-row.active .group-btn{color:rgba(255,255,255,.8);} .group-name-edit{flex:1;min-width:0;font:inherit;color:inherit;background:rgba(127,127,127,.15);border:1px solid var(--accent2);border-radius:4px;padding:1px 4px;outline:none;} /* Configurator: named-group quick-add row in the target picker */ .cfg-tgt-grouprow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:4px 0 2px;} .cfg-tgt-grouplbl{font-size:var(--fs-xxs);text-transform:uppercase;letter-spacing:.18em;opacity:.55;margin-right:2px;} .cfg-tgt-groupchip{font-size:var(--fs-xxs);padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;} .cfg-tgt-groupchip:hover{border-color:var(--accent2);} .cfg-tgt-groupchip.on{background:var(--accent2);border-color:var(--accent2);color:#fff;} /* Groups mirrored into the Objects dock */ #groups-box-dock{padding:6px 8px 7px;border-bottom:1px solid var(--border);} .groups-dock-hd{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-xxs);letter-spacing:.18em;opacity:.6;margin-bottom:4px;} .groups-dock-add{width:18px;height:18px;line-height:1;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0;} .groups-dock-add:hover{border-color:var(--accent2);color:var(--accent2);} /* Active (currently-selected) group row */ .group-row.active{background:var(--accent2);border-color:var(--accent2);} .group-row.active .group-name,.group-row.active .group-count{color:#fff;} .group-row.active .group-del{color:rgba(255,255,255,.8);} /* Group selection-mode buttons (Scene panel + Objects dock) */ .groups-dock-acts{display:flex;align-items:center;gap:5px;} .groups-sel-btn{font-size:var(--fs-xxs);padding:2px 9px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer;line-height:1.5;white-space:nowrap;} .groups-sel-btn:hover{border-color:var(--accent2);color:var(--accent2);} .groups-sel-btn.on{background:var(--accent2);border-color:var(--accent2);color:#fff;} /* Group boxes: collapsible + pinned to top of their panel */ .mm-grp-chev{background:none;border:none;color:var(--text);opacity:.55;cursor:pointer;font-size:11px;line-height:1;padding:0 4px 0 0;margin:0;} .mm-grp-chev:hover{opacity:1;} .mm-groups-box,#groups-box-dock{position:sticky;top:0;z-index:5;background:var(--panel);} .mm-groups-box.collapsed #groups-list,#groups-box-dock.collapsed #groups-list-dock{display:none;} /* Cancel button shown during group selection mode */ .groups-cancel-btn:hover{border-color:#e8703a;color:#e8703a;} .groups-cancel-btn.on,.groups-cancel-btn{background:transparent;} /* ── Drill-select breadcrumb (clickable hierarchy path, top-center of viewport) ── */ #vp-breadcrumb{position:fixed;top:calc(var(--topbar-h) + var(--safe-top) + 10px);left:50%;transform:translateX(-50%);display:none;align-items:center;gap:1px;max-width:min(82vw,560px);background:var(--panel);border:1px solid var(--border2);border-radius:6px;padding:2px 6px;backdrop-filter:blur(8px);z-index:9;white-space:nowrap;overflow:hidden;} #vp-breadcrumb.show{display:flex;} #vp-breadcrumb .vp-crumb{background:none;border:none;-webkit-appearance:none;font-family:var(--font-display);font-weight:600;font-size:var(--fs-xxs);letter-spacing:.04em;color:var(--text-mid);cursor:pointer;padding:2px 6px;border-radius:4px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;touch-action:manipulation;} #vp-breadcrumb .vp-crumb:hover{background:var(--accent-lo);color:var(--text);} #vp-breadcrumb .vp-crumb.cur{color:var(--accent);cursor:default;} #vp-breadcrumb .vp-crumb.cur:hover{background:none;color:var(--accent);} #vp-breadcrumb .vp-crumb-sep{color:var(--text-dim);font-size:8px;flex-shrink:0;pointer-events:none;padding:0 1px;} #vp-breadcrumb .vp-crumb-ell{color:var(--text-dim);font-size:var(--fs-xxs);padding:2px 4px;pointer-events:none;} /* ─── THEMED DIALOGS (mmConfirm / mmPrompt — utils.js) ─────────────────────── */ .mm-dialog-ov{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;background:rgba(5,5,10,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:24px;} .mm-dialog{background:var(--panel2,#15151d);border:1px solid var(--border2,#2a2a3a);border-radius:14px;padding:20px 20px 16px;max-width:360px;width:100%;box-shadow:0 18px 60px rgba(0,0,0,.55);font-family:var(--font-body,sans-serif);} .mm-dialog-title{font-size:14px;font-weight:600;color:var(--text,#e8e8ef);margin-bottom:7px;} .mm-dialog-body{font-size:12px;color:var(--text-dim,#9a9aae);line-height:1.5;margin-bottom:16px;white-space:pre-line;} .mm-dialog-input{width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;border:1px solid var(--border2,#2a2a3a);background:var(--panel,#0f0f17);color:var(--text,#e8e8ef);font-family:inherit;font-size:13px;margin-bottom:16px;outline:none;} .mm-dialog-input:focus{border-color:var(--accent,#6c8cff);} .mm-dialog-btns{display:flex;gap:10px;justify-content:flex-end;} .mm-dialog-btn{padding:7px 15px;border-radius:8px;font-family:inherit;font-size:12px;cursor:pointer;border:1px solid var(--border2,#2a2a3a);background:transparent;color:var(--text,#e8e8ef);transition:border-color .15s,background .15s,color .15s;} .mm-dialog-btn-cancel:hover{border-color:var(--text-dim,#9a9aae);} .mm-dialog-btn-ok{background:var(--accent,#6c8cff);border-color:var(--accent,#6c8cff);color:#fff;} .mm-dialog-btn-danger{background:#e0556b;border-color:#e0556b;color:#fff;}