/* 3D parts viewer */
.clc3{--c3-accent:var(--accent-color,#22a7f0);max-width:1100px;margin:0 auto;color:#e2e8f0;font-family:inherit}
.clc3-sec{padding:70px 0}
.clc3-head{text-align:center;margin-bottom:26px}
.clc3-head span{display:inline-block;padding:5px 14px;border-radius:99px;background:color-mix(in srgb,var(--accent-color,#22a7f0) 14%,transparent);color:var(--accent-color,#22a7f0);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.clc3-head h2{margin:10px 0 4px;font-size:clamp(26px,4vw,40px)}.clc3-head p{margin:0;color:#64748b}
.c3-wrap{border-radius:28px;overflow:hidden;background:#0b1220;box-shadow:0 40px 80px -40px rgba(2,8,23,.8);border:1px solid rgba(148,163,184,.15)}
.c3-tabs{display:flex;gap:6px;padding:10px 12px 0}
.c3-tabs button{border:0;background:rgba(148,163,184,.12);color:#cbd5e1;border-radius:99px;padding:8px 18px;cursor:pointer;font-weight:600}
.c3-tabs button.is-on{background:var(--c3-accent);color:#fff}
.c3-pane{display:none}.c3-pane.is-on{display:block}
.c3-modelpane{height:460px}

.c3-stage{position:relative;aspect-ratio:16/9;min-height:260px;perspective:1100px;perspective-origin:50% 40%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;
 background:radial-gradient(120% 90% at 50% 100%,#16233f 0%,#0b1220 60%),#0b1220}
.c3-stage.is-drag{cursor:grabbing}
.c3-stage:focus-visible{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c3-accent) 55%,transparent)}
.c3-stage::before{content:"";position:absolute;inset:auto -10% -2% -10%;height:46%;background:
 linear-gradient(rgba(148,163,184,.1) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,rgba(148,163,184,.1) 1px,transparent 1px) 0 0/54px 100%;
 transform:perspective(600px) rotateX(62deg);transform-origin:50% 100%;mask:linear-gradient(transparent,#000 70%);-webkit-mask:linear-gradient(transparent,#000 70%)}
.c3-glow{position:absolute;left:50%;top:44%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c3-accent) 38%,transparent),transparent);filter:blur(10px);pointer-events:none}
.c3-floor{position:absolute;left:50%;bottom:11%;width:62%;height:7%;transform:translateX(-50%) scale(var(--shadow,1));border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(6px);transition:transform .2s;pointer-events:none}
.c3-world{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

.c3-part{--k:0;position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;padding:0;border:0;background:none;cursor:pointer;color:var(--c3-accent);
 transform-style:preserve-3d;
 transform:translate(-50%,-50%) translate3d(calc(var(--dx) * var(--u,10px) * var(--k)),calc(var(--dy) * var(--u,10px) * var(--k) * .6),calc(var(--z) * 1px + var(--k) * (var(--z) * 1.8px + 60px)));
 transition:filter .25s,opacity .25s;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.c3-part img,.c3-svg{display:block;width:100%;height:auto;pointer-events:none}
.c3-svg svg{display:block;width:100%;height:auto}
.c3-part:focus-visible{outline:none;filter:drop-shadow(0 0 12px var(--c3-accent))}
.c3-stage.has-hover .c3-part:not(.is-hover),.c3-stage.has-sel .c3-part:not(.is-sel){opacity:.38}
.c3-part.is-hover,.c3-part.is-sel{filter:drop-shadow(0 0 14px var(--c3-accent)) drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.c3-tag{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);white-space:nowrap;padding:4px 10px;border-radius:8px;background:rgba(2,6,23,.85);color:#fff;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;border:1px solid rgba(148,163,184,.3)}
.c3-part.is-hover .c3-tag,.c3-part.is-sel .c3-tag{opacity:1}
.c3-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 14px;border-radius:99px;background:rgba(2,6,23,.6);color:#94a3b8;font-size:12px;pointer-events:none}

.c3-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px 12px 4px}
.c3-btn{border:1px solid rgba(148,163,184,.3);background:rgba(148,163,184,.08);color:#e2e8f0;border-radius:99px;padding:9px 20px;font-weight:600;cursor:pointer;transition:.2s}
.c3-btn:hover{background:rgba(148,163,184,.2)}
.c3-btn.is-primary{background:var(--c3-accent);border-color:var(--c3-accent);color:#fff}
.c3-btn.is-on:not(.is-primary){border-color:var(--c3-accent);color:var(--c3-accent)}
.c3-info{padding:8px 22px;text-align:center;min-height:62px}
.c3-info strong{display:block;font-size:17px;color:#fff}.c3-info p{margin:4px auto 0;max-width:60ch;color:#94a3b8}
.c3-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:6px 14px 20px}
.c3-chip{border:1px solid rgba(148,163,184,.25);background:transparent;color:#cbd5e1;border-radius:99px;padding:6px 14px;font-size:13px;cursor:pointer;transition:.2s}
.c3-chip:hover,.c3-chip.is-on{background:var(--c3-accent);border-color:var(--c3-accent);color:#fff}

/* compact (login hero) */
.clc3.is-compact .c3-wrap{background:transparent;border:0;box-shadow:none}
.clc3.is-compact .c3-bar,.clc3.is-compact .c3-chips,.clc3.is-compact .c3-hint,.clc3.is-compact .c3-info{display:none}
.clc3.is-compact .c3-stage{background:transparent;cursor:default;pointer-events:none}
.clc3.is-compact .c3-stage::before{opacity:.5}

/* admin builder */
#clc3-admin .c3a-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:12px}
#clc3-admin .c3a-prev{border-radius:16px;overflow:hidden;margin:10px 0}
#clc3-admin .c3a-prev .clc3{max-width:none}
#clc3-admin .c3a-prev .c3-bar,#clc3-admin .c3a-prev .c3-chips,#clc3-admin .c3a-prev .c3-info{display:none}
#clc3-admin .c3a-row{display:grid;grid-template-columns:90px 1fr;gap:12px;padding:12px;border:1px solid #dcdcde;border-radius:10px;margin:8px 0;background:#fff}
#clc3-admin .c3a-thumb{width:90px;height:70px;border-radius:8px;background:#0b1220 center/contain no-repeat;border:1px solid #dcdcde}
#clc3-admin .c3a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 12px;margin-top:8px}
#clc3-admin .c3a-grid label{font-size:11px;color:#50575e;display:block}
#clc3-admin .c3a-grid input[type=range]{width:100%}
#clc3-admin .c3a-name{display:flex;gap:8px;flex-wrap:wrap}
#clc3-admin .c3a-name input[type=text]{flex:1;min-width:140px}
#clc3-admin textarea{width:100%;margin-top:6px}

@media (max-width:640px){.c3-stage{aspect-ratio:4/3}.c3-tag{font-size:11px}}
@media (prefers-reduced-motion:reduce){.c3-part{transition:none}}