:root{--cpn-red:#cf2e2e;--cpn-red-hover:#b82828;--cpn-red-light:rgba(207,46,46,0.06);--cpn-dark:#1A1A2E;--cpn-bg:#FFFFFF;--cpn-tab-bg:#FAFAFA;--cpn-border:#E0E0E0;--cpn-border-light:#EEEEEE;--cpn-muted:#999;--cpn-hint:#AAA}.cpn{background:var(--cpn-bg);border:1px solid #E5E5E5;border-radius:10px;font-family:'Metropolis',system-ui,-apple-system,sans-serif;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);max-width:1200px;margin:0 auto 30px}.cpn-tabs{display:flex;border-bottom:2px solid var(--cpn-border-light)}.cpn-tab{flex:1;padding:16px 20px;border:none;background:var(--cpn-tab-bg);color:var(--cpn-hint);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all 0.2s;border-bottom:3px solid transparent;margin-bottom:-2px;font-family:inherit;text-align:center}.cpn-tab:hover{color:#555;background:#f0f0f0}.cpn-tab.active{background:var(--cpn-bg);color:var(--cpn-red);border-bottom-color:var(--cpn-red)}.cpn-content{display:none;padding:24px}.cpn-content.active{display:block}.cpn-vehicles{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.cpn-vehicle{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 24px;border:2px solid var(--cpn-border-light);border-radius:8px;background:#fff;cursor:pointer;transition:all 0.2s;font-family:inherit;min-width:120px;flex:1}.cpn-vehicle:hover{border-color:var(--cpn-red);background:var(--cpn-red-light)}.cpn-vehicle.active{border-color:var(--cpn-red);background:var(--cpn-red)}.cpn-vehicle-icon{width:90px;height:60px;object-fit:contain;transition:filter 0.2s;filter:brightness(0) saturate(100%) opacity(.7)}.cpn-vehicle:hover .cpn-vehicle-icon{filter:brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(5000%) hue-rotate(353deg) brightness(90%) contrast(90%)}.cpn-vehicle.active .cpn-vehicle-icon{filter:brightness(0) invert(1);opacity:1}.cpn-vehicle span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--cpn-dark);transition:color 0.2s}.cpn-vehicle:hover span{color:var(--cpn-red)}.cpn-vehicle.active span{color:#fff}.cpn-vpanel{display:none}.cpn-vpanel.active{display:block}.cpn-brands{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.cpn-brand{padding:8px 18px;border:2px solid var(--cpn-border);border-radius:20px;background:#fff;color:var(--cpn-dark);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all 0.2s;font-family:inherit}.cpn-brand:hover{border-color:var(--cpn-red);color:var(--cpn-red);background:var(--cpn-red-light)}.cpn-brand.active{background:var(--cpn-red);border-color:var(--cpn-red);color:#fff}.cpn-quadrant{margin-bottom:20px;border-radius:8px;overflow:hidden}.cpn-quadrant[data-b-show]{display:none}.cpn-quadrant.visible{display:block}.cpn-quadrant-wrap{position:relative;display:inline-block;width:100%}.cpn-quadrant-img{width:100%;height:auto;display:block;border-radius:8px}.cpn-spot{position:absolute;transform:translate(-50%,-50%);z-index:2;text-decoration:none;cursor:pointer}.cpn-spot-dot{display:block;width:22px;height:22px;background:rgba(255,255,255,.3);border:2px solid rgba(255,255,255,.9);border-radius:50%;transition:all 0.3s;position:relative}.cpn-spot-dot::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.cpn-spot:hover .cpn-spot-dot{background:rgba(207,46,46,.5);border-color:#fff;transform:scale(1.4)}.cpn-spot:hover .cpn-spot-dot::after{background:#fff}.cpn-spot-label{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--cpn-dark);color:#fff;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.3px}.cpn-spot-label::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--cpn-dark)}.cpn-spot:hover .cpn-spot-label{display:block}.cpn-bpanel{display:none}.cpn-bpanel.active{display:block}.cpn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.cpn-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 16px;border:1.5px solid var(--cpn-border-light);border-radius:8px;text-decoration:none;text-align:center;transition:all 0.2s;background:#fff;min-height:80px}.cpn-card:hover{border-color:var(--cpn-red);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.cpn-card-img{width:120px;height:120px;object-fit:contain;margin-bottom:10px}.cpn-card h4{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--cpn-dark);text-transform:uppercase;letter-spacing:.3px;line-height:1.3}.cpn-card-link{font-size:11px;font-weight:700;color:var(--cpn-red);text-transform:uppercase;letter-spacing:.3px}.cpn-lub-section{margin-bottom:24px}.cpn-lub-section:last-child{margin-bottom:0}.cpn-lub-title{font-size:16px;font-weight:700;color:var(--cpn-dark);text-transform:uppercase;letter-spacing:.5px;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--cpn-red)}.cpn-hint{text-align:center;color:var(--cpn-dark);font-size:14px;padding:20px;font-weight:500;background:var(--cpn-red-light);border-radius:6px;border:1px solid rgba(207,46,46,.15)}@media (max-width:768px){.cpn-content{padding:16px}.cpn-vehicles{gap:6px}.cpn-vehicle{padding:12px 14px;min-width:70px}.cpn-vehicle-icon{width:56px;height:36px}.cpn-vehicle span{font-size:9px}.cpn-grid{grid-template-columns:repeat(2,1fr);gap:10px}.cpn-tab{font-size:10px;padding:14px 10px}.cpn-brands{gap:6px}.cpn-brand{padding:6px 14px;font-size:10px}.cpn-card-img{width:100px;height:100px}.cpn-spot-dot{width:16px;height:16px}.cpn-spot-dot::after{width:6px;height:6px}.cpn-spot-label{font-size:8px;padding:3px 6px}.cpn-quadrant-wrap{overflow:hidden}.cpn-quadrant-img{min-width:100%}.cpn-lub-title{font-size:14px}.cpn-hint{font-size:12px;padding:14px}}@media (max-width:480px){.cpn-grid{grid-template-columns:1fr}.cpn-vehicle{min-width:60px;padding:8px 6px}.cpn-vehicle-icon{width:40px;height:26px}.cpn-vehicle span{font-size:8px;letter-spacing:.3px}.cpn-vehicles{display:grid;grid-template-columns:repeat(2,1fr)}.cpn-spot-dot{width:12px;height:12px}.cpn-spot-dot::after{width:4px;height:4px}.cpn-spot-label{display:none}.cpn-spot:hover .cpn-spot-label{display:block;font-size:8px}.cpn-card{padding:14px}.cpn-card-img{width:80px;height:80px}.cpn-card h4{font-size:11px}.cpn-card-link{font-size:10px}.cpn-brands{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}.cpn-brand{white-space:nowrap;flex-shrink:0}}